Beautiful worldソースコード

・坂野さん「V6の楽曲『Beautiful World』をイメージした、優しくほっとするような雰囲気の小説ページ。色味は白orパステルの虹色で、画像の有無はお任せ。」

自動改行“しない”で作成しています。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。
ご覧になるデバイスの幅によって見え方が若干異なります。

HEAD

@import url('https://fonts.googleapis.com/css?family=Karla|Sacramento');

@font-face
{
font-family: はれのそら明朝;
src: url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2')
     format("woff2");
}

body{
font-family:"Karla","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#555;
background:#fff;
margin:0;
padding:0;
text-align:center;
counter-reset: number 0;}

@media screen and (min-width: 601px){
.wrp{
width:600px;
margin:0 auto;}

.wrp2{
display:flex;
flex-direction:row;
flex-wrap:wrap;}

.act{
position:relative;
width:250px;
display:inline-block;
margin:30px auto 20px;}
}

@media screen and (max-width: 600px){
.wrp{
width:100%;
margin:0 auto;}

.act{margin:50px 30px 20px;}
}

.act{color:#aaa;}

.wrp p{
text-align:left;
margin:0 20px;}

.name{
margin:50px 30px 20px;
padding:15px;}

.text{
background:#fff;
line-height:200%;
font-size:13px;
padding:15px;
border-radius:10px;
margin:50px 10px 20px;
text-align:left;}

.text p{
line-height:150%;
color:#aaa;
border:solid 1px #d4dcda;
margin:10px;
padding:10px;
font-size:10px;}

.line{
margin:30px 0;
padding:5px 0;
border-radius:10px;
background:-prefix-linear-gradient(left,#ff9393,#ce9eff,#add6ff,#d1ffa3,#ffffa3,#ffce9e);
background:linear-gradient(to right,#ff9393,#ce9eff,#add6ff,#d1ffa3,#ffffa3,#ffce9e);
opacity:.5;}

.title{
width:100px;
height:2px;
border-radius:10px;
background:-prefix-linear-gradient(left,#ff9393,#ce9eff,#add6ff,#d1ffa3,#ffffa3,#ffce9e);
background:linear-gradient(to right,#ff9393,#ce9eff,#add6ff,#d1ffa3,#ffffa3,#ffce9e);
opacity:.5;
margin:10px auto;}

header{margin:30px 20px;}

header a{
display:inline-block;
width:100px;
border-bottom:1px solid #d4dcda;}

.ft{
margin-top:20px;
text-align:center;}

h1{
font-family:Sacramento,はれのそら明朝,sans-serif;
line-height:100%;
font-size:40px;
color:#d4dcda;
margin:50px 0 20px;
padding:0;
font-weight:normal;}

h2{
line-height:150%;
font-family:Sacramento,はれのそら明朝,sans-serif;
font-weight:normal;
font-size:15px;
color:#aaa;
margin:10px auto;
padding:0;}

h3{
color:#d4dcda;
font-family:Sacramento,はれのそら明朝,sans-serif;
font-size:20px;
margin:0 auto;
padding:0;
text-align:center;}

h3::before{
counter-increment:number 1;
content:counter(number) " ";}

a{
color:#555;
text-decoration:none;
padding:0 3px;}

a:hover{color:#d4dcda;}

input[type],textarea{
height:50px;
width:80%;
font-family:"Karla","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#fff;
color:#555;
border:solid 1px #d4dcda;
margin:5px 10px;
padding:2px 5px;}

input[type=text]{
margin:5px;
height:24px;
width:80px;
border:none;
border-bottom:solid 1px #d4dcda;}

input[type=submit]{
margin:5px;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #d4dcda;
background:#d4dcda;
color:#555;
font-weight:normal;}

</style>

表紙

<header>
<h1>Beautiful world</h1>
<a href="#名前変換url#">name change</a>・<a href="#">attention</a>
</header>
<div class="line"></div>
<div class="wrp">
<p>※は注意などの注意書きやあらすじなどを書けます。<br>
お好きに使用してください。</p>
<div class="wrp2">
<div class="act">
<h3></h3>
<div class="title"></div>
<h2>Beautiful world</h2>
<a href="#">タイトル</a><br>
<a href="#">昨日の色</a><br>
<a href="#">澄み渡る晴れ間と君の指先</a><br>
<a href="#">だれかの忘れもの</a><br>
<a href="#">神様の通り道</a><br>
</div>

<div class="act">
<h3></h3>
<div class="title"></div>
<h2>100円のビー玉みたい</h2>
<a href="#">01</a>・<a href="#">02</a>・<a href="#">03</a>・<a href="#">04</a>・<a href="#">05</a>・<a href="#">06</a>・<a href="#">07</a>・<a href="#">08</a>・<a href="#">09</a>・<a href="#">10</a>
</div>

<div class="act">
<h3></h3>
<div class="title"></div>
<h2>傘の中の青空</h2>
<a href="#">四季彩</a>・<a href="#">曇天の明日</a>・<a href="#">夜空に浮かぶ月と虹</a>・<a href="#">傘に穴</a>・<a href="#">明後日は晴れ</a><br>
</div>

<div class="act">
<h3></h3>
<div class="title"></div>
<h2>そこに未来はない</h2>
<a href="#">タイトル</a>
</div>
</div></div>

文章

名前変換