BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

リスト

テキストを箇条書きで指定する要素には、次の3種類があります。

ol要素

順番のある箇条書きを指定します。
順番のある箇条書きの一例
順番を示す記号には数字アルファベットローマ字の3種類があり、これらはスタイルシートで指定することができます。

ol{list-style-type:decimal;}
ol{list-style-type:lower-alpha;}(*1)
ol{list-style-type:lower-roman;}(*2)

リストの項目を指定するには、li要素を用います。

<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

ol要素は、直接の子要素にli要素以外の要素を持つことができません。次の記述は間違いとなります。

<ol>
<li>リスト1</li>
<p>リスト1の説明文</p>
<li>リスト2</li>
<p>リスト2の説明文</p>
<li>リスト3</li>
<p>リスト3の説明文</p>
</ol>

このような場合にはdl要素を使うことができます。リストの順番を重要視する場合には、li要素の子要素としてp要素を用いると良いでしょう。

ul要素

順番のない箇条書きを指定します。
順番のない箇条書きの一例
順番を示す記号には白抜き丸四角記号なしの4種類があり、これらはスタイルシートで指定することができます。

ul{list-style-type:disc;}
ul{list-style-type:circle;}
ul{list-style-type:square;}
ul{list-style-type:none;}

リストの項目を指定するには、li要素を用います。

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

ul要素は、直接の子要素にli要素以外の要素を持つことができません。次の記述は間違いとなります。

<ul>
<li>リスト1</li>
<p>リスト1の説明文</p>
<li>リスト2</li>
<p>リスト2の説明文</p>
<li>リスト3</li>
<p>リスト3の説明文</p>
</ul>

このような場合にはdl要素を使うことができます。

dl要素

定義リストを指定します。
定義リストの一例
中身は語句及び語句の定義で構成されます。元来は語句の定義を指定するものでしたが、現在は広義に解釈してテキスト及びテキストの説明のように用いられます。

dt要素で語句を指定し、dd要素で語句の定義を指定します。dl要素は、直接の子要素にdt要素及びdd要素以外の要素を持つことができません。

<dl>
<dt>語句1</dt>
<dd>語句1の定義</dd>
<dt>語句2</dt>
<dd>語句2の定義</dd>
<dt>語句3</dt>
<dd>語句3の定義</dd>
</dl>

マーク付けの観点よりdt要素の中にh1~h6要素を含める事例が見られますが、dt要素は子要素にインライン要素しか含むことができません。また、h1~h6要素の中にdt要素を含むこともできません。

箇条書きの形式で指定可能なものについては、table要素の使用は推奨しません。ファイルの容量が大きくなる傾向があり、一般的な視覚系ブラウザでは要素の中身を全て読み込んでからディスプレイへの表示を開始するため、体感的にページが重く感じられることで訪問者にストレスを与える恐れがあります。

(*1)
大文字にする場合はol{list-style-type:upper-alpha;}と指定します。
(*2)
大文字にする場合はol{list-style-type:upper-roman;}と指定します。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。