CSSレイアウト
複雑な応用型レイアウト
city, world, more（国内の都市、世界のYahoo!、もっとYahoo!）
国内の都市、世界のYahoo!、もっとYahoo!・・・この3つはほとんど構成が同じなので、まとめて説明してしまいます。
まずは、HTMLを書いていきます。それぞれのタイトルは、いつものようにh2要素を使います。city, world は ul + li + a を使いましょう。moreは、ul + li + a と dl + dt & dd を組み合わせれば書くことが出来ます。
パーツごとに色をつけると、下の図のようになります。
青いタイトル部分がh2、黄色い部分がul、ピンク色がli+a を示しています。
moreの部分は、オレンジがdl、緑がdt、白がddを示しています。（ul, li の部分の色は省略してあります。）
ソースコードは以下の通りです。ZIPファイル内のcity_world_more.htmlもご覧ください。
<h2><a href="#">シティー</a></h2>
<ul>
<li><a href="#">アイテム１</a></li>
<li><a href="#">アイテム２</a></li>
<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>
<li><a href="#">アイテム３</a></li>
<li><a href="#">アイテム４</a></li>
</ul>
<h2>もっと</h2>
<dl>
<dt>ツール：</dt>
<dd>
<ul>
<li><a href="#">アイテム１</a></li>
<li><a href="#">アイテム２</a></li>
<li><a href="#">アイテム３</a></li>
</ul>
</dd>
<dt>ビジネス：</dt>
<dd>
<ul>
<li><a href="#">アイテム１</a></li>
<li><a href="#">アイテム２</a></li>
<li><a href="#">アイテム３</a></li>
</ul>
</dd>
</dl>
国内の都市、国内の都市、もっとYahoo!の解説に使用するHTML, CSSをまとめました。ZIPで圧縮してあります。国内の都市、国内の都市、もっとYahoo!
次に、CSSを適用する際に必要になるタグやclassやidを追加します。baseも追加しておきます。
ソースコードは以下のようになります。ZIPファイル内のcity_world_ more2.htmlもご覧ください。
<div id="base">
<div id="city">
<h2><a href="#">シティー</a></h2>
<ul>
<li><a href="#">アイテム１</a></li>
<li><a href="#">アイテム２</a></li>
<li><a href="#">アイテム３</a></li>
<li><a href="#">アイテム４</a></li>
</ul>
</div>
<div id="world">
<h2><a href="#">ワールド</a></h2>
<ul>
<li><a href="#">アイテム１</a></li>
<li><a href="#">アイテム２</a></li>
<li><a href="#">アイテム３</a></li>
<li><a href="#">アイテム４</a></li>
</ul>
</div>
<div id="more">
<h2>もっと</h2>
<dl>
<dt>ツール：</dt>
<dd>
<ul>
<li><a href="#">アイテム１</a></li>
<li><a href="#">アイテム２</a></li>
<li><a href="#">アイテム３</a></li>
</ul>
</dd>
<dt>ビジネス：</dt>
<dd>
<ul>
<li><a href="#">アイテム１</a></li>
<li><a href="#">アイテム２</a></li>
<li><a href="#">アイテム３</a></li>
</ul>
</dd>
</dl>
</div>
</div>
では、CSSを書いていきましょう。
とりあえず、効果が大きそうなものからリストアップしてみます。
- h2の文字の大きさ、背景色、ボーダー、中央揃え
- liをインライン要素として表示させて横方向に並べる
ソースコードは以下のようになります。ZIPファイル内のcity_world_ more2.cssもご覧ください。
#city h2,
#world h2,
#more h2 {
font-size: 100%;
background: #efefff;
border-bottom: 1px solid #ccc;
text-align: center;
}
#city li,
#world li,
#more li {
display: inline;
}
次は、moreの部分ですね。まずは、ddの左側にdtを回り込ませて、dtとddが横に並ぶようにします。後は、dtの文字を普通の太さにしましょう。
追加のコードは、次のようになります。ZIPファイル内のcity_world_ more3.cssもご覧ください。
#more dt {
float: left;
font-weight: normal;
}
それらしくなってきました。後は、toolsのときと同じようにハイフンを表示させ、行間やスペースの調整を行えば完成でしょうか。
HTMLの方には、最後のアイテムにclass="last-item"を指定しておいてください。ソースコードはZIPファイル内city_world_ more4.htmlになります。
ソースコードは以下のようになります。
#city,
#world {
margin-bottom: 10px;
}
#city h2,
#world h2,
#more h2 {
font-size: 100%;
background: #efefff;
border-bottom: 1px solid #ccc;
text-align: center;
padding: 3px;
}
#more dt {
float: left;
font-weight: normal;
line-height: 150%;
}
#city li,
#world li,
#more li {
display: inline;
margin-right: 3px;
padding-right: 9px;
line-height: 150%;
background: url("images/hyphen.png") no-repeat right center;
}
#city .last-item,
#more .last-item {
margin: 0;
background: none;
}
#world .last-item {
padding-right: 8px;
margin-right: 0;
background: url("images/dots.png") no-repeat right bottom;
}
ここで一つ注意点があります。#more dtと#more liのline-heightは同じ値にする必要があります。
例えば、dtを150%、liを100%のようにすると、次のように表示が乱れてしまいます。
ZIPファイル内のyahoo_city_world_more5.htmlとyahoo_city_world_more5.cssが、city, world, moreの完成コードになります。変更点は、文字列をYahoo!のページにあわせた事です。
