白い死神は泣かない

source & code

長いメニュー名でも崩れないデザインをめざしてシンプルに作ってみました。スマホでもPCでもほぼ変わらないデザインです。

背景画像はパブリックドメインのものを加工していますのでこちらからお持ち帰りください。(縮小してあります)

自動改行は「しない」で製作しています。

HEAD

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans);
*{margin:0; padding:0;}

body{
background-color:#000000;
background-image: url(##背景画像のURL##);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color : #ffffff;
  font-size:12px;
 letter-spacing:2.4px;
 line-height:2;
font-family:'Alegreya Sans',"Hannari","Sawarabi Mincho",Meiryo,Osaka,"MS ゴシック", sans-serif;
text-align:center;
}

.TextLeft{
    text-align:left;
}

.wrp {
    max-width: 500px;
    margin: 50px auto 10px;
}

.wrp a {
    padding: 0 3px;
}

.top {
    margin: 0 20px;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu ul::after {
  content: "";
  display: block;
  clear: both;
}
.menu ul li {
  float: left;
  width: 20%;
  box-sizing: border-box;
}
.menu ul li a {
  display: block;
  padding: .4em .8em;
  text-decoration: none;
  color: #333;
  background: rgb(255, 255, 255);
  text-align: center;
}
.menu ul li a:hover {
color: #fff;
  background: rgb(0, 0, 0,1);
}

p { font-size: 12px;
text-shadow: 1px 2px 3px #000000;  position: relative;
}

a{color:#c0c0c0;
text-decoration:none;}
a:hover{text-decoration:line-through;}
a {cursor: crosshair;}

h1 {
 font-family: "游明朝";
font-size:25px;
text-shadow: 1px 2px 3px #000000;  position: relative;
}

h2 {
font-size:15px  ;
border-bottom: solid 1px #ffffff;
}

h3 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

h3:before, h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: #ffffff;
}

h3:before {
  left:0;
}
h3:after {
  right: 0;
}


strong{
	background: linear-gradient(transparent 60%, #808080 60%);
}

textarea {
    height: 50px;
    width: 50%;
    font-size: 12px;
    font-family: 'Antic Slab', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    line-height: 180%;
    letter-spacing: 2px;
    color: #333;
    background: rgba(255,255,255,.5);
    border: solid 1px rgba(255,255,255,.5);
        -webkit-appearance: none;
    border-radius: 0;
    box-shadow: none;
    margin: 3px 0;
    padding: 3px;
}

.text{
background:rgba(0,0,0,.5);
margin:80px 20px 20px;
padding:15px;}

.btn {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #ffffff;
  border: solid 2px #ffffff;
  border-radius: 3px;
  transition: .4s;
}

.btn:hover {
  background: #000000;
  color: white;
}
</style>

HTML（TOP）

HTML（main）

<div class="wrp"><div class="top"> <div class="TextLeft">
<h1>サイトタイトルsitetitle</h1>
<nav class="menu">
  <ul>
    <li><a href="#">info</a></li>
    <li><a href="#">main</a></li>
    <li><a href="#">memo</a></li>
    <li><a href="#">source</a></li>
    <li><a href="#">bkm</a></li>
  </ul>
</nav>
<h2>long</h2>
<p><a href="#">タイトル01</a> <a href="#">02</a> <a href="#">03</a> <a href="#">04</a> <a href="#">05</a>...</p>
<p>○○が××する話。(連載中)</p>
<h2>short</h2>
<p><a href="#">タイトルAAA</a>（田中）</p>
<p><a href="#">タイトルBBB</a>（佐藤）</p>
<p><a href="#">タイトルCCC</a>（鈴木）</p>

<h2>other</h2>
<p>これは長文テストです。いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえへあさきゆめみしゑひもせすん</p>
</div></div></div>