- 2column layout
- floatするには幅が必要。
- 大きいブロックをフロートさせて、小さなブロックは成り行きにした。
- <p>はパラグラフであることを思い出した。
- 段落と段落の間は、p{ margin-bottom : 16px;}、のようにまとめて指定すると楽。
- imgの周囲にマージンをつけた。
- フロートを使うのに便利が良いように<div>の囲い方を考えた。
- divはレイアウト。classは要素。ということを思い出した。
@charset "utf-8";
/* CSS Document */html, body, h1, h2, h3, ul, li, p {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
body{
font-size: 16px;
background: #FFFFEE;
padding:10px 0 10px 0;
}
ul, li {
list-style-type: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
}
/*reset
-----------------------------------------*/
#container{
width: 643px;
background: url(img/bg-image.jpg) no-repeat 0 0 #FFFFFF;
margin: 0 auto;
overflow: hidden;
}h1{
white-space: nowrap;
text-indent: 100%;
overflow: hidden;/*隠し文字*/
}#content{
width: 460px;
float: right;
margin: 50px 16px 0 16px;/*大きい方のブロックをフロート*/
}
h2, h3 {
margin-bottom: 20px;
}
p{
font-size: 14px;
line-height: 1.8;
margin-bottom: 16px;
}
.photo{
margin: 8px;/*写真の周りに余白をつくる*/
}
h2{
text-align:center;
font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro";
font-size: 28px;
font-weight :bold;
color: #724832;
}
h3{
text-align: center;
color: #B68E55;
}
#text{
overflow: hidden:/*写真をフロートさせるため*/
}
.photo{
float: right;
}#footer{
height: 90px;
border-top: dotted 1px #666666;
text-align: center;
position: relative;
}
.img{
position: absolute;
right: 0;
bottom: 0;
}
#footer p{
color: #999999;
}
/*content
---------------------------------------------------------------------------*/#nav{
padding: 300px 0 0 16px;
}
#nav li a{
line-height: 1.6;
font-size: 14px;
text-decoration: underline;
font-weight: bold;
}