夜明けの橋ソースコード

・雪さん「白か薄い色の1P完結型トップページ。画像の有無はおまかせ。」

自動改行“しない”で作成しています。
メニューリンクを押すとするっと動きます。配色の変更などはしやすいと思うのでお好きにどうぞ。
フォームは拍手機能で実装していますのでご注意ください。
わざとタグミスしています。
HEAD

@import url('https://fonts.googleapis.com/css?family=Dosis|Grand+Hotel');

@font-face
{
font-family:"源ノ角ゴシック ExtraLight" ;
src: url('https://cdn.leafscape.be/SourceHanSansJP/SourceHanSansJP-ExtraLight_web.woff')
     format("woff");
}

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

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

.log{
padding:50px 0 0;
margin:0;}

.width{display:flex;}

.left{
display:inline-block;
width:50%;
margin:0 auto;}

.right{
display:inline-block;
width:45%;
margin:0 auto;}

h1{
float:left;
margin:0 20px 10px 0;}
}

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

.log{
padding:20px 0 10px;
margin:0 30px;}

.left{margin:30px 0;}

.right{margin:30px 0 10px;}

h1{
margin:0 auto 10px;}
}

#top{
margin:20px;}

#info,#bkm{
margin:10px 20px;
padding:15px;
background:#f5f5f5;}

#con{
margin:30px 20px;}

#con a{
background:#f5f5f5;
padding:0 3px;
margin:0 5px;}

#con a:hover{
background:#fff;}

.menu{
margin:30px 0 0;
text-align:center;
font-size:15px;}

.menu a{padding:0 5px;}

.menu a:hover{
background: -moz-linear-gradient(left top, #fff, #fff 25%, #f5f5f5 25%, #f5f5f5 50%,#fff 50%, #fff 75%, #f5f5f5 75%,#f5f5f5);
background: -webkit-linear-gradient(left top, #fff, #fff 25%, #f5f5f5 25%, #f5f5f5 50%,#fff 50%, #fff 75%, #f5f5f5 75%,#f5f5f5);
background: linear-gradient(left top, #fff, #fff 25%, #f5f5f5 25%, #f5f5f5 50%,#fff 50%, #fff 75%, #f5f5f5 75%,#f5f5f5);
-moz-background-size: 5px 5px;
-webkit-background-size: 5px 5px;
background-size: 5px 5px;}

.log a{
background:#333;
color:#fff;
margin:0 5px;
padding:1px 5px;
border:solid 1px #333;}

.log a:hover{
background:#fff;
color:#333;}

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

.box{
font-size:11px;
border:solid 2px #e6eae3;
margin:5px 5px 10px;
padding:5px;}

.back{
margin:5px;
text-align:right;}

hr{
border:none;
height:3px;
background: -moz-linear-gradient(left top, #e6eae3, #e6eae3 25%, #f5f5f5 25%, #f5f5f5 50%,#e6eae3 50%, #e6eae3 75%, #f5f5f5 75%,#f5f5f5);
background: -webkit-linear-gradient(left top, #e6eae3, #e6eae3 25%, #f5f5f5 25%, #f5f5f5 50%,#e6eae3 50%, #e6eae3 75%, #f5f5f5 75%,#f5f5f5);
background: linear-gradient(left top, #e6eae3, #e6eae3 25%, #f5f5f5 25%, #f5f5f5 50%,#e6eae3 50%, #e6eae3 75%, #f5f5f5 75%,#f5f5f5);
-moz-background-size: 5px 5px;
-webkit-background-size: 5px 5px;
background-size: 5px 5px;
margin:10px 0;}

header{
background:#e6eae3;
height:10px;
margin:0;
padding:0;}

footer{
background:#e6eae3;
margin:0;
padding:10px;}

strong{
background: -moz-linear-gradient(left top, #fff, #fff 25%, #f5f5f5 25%, #f5f5f5 50%,#fff 50%, #fff 75%, #f5f5f5 75%,#f5f5f5);
background: -webkit-linear-gradient(left top, #fff, #fff 25%, #f5f5f5 25%, #f5f5f5 50%,#fff 50%, #fff 75%, #f5f5f5 75%,#f5f5f5);
background: linear-gradient(left top, #fff, #fff 25%, #f5f5f5 25%, #f5f5f5 50%,#fff 50%, #fff 75%, #f5f5f5 75%,#f5f5f5);
-moz-background-size: 5px 5px;
-webkit-background-size: 5px 5px;
background-size: 5px 5px;
margin:0 3px;
padding:0 5px;}

h1{
font-family:"Dosis",源ノ角ゴシック ExtraLight,sans-serif;
font-weight:normal;
font-size:24px;
padding:10px;
line-height:100%;
text-align:center;
border:double 5px #333;
height:75px;
width:75px;
text-transform:uppercase;}

h2{
font-family:"Dosis",源ノ角ゴシック ExtraLight,sans-serif;
font-size:18px;
margin:5px auto 10px;
padding:3px;
border-bottom:dashed 1px #fff;
line-height:100%;
text-transform:uppercase;}

h3{
font-family:"Dosis",源ノ角ゴシック ExtraLight,sans-serif;
font-size:18px;
margin:5px auto 10px;
padding:3px;
border-bottom:dashed 1px #e6eae3;
line-height:100%;
text-transform:uppercase;}

h4{
font-family:"Dosis",源ノ角ゴシック ExtraLight,sans-serif;
font-size:13px;
margin:0 10px 0 0;
padding:3px 10px;
border:double  3px #333;
line-height:100%;
display:inline-block;
text-transform:uppercase;}

a{
color:#333;
background:#fff;
text-decoration:none;
padding:0 3px;
margin:5px;
transition:0.5s;
}

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

input[type],textarea{
height:50px;
width:80%;
font-family:"Dosis","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#fff;
color:#333;
border:solid 1px #fff;
margin:10px 0;
padding:2px 5px;
border-radius:0;
-webkit-appearance: none;
box-shadow:none;
}

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

input[type=submit]{
margin:0;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #333;
background:#333;
color:#fff;
}

textarea::-webkit-scrollbar{
overflow:hidden;
width:5px;
background:#fff;
-webkit-border-radius:3px;
border-radius:3px;}

textarea::-webkit-scrollbar:horizontal{height:5px;}

textarea::-webkit-scrollbar-button{display:none;}

textarea::-webkit-scrollbar-piece{background:#fff;}

textarea::-webkit-scrollbar-piece:start{background:#fff;}

textarea::-webkit-scrollbar-thumb{
overflow:hidden;
-webkit-border-radius:3px;
border-radius:3px;
background:#333;}

textarea::-webkit-scrollbar-corner{overflow:hidden;}

</style>

BODY

<header></header>
<div class="wrp">
<div class="menu">
<a href="#info">information</a> <a href="#con">contents</a> <a href="#bkm">bookmark</a>
</div>
<div id="top">
<h1>yoake<br>
no<br>
hashi</h1>
<div class="log">
UP DATE<br>
2017/3/12 ○○○○○更新<br>
2017/3/12 ○○○○○更新<a href="#">LOG</a><br>
</div>
</div>
<div id="info">
<h2>information</h2>
ここはサイトの趣旨や注意事項などご自由に使用してください。<strong>強調線</strong>が引かれます。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。
<hr>
夜明けの橋 >> http//alicex.jp/xxxxx/<br>
浅野 山井 >> <a href="#">memo</a>&<a href="#">res</a><br>
<form action="/サイトID/clap/機能数字/" method="POST" ><input type="hidden" name="id" value="サイトID" /><input type="hidden" name="fp" value="6" /><input type="hidden" name="CSID" value="" />
<textarea name="message" id="">なにかあればこちらからどうぞ</textarea><br>
<input type="submit" value="send" /><br>
</form>
<div class="back">[ <a href="#top">back to top</a> ]</div>
</div>

<div id="con">
<h3>contents</h3>
<div class="width">
<div class="left">
<h4>long story</h4><br>
<br>
<a href="#">愛とかばらばら</a>
<div class="box">
たとえ半分になっちゃっても粉々になっちゃってもきっとここにあるんだよ
</div>
<a href="#">ゆらゆら泣いてる</a>
<div class="box">
説明文やあらすじ・傾向などお好きにご使用ください。
</div>
</div>
<div class="right">
<h4>short story</h4><a href="#">NAME CHANGE</a> *は閲覧注意<br>
<br>
NAME <a href="#">黒髪が潮に乗る</a><br>
NAME <a href="#">箱の中身を知っている</a>*<br>
NAME <a href="#">笑いがとまらない！</a><br>
NAME <a href="#">きっと星がきれいだろうね</a><br>
NAME <a href="#">世界が君と敵対することはない</a><br>
</div>
</div>
<div class="back">[ <a href="#top">back to top</a> ]</div>
</div>

<div id="bkm">
<h2>bookmark</h2>
<a href="#">サイト名</a> <a href="#">さいとめい</a> <a href="#">site mame</a> <a href="#">サイト名</a> <a href="#">さいとめい</a> <a href="#">site mame</a> / Respect<br>
<a href="#">サイト名</a> <a href="#">さいとめい</a> <a href="#">site mame</a> / Thanks<br>
<div class="back">[ <a href="#top">back to top</a> ]</div>
</div>
<div class="ft">
Thank you for 123456 counts.
</div>
</div>
<footer>