ゆーたなじーソース

自動改行は「しない」で作りました。

HEADはどのページも共通です。

表紙ページはコンテンツ書かずにサイトタイトルだけでもいいかもしれませんね。

表紙の鳥かごのワンポイントはハンコでアソブ様＞Furniture＞Furniture 04＞から。別の画像にしても可愛いと思います。

HEAD

body{font-family: 'Waiting for the Sunrise', 手書き雑フォント,arial,sans-serif;
background:#fff;
color: #222222;
 font-size: 14px;
 line-height: 1.6;
 word-wrap : break-word;
}

::selection {
    background: #eee;
    color: #fff;
}

//Firefox
::-moz-selection {
    background: #eee;
    color: #fff;
}

a{
 color: #000;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 tap-highlight-color: rgba(0,0,0,0);}

a:hover{
 text-decoration: none;
 color: #a44;}

a:active{ color: #a44;}

.all{
 max-width: 400px;
 margin: auto;
padding: 25px 15px 0 15px;
 margin-top: 30px;
}
.top{ text-align: center;}

.con {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #deb887;
    border-left: solid 30px #b22222;
}
.con p {
    margin: 0; 
    padding: 0;
}

img{
  width: 50px;
  height: auto;
margin:70px 100px;}

h1{
font-family: 'Sedgwick Ave', cursive;
color:#000;
transform: rotate(-15deg);
 font-size: 42px;
 text-align: right;
 position: relative;
 top: 15px;

padding: 0 2%;}

h2{
 font-size: 100%;
 color: #ccc;
 text-align: right;
 margin-bottom: 12px;
transform: rotate(-15deg);}

h3{
    width:150px;/*幅はお好きなサイズに*/
    position:relative;
    z-index:0;
    font-size: 1em;
font-weight:bold; 
 letter-spacing: 5px;
    margin: 1.6em 0;
    padding: 1em;
    position: relative;
    /* グラデーションで折り目がついた感じに */
    background: linear-gradient(to right, #ffffcc 0%, #f1f1c1 0.5%, #f1f1c1 13%, #ffffcc 16%);
}
.h3 ::after{　/* ドロップシャドウを少し斜めに配置して、立体感を出す */
    content:"";
    display:block;
    position: absolute;
    z-index: -1;
    bottom: 5px;
    right: 0;
    height: 15px;
    width: 99%;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    transform: rotate(2deg);
}

.marker1{ letter-spacing: 3px;
background:linear-gradient(transparent 55%, #7fff7f 55%);
font-weight:bold; 
}

.marker2{ letter-spacing: 3px;
background:linear-gradient(transparent 55%, #00ffff 55%);
font-weight:bold; 
}

.marker3{ letter-spacing: 3px;
background:linear-gradient(transparent 55%, #ff75ff 55%);
font-weight:bold; 
}

.marker4{ letter-spacing: 3px;
background:linear-gradient(transparent 55%, #ffff6b 55%);
font-weight:bold; 
}

hr{border-top:1px solid #000;}

nav{
font-family: 'Waiting for the Sunrise', cursive;
font-size:20px;
font-weight: bolder;
 letter-spacing: 25px;
text-align: left;
 padding:  3px;
width: 95%;
}

nav a{
 display: inline-block;
margin:2px; 
padding:0.5em;
 color: #000;
 text-decoration: none;
border-bottom: 1px dotted #2e2833 ;
padding-bottom: 2px;}

nav a:hover{
 color: #933;}

article{  width: 80%;
    max-width: 516px;
    margin: 40px auto;
    margin-bottom: 20px;
height:auto;
    text-align: left;
  padding:0 1em;
background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 50%,
      #ffff 50%,
      #ffff 50%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 97%,
      #999 97%,
      #999 100%
    );
  background-size:
    8px 100%,
    100% 2em;
  line-height:2;
}

article a{
 color: #808080 ;
 letter-spacing: 3px;
 }

article a:hover{
 text-decoration: none;
 color: #e6e6fa;
 }

.dot{border-bottom: 1px dotted #000;
padding-bottom: 0px;}

textarea{
font-family: 'Waiting for the Sunrise', 手書き雑フォント,cursive;
border:0;
padding:10px;
font-size:10px;
color:#000;
border:solid 1px #ccc;
margin:0 0 20px;
width:200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);}

--></style>

表紙のHTML

infoのHTML

mainのHTML

main-本文のHTML

説明とか_

source&code_

自動改行「しない」の下りもう書かなくても良いような気がしてきた(´･ω･｀)