madam | ナノ

背景の素材はno image様からお借りしました。
背景をもっとシンプルな柄(ストライプとかドット)にするとまた印象が変わると思うので、好きなようにいじってみてください。

メニューの数(今は5つ)を増やしたり減らしたりする場合は、HEAD内の.menu li{width:20%;・・・}の20%を調節して○○%×□=100%になるようにしてください。
5つなので20%×5=100%となります。
例えば4つなら25%×4=100%となります。

HEAD(css)

body{
margin:0 15px 15px 15px;
padding:0 15px 15px 15px;
line-height:2;
letter-spacing:2px;
font-family:nova-slim,メイリオ;
font-size:12px;
background:url(#画像URL#),#F9F4EF;
background-size:300px;
color:#444;
}

.all{
max-width:600px;
height:auto;
text-align:center;
background:rgba(249,244,239,0.95);
border-radius:0 0 10px 10px;
padding:10px 0;
margin:0 auto;
}

.title{
font-family:monoton;
font-size:50px;
text-align:center;
color:#003F38;
line-height:1;
}

p{
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:baseline;
}

.menu{
padding:0;
margin-top:10px;
text-align:center;
}

.menu li{
width:20%;
float:left;
display:inline;
}

.menu li a{
padding:3px 0;
background:#003F38;
color:#F9F4EF;
font-size:13px;
display:block;
}

.menu li a:hover{
position:static;
background:#ddd;
color:#003F38;
}

.text{
text-align:left;
margin-top:50px;
padding:15px 15px 8px 15px;
}

h1{
font-size:15px;
color:#003F38;
line-height:0;
}

.ma{
background:#fff;
padding:1px 3px;
}

a{
text-decoration:none;
color:#003F38;
background:#F9F4EF;
}

a:hover{
position:relative;
top:1px;
left:1px;
}

a:visited{
color:#000;
}

textarea{
width:200px;
height:50px;
font-family:nova-slim,メイリオ;
background:#003F38;
color:#F9F4EF;
padding:10px;
border:none;
border-radius:3px;
scrollbar-arrow-color:#000;
scrollbar-track-color:#003F38;
}

</style>

BODY(html)

▼master

▼new article

▼rank