webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

2column layout 演習

  • 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;
}