CSSレイアウト
複雑な応用型レイアウト
services（Yahoo! サービス）
Yahoo! のサービス一覧です。
Yahoo! サービスの解説に使用するHTML, CSSをまとめました。ZIPで圧縮してあります。Yahoo! サービス
サービス一覧ですから、HTMLにはリスト要素を使用します。リスト要素・・・と言っても、いくつかありました。
ol の番号付きリスト、ul の箇条書きリスト、dl の定義リスト ・・・ 今回の場合は、ul と dlの両方を使用してサービス一覧を作成します。
要素の具体的な使用箇所は、下の図を参考に。
基本的なHTMLは以下のようになります。ZIPファイル内のservices1.htmlもご覧ください。
<dl>
<dt>カテゴリ1</dt>
<dd>
<ul>
<li><a href="#">サービス1</a></li>
<li><a href="#">サービス2</a></li>
<li><a href="#">サービス3</a></li>
<li><a href="#">サービス4</a></li>
<li><a href="#">サービス5</a></li>
</ul>
</dd>
<dt>カテゴリ2</dt>
<dd>
<ul>
<li><a href="#">サービス1</a></li>
<li><a href="#">サービス2</a></li>
<li><a href="#">サービス3</a></li>
</ul>
</dd>
<dt>カテゴリ3</dt>
<dd>
<ul>
<li><a href="#">サービス1</a></li>
<li><a href="#">サービス2</a></li>
<li><a href="#">サービス3</a></li>
<li><a href="#">サービス4</a></li>
</ul>
</dd>
</dl>
次は、CSSを適用する際に必要なタグ, id 等を追加します。searchと同じようにbase, left-column, right-column を追加しておきましょう。
ソースコードは以下のようになります。ZIPファイル内のservices2.htmlもご覧ください。
<div id="base">
<div id="left-column">
<dl id="services">
<dt>カテゴリ1</dt>
<dd>
<ul>
<li><a href="#">サービス1</a></li>
<li><a href="#">サービス2</a></li>
<li><a href="#">サービス3</a></li>
<li><a href="#">サービス4</a></li>
<li><a href="#">サービス5</a></li>
</ul>
</dd>
<dt>カテゴリ2</dt>
<dd>
<ul>
<li><a href="#">サービス1</a></li>
<li><a href="#">サービス2</a></li>
<li><a href="#">サービス3</a></li>
</ul>
</dd>
<dt>カテゴリ3</dt>
<dd>
<ul>
<li><a href="#">サービス1</a></li>
<li><a href="#">サービス2</a></li>
<li><a href="#">サービス3</a></li>
<li><a href="#">サービス4</a></li>
</ul>
</dd>
</dl>
</div>
<div id="right-column">
</div>
</div>
では、CSSを書いていきます。まずは、searchと共通の body, base, left-column, right-column 等の指定をしてしまいましょう。ZIPファイル内のservices2.cssもご覧ください。
* { padding: 0; margin: 0; }
body{ font-size: 80%; text-align: center; }
#base { width: 705px; text-align: left; margin: 10px auto; }
#left-column { width: 480px; float: left; }
#right-column { width: 220px; float: right; }
次は、分かりやすいように背景色などを指定します。
- dl
- ボーダー : 2px solid #ccc
- dt
- 背景色 : #fe6
- dd
- 背景色 : #cdf
- ul
- 背景色 : #fcf
- li
- 背景色 : #eee
#services { border: 2px solid #ccc; }
#services dt { background: #fe6; }
#services dd { background: #cdf; }
#services ul { background: #fcf; }
#services li { background: #eee; }
上記のCSSを追加すると、下のように表示されます。
次は・・・リストアイテムを横に並べていきましょう。横に並べるには、li要素をインライン要素として表示すればOKですので、次の1行を書き足してみてください。
#services li { display: inline }
dt要素をリストアイテムの左側に回りこませます。ポイントは、dtに囲まれているのは５文字分である（今回の例の場合）、ということ。dtの中の文字列の長さが決まっているというということを利用します。
上の図にあるように、ddのパディング（5文字＋余白）に dt を回り込ませます。CSSは以下のようになります。
#services { border: 2px solid #ccc; }
#services dt {
background: #fe6;
float: left;
}
#services dd {
background: #cdf;
padding-left: 5.5em;
}
#services ul { background: #fcf; }
#services li {
background: #eee;
display: inline;
}
さて、次は・・・といいたいところですが、レイアウト部分は既に完成しました。後は飾りつけ＆微調整を行うだけです。分かりやすくするために付けた背景色などはもう必要ないでしょう。不必要な部分を消すと、次のようになります。
#services dt { float: left; }
#services dd { padding-left: 5.5em; }
#services li { display: inline; }
ずいぶんと簡単になってしまいました（汗）調整を行う部分をリストアップしてみます。
- dt要素のフォントを太字に
- dd要素の背景色を一つおきに変更
- li要素の間隔
- いろいろな部分の余白
こんなところでしょうか。背景色は back-em という class を利用して一つおきに変えることにします。
ソースコードは以下のようになります。ZIPファイル内のservices3.cssもご覧ください。
#services dt {
float: left;
padding-top: 0.2em;
font-weight: bold;
}
#services dd { padding: 0.2em 0.2em 0.2em 5.5em; }
#services li {
display: inline;
margin-right: 0.9em;
line-height: 140%;
}
.back-em {
color: #000;
background: #edf4f8;
}
これで、Yahoo!サービスの部分は完成です。
ZIPファイル内のservices4.htmlとservices4.cssの２つのファイルがYahoo! サービス部分の完成コードになります。変更点は、
- 文字列をYahooのページにあわせた
- New!という目印をつけた
- 「求人」のところにはコロンをつけた
- 「一覧」というリンクを追加した
どのように実現しているのかは、ソースコードを見てご自身で確認してみてください。
特に、これらは覚えておくと役に立つでしょう。New!と：（コロン）はパディング部分に背景画像を表示することで実現しています。
