CSSレイアウト
複雑な応用型レイアウト
business, premium（Yahoo! ビジネスセンター, Yahoo! プレミアム）
次は、business と premium の部分です。
さて、いつものように色分けをしてみましょう。
はい。この部分は、ビジネスセンターが左カラム、プレミアムが右カラムの２カラム構成になっています。また、ビジネスセンターの中も左と右に分かれており、２重の２カラム構成になっていることに注目してください。
まずは基本のHTMLから。ソースコードは次のようになります。ZIPファイル内のbusiness_premium1.htmlもご覧ください。
<h2><a href="#">ビジネスセンター</a></h2>
<ul>
<li><a href="#">ビジネス１</a></li>
<li><a href="#">ビジネス２</a></li>
</ul>
<ul>
<li><a href="#">ビジネス３</a></li>
<li><a href="#">ビジネス４</a></li>
</ul>
<h2><a href="#">プレミアム</a></h2>
<ul>
<li><a href="#">プレミアム１</a></li>
<li><a href="#">プレミアム２</a></li>
</ul>
Yahoo! ビジネスセンター、プレミアム部分の解説に使用するHTML, CSSをまとめました。ZIPで圧縮してあります。Yahoo! ビジネスセンター・プレミアム
では、CSSを適用する際に必要なタグ, id 等を追加していきましょう。(base, left-column, right-column も追加しておきましょう。)
<div id="base">
<div id="left-column">
<div id="business">
<h2><a href="#">ビジネスセンター</a></h2>
<ul class="business-left">
<li><a href="#">ビジネス１</a></li>
<li><a href="#">ビジネス２</a></li>
</ul>
<ul class="business-right">
<li><a href="#">ビジネス３</a></li>
<li><a href="#">ビジネス４</a></li>
</ul>
</div>
<div id="premium">
<h2><a href="#">プレミアム</a></h2>
<ul>
<li><a href="#">プレミアム１</a></li>
<li><a href="#">プレミアム２</a></li>
</ul>
</div>
</div>
<div id="right-column">
</div>
</div>
準備が整ったところで、CSSを書いていきます。
- business
- 幅： 238px
- premium
- 幅： 238px
- business-left
- 幅： 80px
- business-right
- 幅： 140px
ソースコードは以下のようになります。ZIPファイル内のbusiness_premium2.cssもご覧ください。
#business {
width: 238px;
float: left;
}
#premium {
width: 238px;
float: right;
}
#business .business-left {
width: 80px;
float: left;
}
#business .business-right {
width: 140px;
float: right;
}
これで、２重の２カラム構成の部分が書けました。後は、h2 等の微調整でしょうか。
追加のCSSは以下のようになります。ZIPファイル内のbusiness_premium3.cssもご覧ください。
#business h2,
#premium h2 {
font-size: 100%;
color: #000;
background: #deecfb;
border-bottom: 1px solid #b5cddb;
padding: 5px 10px;
margin-bottom: 3px;
}
#business ul,
#premium ul {
list-style: none;
line-height: 150%;
}
#business li,
#premium li {
padding-left: 6px;
margin-left: 2px;
background: url("images/dot.png") no-repeat scroll left center;
}
追加CSSでやっていることは、
- h2の調整（文字の大きさ、文字色、背景色、ボーダー ・・・）
- リストの行の高さの調整
- リストマーカーを非表示にし、代わりに背景画像でマーカーを表示
- その他微調整。。。
です。ちなみに、business_premium4.htmlはYahoo! に合わせた文字列変更を行っただけです。business_premium4.cssはbusiness_premium3.cssと全く同じものです。
