シシィが唄う月の光source

about template

今回ハンバーガーメニューに挑戦してみました。
ｃｓｓで作ったので、javascript非対応の端末でも大丈夫（なはず）です。
苦労したのはハンバーガーメニューばかりで（チェックボックスがいつまでもしつこく残りやがるのです）、あとはいつも通りのgooglefontと透過背景です。
トップページのメニューはハンバーガーメニューが動かない場合の保険みたいなものなので、不要であれば消して下さい。
メニューの数はメニューのタグにそのまま続けて＜li＞＜/li＞でどんどん追加できます。多分長めの文字の方が映えます。
背景は Submit a Patternよりお借りしました。

見出し123abc

強調123abc
＜h2＞はセンター寄せなので１セクションに１つくらいがいいと思います。

source&code

改行は「しない」で製作しています。HEADはどのページも共通です。

HEAD

<link href="https://fonts.googleapis.com/css?family=Cutive+Mono&display=swap" rel="stylesheet">
<style type="text/css">
@import 'https://fonts.googleapis.com/css?family=Meddon|Marcellus';

body {
background:url(##背景画像のURL##) ;

    font-size: 14px;
font-family: 'Markazi Text', serif;font-family:'Marcellus', メイリオ, Meiryo, sans-serif;
color:#000;   
}

h1 {
font-family:'Meddon';
  text-align: center;
  padding-top: 60px;
 color: #fff;
text-shadow: 1px 2px 3px #000000;}

h2 {
font-family:'Meddon';
  text-align: center;
 color: #000;
}

h3 {
 color: #fff;
text-shadow: 1px 2px 3px #000000;
}

h4 {
     position: relative;
     padding-left: 0.7em;
}
 
h4::after {
     position: absolute;
     top: 50%;
     left:0;
     transform:translateY(-50%);
     content: '';
     width: 5px;
     height:1em;
     background-color: #d9333f;
}

header {
  padding:10px;
  background:rgba(0,0,0,0.5);;
position: fixed;
}

a{font-family: 'Cutive Mono', monospace;
color:#c0c0c0;
text-decoration:none;
padding:3px 8px;
}

 a:hover{ color:#d9333f;}

strong{
color:#c0c0c0;
background:#252525;
font-weight:normal;
padding:0 2px;
margin:0 2px;
}

#nav-drawer {
  position: relative;
}
.check{display:none;}
/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 5px;/*線の太さ*/
  width: 30px;/*長さ*/
  border-radius: 3px;
 background:#fff;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 290px;/*最大幅（調整してください）*/
  height: 100%;
 background:rgba(0,0,0,0.5);
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

input[type="checkbox"] {
	visibility: hidden;
}

/*リスト*/
ul.menu {
	padding:0.5em;
	list-style-type:none;
}
ul.menu li {
	position:relative;
	padding: 0em 0.3em 0.3em 1.3em;
}
ul.menu li:before {
	position:absolute;
	content:'';
	top: 0.5em;
	left: 0.2em;
	height:0;
	width:0;
	border-style: solid;
	border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent #fff;
}

.cancel {
  display: inline-block;
  position: relative;
  margin: 0 0 0 250px;
  padding: 0;
  width: 5px;
  height: 30px;
  background: #fff;
  transform: rotate(45deg);
  z-index: 99
}

.cancel:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  width: 31px;
  height: 5px;
  margin-top: -3px;
  background: #fff;
}

.category {
  background:rgba(0,0,0,0.5);
  padding: 15px 0;
  font-size: 23px;
  color: #fff;
  font-weight: bold;
}

main{margin:0 auto; padding-top:50px;
max-width:540px;}

section{padding:50px 15% 70px 15%;
 text-align:justify; background:rgba(250,250,250,0.5)}

article{margin-bottom:3em; padding-bottom:3em;
border-bottom:#2c2c2c solid 1px;}

.ato{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.ato:before, .ato:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 1px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.ato:before {left: 10px;}
.ato:after {right: 10px;}
.ato p {
    margin: 0; 
    padding: 0;
}

//*-- PC版表示CSS  --*/
pc_area{
  display:block;
}
phone_area{
  display:none;
}


/*-- スマホ版表示CSS  --*/
@media screen and (max-width: 768px){
  pc_area{
    display:none;
  }
  phone_area{
    display:block;
  }
}

.button {
   background:rgba(0,0,0,0.5);
  color: #fff;
}
.button:hover {
  background:rgba(0,0,0,0.5);
}

textarea{
font-family: 'Sawarabi Mincho', sans-serif;
background:rgba(255,255,255,.3);
color:#222;
width:98%;
padding:1%;
display;block;
height:40px;
border:none;
border-radius:3px;
letter-spacing:1px;
line-height:1.5;
}
</style>

HTML-top

<header>  <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content"><div class="hamburger-top"><label class="cancel" for="nav-input"></label></div>
        <div class="category">MENU</div>
<ul class="menu">
  <li><a href="#">information</a></li>
  <li><a href="#">main contents</a></li>
  <li><a href="#">source&code</a></li>
  <li><a href="#">back to top</a></li>
<a href="#">rank</a> <a href="#">rank</a>  <a href="#">rank</a>
</ul></div>
  </div></header>
<h1>your site name</h1>
<center>:
<br> <a class="button" href="#">information</a> <a class="button" href="#">maincontents</a> <a class="button" href="#">notebook</a><br>: 
<br><a fref="#">rank</a> <a fref="#">rank</a> <a fref="#">rank</a><br>:<br>
<center>12345｜00/00</center>
</main>

HTML-information

<header> <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content"><div class="hamburger-top"><label class="cancel" for="nav-input"></label></div>
        <div class="category">MENU</div>
<ul class="menu">
  <li><a href="#info">information</a></li>
  <li><a href="#main">main contents</a></li>
  <li><a href="#bkm">bookmark</a></li>
  <li><a href="#top">back to top</a></li>
<a href="#">rank</a> <a href="#">rank</a>  <a href="#">rank</a>
</ul></div>
  </div></header>
<p id="info">
<main><section><article>
<h2>information</h2>
ここは○○で××なサイトです。関係者各位公式とは無関係のファンサイトです。などなど。<br>トップページのメニューはハンバーガーメニューが動かない場合の保険みたいなものなので、不要であれば消して下さい。<br>
メニューの数はメニューのタグにそのまま続けて＜li＞＜/li＞でどんどん追加できます。多分長めの文字の方が映えます。</br>
背景は<a href="https://www.toptal.com/designers/subtlepatterns/">
Submit a Pattern</a>よりお借りしました。
<h2>見出し123abc</h2>
<h3>見出し123abc</h3>
<h4>見出し123abc</h4>
<strong>強調123abc</strong><br></article><br>
<article><h2>about link</h2>

「サイト名」は（アン）リンクフリー。管理人はななしです。<br>
URL：https://alicex.jp/yoursiteID/<br>
<h4>bookmark</h4>
リンクフリーに甘えています。エトセトラエトセトラ。<br>
<a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><br>
</article></section><a href="#top">PAGE TOP▲</a></main>

HTML-main

<header> <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content"><div class="hamburger-top"><label class="cancel" for="nav-input"></label></div>
        <div class="category">MENU</div>
<ul class="menu">
  <li><a href="#info">information</a></li>
  <li><a href="#main">main contents</a></li>
  <li><a href="#bkm">bookmark</a></li>
  <li><a href="#top">back to top</a></li>
<a href="#">rank</a> <a href="#">rank</a>  <a href="#">rank</a>
</ul></div>
  </div></header><main><section><article>
<h2>main contents</h2>
<h4>long</h4>
<font color="#fff">落っことして、チェリー</font><br>
<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>...<br><br>
<h4>short</h4>
<a href="#">哭き息子に餞の言葉を</a><br>
<a href="#">シャー芯折ること８回目</a><br>
<a href="#">夢見るタイムスリップ</a><br>
<a href="#">白セーターに滲むコーヒー</a><br>
<a href="#">光ってはくれないのね</a><br>
<a href="#">星も見えない</a><br>
<br><a href="https://alicex.jp/oneblock/26/">小説本文</a>はこんな感じ。<br>
</article>
タイトルはすべて<a href="http://cheer.xria.biz/?guid=on">kansei</a>さまより</section><a href="#top">PAGE TOP▲</a>
</main><br>
<br>

HTML-text

<main><section><article><h2>#title#</h2>
<p id="text">#text#

<div class="ato">
    <p>あとがき</p></div></p></article></section></main>