灰のなか夜のいろ

info　real　main　page

title by エナメル
icon by Font-Awesome
font by Leafscape

トップ素材（1000 × 630）はパブリックドメインを加工したものなので、こちらのページから保存してください。

head

<link href="http://fonts.googleapis.com/css?family=Droid Serif" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style type="text/css">
@font-face{
 font-family:"IPAex明朝";
 src: url('https://cdn.leafscape.be/IPAexfont/ipaexm_web.woff')
  format("woff");
}
*{
 margin:0;
 padding:0;
}
body{
 color:#555;
 background:#4d4c61;
 font-size:11px;
 font-family:"Droid Serif", "游明朝", "メイリオ";
 letter-spacing:1px;
}
a{
 color:#555;
 text-decoration:none;
}
a:hover{
 color:#a89dac;
}
h1, h2, h3{
 font-weigh:normal;
 font-family:"Droid Serif", "IPAex明朝";
}
h1{
 font-size:14px;
 color:#333;
 width:1em;
 margin:30px auto 40px;
 text-align:center;
}
h2{
 font-size:12px;
 margin:0 0 20px;
 border-bottom:solid 1px #ccc;
}
h3{
 font-size:13px;
 letter-spacing:2px;
 margin:0 0 30px;
 text-align:center;
}
main, article{
 box-sizing:border-box;
 padding:40px 30px;
 background:#fff;
 text-align:justify;
}
main{
 overflow-y:auto;
 width:280px;
 height:370px;
 margin:40px auto 0;
 line-height:190%;
}
.top{
 background:#fff url(画像URL) no-repeat 50% 40%;
 background-size:250px auto;
 text-align:center;
}
article{
 width:300px;
 margin:40px auto;
 line-height:200%;
}
nav{
 margin:15px 0;
 font-size:18px;
 text-align:center;
}
nav a{
 display:inline-block;
 margin:0 20px;
 color:#fff;;
}
nav .san:before{
 content:"";
 display:block;
 width:0;
 height:0;
 margin:-15px 0 0;
 border:solid 15px transparent;
 border-top:solid 15px #fff;
}
ul{
 list-style-type:none;
 margin:-20px 0 30px;
}
li{
 padding:20px 0;
 border-bottom:solid 1px #ccc;
 font-size:10px;
}
li a{
 display:block;
 margin:0 0 5px;
 font-weigh:bold;
 font-size:11px;
}
footer{
 margin:30px 0 0;
 text-align:center;
}
aside a{
 border-bottom:solid 1px #a89dac;
}
p{
 margin:40px 0 0;
 padding:30px 0 0;
 border-top:solid 1px #ccc;
}
span{
 display:block;
 margin:0 0 40px;
 text-align:right;
}
span a{
 display:inline-block;
 padding:2px 1em;
 background:#a89dac;
 color:#fff;
}
textarea, input, select{
 border:solid 1px #ccc;
 background:#fff;
 padding:5px;
 font-size:11px;
 font-family:"Droid Serif", "游明朝", "メイリオ";
 letter-spacing:1px;
}
br{letter-spacing:0;}
@media screen and (min-width:900px) {
body{
 font-size:15px;
 letter-spacing:2px;
}
h1{
 font-size:20px;
 margin:0 auto 40px;
}
h2{
 font-size:16px;
}
h3{
 font-size:18px;
 letter-spacing:5px;
 margin:0 0 60px;
}
main, article{
 width:900px;
 line-height:200%;
}
main{
 height:480px;
 margin:100px auto 0;
 padding:80px;
}
.top{
 background-size:400px auto;
}
article{
 margin:100px auto;
 padding:80px 100px;
}
nav{
 margin:40px 0;
 font-size:30px;
}
nav a{
 margin:0 50px;
}
nav .san:before{
 margin:-40px 0 0;
 border:solid 30px transparent;
 border-top:solid 30px #fff;
}
ul{
 margin:-20px -20px 50px;
}
li{
 display:inline-block;
 width:340px;
 margin:0 20px;
 font-size:14px;
}
li a{
 font-size:16px;
}
footer{
 margin:80px 0 0;
}
aside{
 column-count:2;
 column-gap:40px;
}
p{
 margin:80px 0 0;
 padding:60px 0 0;
}
textarea, input, select{
 padding:10px;
 font-size:15px;
 letter-spacing:2px;
}
}
</style>

body - top

body - info

body - real

body - main

body - page