君の果てソースコード

・蓑さん「「ユリイカ、朝を」のテンプレートで使用していたハンバーガーメニューを使用した小説ページ。色合いは濃い青か濃い緑を使用した、物静かなで温かみのある雰囲気で画像は無し。」

自動改行“しない”で作成しています。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。
ハンバーガーメニューとjQueryを使用しています。環境によっては非対応のものもあるかもしれませんので、その点はご了承ください。

HEAD

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

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

body{
font-family:"Glegoo","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#373f27;
background:#e9e7da;
margin:0;
padding:0;}

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

.con{
max-width:300px;
margin:20px auto;}

.act{padding:15px 35px 30px;}

.text{
border:solid 2px #636B46;
box-shadow:0 0 0 5px rgba(255,255,255,.9);}
}

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

.con{margin:20px;}

.act{padding:15px 15px 30px;}

}

.btn{
position:fixed;
width:30px;
height:30px;
cursor:pointer;
display:block;
float:left;
z-index:10;
right:15px;
}

.btn::before{
border-radius:5px;
-webkit-box-shadow:#373f27 0 14px 0;
box-shadow:#373f27 0 14px 0;
}

.btn::after{bottom:0;}

.btn::before,.btn::after{
width:30px;
height:3px;
border-radius:5px;
background:#373f27;
display:block;
content:'';
position:absolute;
-webkit-transition:-webkit-box-shadow 0.2s linear,-webkit-transform 0.2s 0.2s;
transition:box-shadow 0.2s linear,transform 0.2s 0.2s;}
 
.menu{
border-left:solid 2px #373f27;
width:50%;
height:100%;
background:rgba(99,107,70,.9);
position:fixed;
right:-51%;
top:0;
-webkit-transition:right 0.4s;
transition:right 0.4s;}
 
.icn:checked{
-webkit-transform:none;
-ms-transform:none;
transform:none;
}

.icn:checked~.btn::before{
-webkit-box-shadow:transparent 0 0 0;
box-shadow:transparent 0 0 0;
-webkit-transform:rotate(45deg) translate3d(3px,16px,0);
transform:rotate(45deg) translate3d(3px,16px,0);
}

.icn:checked~.btn::after{
-webkit-transform:rotate(-45deg) translate3d(3px,-16px,0);
transform:rotate(-45deg) translate3d(3px,-16px,0);
}

.icn:checked~.menu{right:0;}
 
.list{
list-style-type:none;
margin:120px auto 0;
padding:0;
max-width:200px;
}

.list li a{
text-align:center;
color:#e9e7da;
display:block;
overflow:hidden;
padding:5px 0;
z-index:5;
margin:20px auto;
font-size:13px;
background:none;
border-bottom:solid 1px #ebd842;}

.list li a:hover{
opacity:1;
color:#ebd842;}

.con{
background:rgba(204,204,153,.3);
border:solid 2px #cccc99;
padding:15px;}

.act{
line-height:200%;
margin:30px 25px;
border:solid 1px #ebd842;
background:#636B46;
box-shadow:0 0 0 3px #636B46;}

.text{
font-size:13px;
line-height:200%;
margin:20px 5px;
padding:15px;
background:rgba(255,255,255,.9);}

.text p{
font-size:10px;
letter-spacing:1px;
line-height:150%;
color:#636B46;
background:rgba(204,204,153,.3);
border:solid 2px #cccc99;
margin:20px;
padding:10px;}

header{
text-align:center;
margin:10px 10px 30px;}

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

hr{
width:50px;
border:none;
border-top:double 3px #373f27;
margin:20px auto;}

h1{
font-size:18px;
font-family:"Glegoo","はれのそら明朝", sans-serif;
font-weight:normal;
margin:20px;
padding:50px 30px 10px;
border-bottom:solid 1px #373f27;
text-align:center;
display:inline-block;
}

h2{
color:#636B46;
font-family:"Glegoo","はれのそら明朝", sans-serif;
font-weight:normal;
font-size:13px;
margin:0;
padding:0 0 10px 25px;
position:relative;}

h2:after {
position:absolute;
top:3px;
left:3px;
z-index:2;
content:'';
width:10px;
height:10px;
background:#636B46;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);}

h3{
font-family:"Glegoo","はれのそら明朝", sans-serif;
color:#e9e7da;
font-size:14px;
font-weight:normal;
margin:0 auto 30px;
padding:5px;
text-align:center;
width:80%;
border-bottom:double 3px #ebd842;}

a{
color:#373f27;
background:rgba(255,255,255,.8);
text-decoration:none;
padding:0 5px;
margin:3px;
transition:0.5s;}

a:hover{opacity:.5;}

input[type=checkbox]{display:none;}

input[type],textarea{
height:50px;
width:80%;
font-family:"Varela Round","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:rgba(255,255,255,.5);
color:#373f27;
border:solid 1px #373f27;
margin:5px 10px;
padding:2px 5px;
-webkit-appearance: none;
box-shadow:none;}

input[type=text]{
margin:5px;
height:24px;
width:70px;}

input[type=submit]{
margin:5px;
height:auto;
width:50px;
cursor:pointer;
text-shadow:none;
border:solid 1px #373f27;
background:#373f27;
color:#fff;
font-weight:normal;
}
</style>

表紙

<input id="menu" type="checkbox" class="icn">
<label for="menu" class="btn"></label>
<nav class="menu">
<ul class="list">
<li><a href="#">トップ</a></li>
<li><a href="#act1">きみの果て</a></li>
<li><a href="#act2">静寂の行進曲</a></li>
<li><a href="#act3">醜い銃口</a></li>
<li><a href="#act4">宙に浮いた心臓</a></li>
<li><a href="#act5">マネキンは恋をしない</a></li>
</ul>
</nav>
<header>
<h1>きみの果て</h1><br>
<form action="/サイトID/novel/機能番号/dream" method="post"><input type="hidden" name="id" value="サイトID" /><input type="hidden" name="fp" value="4" /><input type="text" name="DreamID[1]" value="#名前変換タグ1#" /> <input type="text" name="DreamID[2]" value="#名前変換タグ2#" /> <input type="submit" name="dream_name_set" value="OK" />
</header>
<div class="wrp">
<div class="con">
<h2>attention</h2>
ここにあらすじや注意書きなどをどうぞ。<br>
</div>
<br>
<div id="act1"><div class="act">
<h3>きみの果て</h3>
<a href="#">タイトル</a>
<a href="#">タイトル</a>
<a href="#">なくしてしまったレコード</a>
<a href="#">金平糖と雨</a>
<a href="#">君って悪い子</a>
<a href="#">湖の中の絵</a>
</div></div>
<hr>
<div id="act2"><div class="act">
<h3>静寂の行進曲</h3>
<a href="#">01</a>
<a href="#">02</a>
<a href="#">03</a>
<a href="#">04</a>
<a href="#">05</a>
</div></div>
<hr>
<div id="act3"><div class="act">
<h3>醜い銃口</h3>
<a href="#">01</a>
<a href="#">02</a>
<a href="#">03</a>
<a href="#">04</a>
<a href="#">05</a>
</div></div>
<hr>
<div id="act4"><div class="act">
<h3>宙に浮いた心臓</h3>
<a href="#">01</a>
<a href="#">02</a>
<a href="#">03</a>
<a href="#">04</a>
<a href="#">05</a>
</div></div>
<hr>
<div id="act5"><div class="act">
<h3>マネキンは恋をしない</h3>
<a href="#">01</a>
<a href="#">02</a>
<a href="#">03</a>
<a href="#">04</a>
<a href="#">05</a>
</div></div>
</div>

文章