第6回 コーディングの基礎 「バナーと本文のかんたんな装飾」
- 2008年10月26日
- WEB
バナー部分に着手していきます。今回のバナーはロールオーバーしないものとしていますので、リストに画像を挿入します。
<ul id=”banner”>
<li><a href=”#”><img src=”images/banner_ff.jpg” alt=”FireFox” width=”127″ height=”127″ /></a></li>
<li><a href=”#”><img src=”images/banner_op.jpg” alt=”Opera” width=”125″ height=”125″ /></a></li>
</ul>
<li><a href=”#”><img src=”images/banner_ff.jpg” alt=”FireFox” width=”127″ height=”127″ /></a></li>
<li><a href=”#”><img src=”images/banner_op.jpg” alt=”Opera” width=”125″ height=”125″ /></a></li>
</ul>
#glovalnavi ,
#banner {
margin: 15px;
}
#banner {
margin: 15px;
}
グローバルメニューと同様のmarginをもたせておきます。
サンプルページ
#banner li {
margin-bottom: 15px;
}
margin-bottom: 15px;
}
バナー同士にもmarginをもたせます。
サンプルページ
これでサイドバーの完成です。次は本文です。
contentの内側にスペースがあります。見出し2は、左側にラインがありますが、こんな複雑なラインはCSSだけではつけられないので、画像を作ってy方向にリピートさせましょう。文字の位置は、他の文章とは並んでいるけれど、画像だけは左にはみ出ている。見出し2の作り方が肝のようです。
#content_inner {
padding: 15px 25px; //上下15px 左右25px
}
h2 {
background: url(../images/bg_h2.gif) repeat-y left;
font-size: 150%;
margin-left: -10px;
padding-left: 10px;
}
padding: 15px 25px; //上下15px 左右25px
}
h2 {
background: url(../images/bg_h2.gif) repeat-y left;
font-size: 150%;
margin-left: -10px;
padding-left: 10px;
}
y方向にリピートさせた画像を左側に置く、文字サイズは150%。
左にネガティブマージン（marginにマイナスの値を指定すること）10pxすると、他の要素よりも10px左側にはみ出すが、padding10pxすることで、h2の中身だけが10px右に押されることになるので、他の要素と頭が揃うが、見出しの画像だけがはみ出すことになる。
サンプルページ
h2 {
background: url(../images/bg_h2.gif) repeat-y;
font-size: 150%;
margin-left: -10px;
margin-bottom: 15px;
padding-left: 10px;
}
h3 {
font-size: 120%;
margin: 15px 0;
text-decoration: underline;
}
p {
line-height: 2;
margin-bottom:1em;
}
#content_inner{
padding: 15px 25px 45px; //下だけもう少しpaddingをもたせる
}
background: url(../images/bg_h2.gif) repeat-y;
font-size: 150%;
margin-left: -10px;
margin-bottom: 15px;
padding-left: 10px;
}
h3 {
font-size: 120%;
margin: 15px 0;
text-decoration: underline;
}
p {
line-height: 2;
margin-bottom:1em;
}
#content_inner{
padding: 15px 25px 45px; //下だけもう少しpaddingをもたせる
}
見出し2、見出し3、段落の下にmarginがあり、段落は読みやすくするために行間を調整します。
サンプルページ
次回は10月29日(水)に、第7回 コーディングの基礎 「ハックしないCSSで読みやすさ、崩れにくさを追求せよ」をお届けします。
