<ul>および<li>タグを使って番号なしリストとしてマークアップするメリット
→リストに構造を与え、すべてのブラウザやデバイスでリストが正しく表示されるようにし、さらにCSSによってさまざまにスタイルを定義できるようにする
⇒第1章
<ol>
<li>Chop the onions.</li>
<li>Saute the onions for 3 minites.</li>
<li>Add 3 cloves of garlic.</li>
<li>Cook for another 3 minites.</li>
<li>Eat.</li>
</ol>
ol li {
list-style-type: upper-roman;
}
リストの各要素についてスタイルを完全にコントロールできるようにするために、各リスト項目（<li>）およびこのリスト（<ol>）にidを追加する
<ol id="recipe">
<li id="one">Chop the onions.</li>
<li id="two">Saute the onions for 3 minites.</li>
<li id="three">Add 3 cloves of garlic.</li>
<li id="four">Cook for another 3 minites.</li>
<li id="five">Eat.</li>
</ol>
デフォルトで表示される番号を非表示にし、番号を画像で追加する
#recipe {
list-style-type: none;
}
#recipe li {
padding: 10px 50px;
margin-bottom: 6px;
border-bottom: 1px solid #ccc;
}
#one {
background: url(ol_1.gif) no-repeat 6px 50%;
}
#two {
background: url(ol_2.gif) no-repeat 2px 50%;
}
#three {
background: url(ol_3.gif) no-repeat 3px 50%;
}
#four {
background: url(ol_4.gif) no-repeat 0px 50%;
}
#five {
background: url(ol_5.gif) no-repeat 6px 50%;
}
※位置の指定が各背景画像ごとに水平方向に若干異なるのは、各画像の幅が一定でないため。これを補正するために、各画像を必要に応じて少しずつ右に移動し、各番号のドットを右側に整列させている。
※「6px 50%」と指定すると、背景画像は左端から6ピクセル、上端から50パーセントのところに配置され、基本的に垂直方向で中央揃えされる。
<dl>
<dt>CSS</dt>
<dd>A sinple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</dd>
<dt>XHTML</dt>
<dd>A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</dd>
<dt>XML</dt>
<dd>A simple, very flexible text format derived from SGML.</dd>
</dl>
マークアップに<strong>、<b>、<span>などのタグの追加が不要
dt {
font-weight: bold;
}
CSSのbackgroundプロパティを使用。マークアップに触れる必要がないので画像の交換、追加、削除は迅速かつ簡単。
dt {
font-weight: bold;
}
dd {
margin-left: 15px; ・・・①
padding-left: 15px; ・・・④
color: #999; ・・・②
background: url(dd_arrow.gif) no-repeat 0 2px; ・・・③
}
①<dd>要素のデフォルトインデントに類似。 ②説明を用語（<dt>要素）から切り離すために、カラーを変更 ③追加するアイコンを、説明に左側に、上端から2ピクセルはなして配置 ④アイコンが説明文と重ならないようにパディングを追加
「定義リストは、<dl>を使って作成するが、一般的には一連の用語／説明のペアで構成される（もっとも、定義リストには他の用途もある）。」