今まで出てきた要素だけでも、取り敢えずウェブページを作る事は出来ます。
ですが、他にもこれは知っておいた方が良いと思われるものもあります。
その中から、先ずは非常に応用範囲が広いリスト要素を覚えておきましょう。
リストとは、一つ以上の項目を並べたブロックレヴェル要素です。
HTMLに於いては、以下の三種類のリストが用意されております(以下の列挙にも当然リストが使われております)。
順不同リストは俗に箇条書きと呼ばれるもので、項目が並ぶ順序に意味がないリストです。
例えば、以下のようなテキストがあったとします。
入学試験には以下のものを持参してください。 ・受験票 ・筆記用具
このとき、二行目以降がリストの形式になっているのですが、順番を変えてもそれ程問題にはなりませんね。
つまり、このリストは順不同リストとなっていると言う訳です。
実際にHTMLで順不同リストをマークアップするには、以下のようにします。
<li>要素は、リストに於ける項目(リストアイテム)です。
<li>要素の内容としては、インライン要素もブロックレヴェル要素も入れられます。
一方、<ul>要素がHTMLに於ける順不同リストとなります。
<ul>要素の内容は一個以上の<li>要素のみとなり、他の要素を入れる事は出来ません。
実際に、上記の順不同リストの例をマークアップすると、以下のようになります。
<p>入学試験には以下のものを持参してください。</p><ul><li>受験票</li><li>筆記用具</li></ui>
リストは、ブロックレヴェル要素の中では非常に応用範囲が広いものですが、順不同リストに限っても以下のような応用例が考えられます。
メニューの各項目が並ぶ形はまさに順不同リストそのものです。
段落のあとに、※などが冒頭に付いた注釈が並ぶ事がありますが、これも一般の段落とは別物と考えてリストとしてマークアップすると良いでしょう。
HTMLのブロックレヴェル要素は見出しや段落などが定義されていますが、これらに該当しないブロックレヴェル要素もあり得ます。そう言った要素をリストとしてマークアップする訳です。
つまり、リストを汎用のブロックレヴェル要素として応用すると言う訳です。
例えば、見出しにも段落にもならない画像(<img>要素)をブロックレヴェル要素とするなどの使い方があります。
特別な機能が定義されていない汎用のブロックレヴェル要素としては、<div>要素もありますが、これだと一般の段落などに紛れて分かりにくくなる場合があり、このため、一部では一般の段落とは異なるブロックレヴェル要素は<div>要素よりリスト要素とした方が良いと考えられております。
また、<div>要素は何でもかんでも無意味にブロックレヴェル要素にする事が出来るため、文書の構造が曖昧になると言う事から、使用を極度に忌避する人もおります。
<div>まみれとか
<div>病などと馬鹿にする事さえあります。
このような理由から、見出しや段落に該当しないブロックレヴェル要素は全てリストとしてマークアップする、すなわちリストを一般のブロックレヴェル要素として活用する人もおります。
順序付きリストとは、項目の並ぶ順序に意味があるリストの事です。
例えば、以下のようなテキストがあったとします。
入学までの流れは以下のようになります。 ・願書提出 ・学力検査 ・合格発表 ・入学手続き ・入学式
このとき、二行目以降がリストの形式になっているのですが、順番は変えようがありませんよね。
つまり、このリストは順序付きリストとなっていると言う訳です。
実際にHTMLで順序付きリストをマークアップするには、以下のようにします。
<li>要素は順不同リストのマークアップでも解説しましたが、リストに於ける項目(リストアイテム)です。
一方、<ol>要素がHTMLに於ける順序付きリストとなります。
<ol>要素の内容は一個以上の<li>要素のみとなり、他の要素を入れる事は出来ません。
実際に、上記の順序付きリストの例をマークアップすると、以下のようになります。
<p>入学までの流れは以下のようになります。</p><ol><li>願書提出</li><li>学力検査</li><li>合格発表</li><li>入学手続き</li><li>入学式</li></ol>
順序付きリスト(<ol>要素)は通常PCや携帯電話向けの視覚系ウェブブラウザでは、各項目の前に自動的に 1., 2., 3., …と通し番号が打たれますが、このような挙動はあくまでもウェブブラウザの実装に依るものであり、従ってこの番号を当てにした文章作りをしてはいけません。
例えば、上記の順序付きリストの例に於いて、
堀北真希うさぎ1.については平成20年○月△日から×日まで受け付けます。などと言う表現は、項目の前に自動的に番号を打ってくれない環境では意味不明になる恐れがあります。
面倒でも、
願書提出は平成20年○月△日から×日まで受け付けます。などと言うように、番号が打たれていなくても意味が通るような文章を書きましょう。
定義リストとは、定義される語句と語句を定義する文章の組を列挙したリストの事です。
しかし、実際には語句と文章を列挙したリストは全て定義リストと見る事が出来ます。
例えば、以下のようなテキストがあったとします。
入学試験教科は以下のとおりです。 外国語 英語指定となります。 国語 現代文, 古典, 及び漢文が出題範囲です。 選択 日本史, 世界史, 地理, 政治・経済, または数学から一つ、試験当日に選んで解答します。
このとき、二行目以降が語句と文章の組を並べたリストとなっており、定義リストの一種となります。
この他にも定義リストには多数の応用例がありますが、そのうちの幾つかは後ほど紹介しましょう。
実際にHTMLで定義リストをマークアップするには、以下のようにします。
<dt>要素は、定義リストに於ける定義語句です。
語句ですので、<dt>要素の内容は当然インライン要素に限られます。
<dd>要素は、定義リストに於ける定義文章です。
文章ですので、<dd>要素の内容はインライン要素でもブロックレヴェル要素でも構いません。
そして、<dl>要素がHTMLに於ける定義リストとなります。
<dl>要素の内容として入れられるものは、<dt>要素と<dd>要素のみとなり、その他の要素を入れる事は出来ません。
実際に、上記の定義リストの例をマークアップすると、以下のようになります。
<p>入学試験教科は以下のとおりです。</p><dl><dt>外国語</dt><dd>英語指定となります。</dd><dt>国語</dt><dd>現代文・古典・漢文が出題範囲です。</dd><dt>選択</dt><dd>日本史, 世界史, 地理, 政治・経済, または数学から一つ、試験当日に選んで解答します。</dd></dl>
リストが定義リストの形になっていれば、すなわち語句と文章の組合せを列挙したものとなっていれば、どんなリストでも定義リストとして扱う事が出来ます。
その事から、いくつかの応用が考えられます。
主な応用例を挙げておきましょう。
項目が並ぶだけの単純なメニューであれば、メニューを順不同リストとしてマークアップするのが順当ですが、更新年月日を付けたりや項目に対して説明を入れる場合には、定義リストとしてマークアップすると言う選択肢もあります。
具体的には、
それぞれマークアップしたものを列挙する形になります。
定義リストは更新案内でも便利に使えます。
具体的には、
それぞれマークアップしたものを列挙する形になります。
いわゆるFAQとかQ & Aと言われているもので、
それぞれマークアップしたものを列挙する形になります。
インライン要素である画像(<img>要素)の扱い方の一つとして考えられるもので、
それぞれマークアップしたものを列挙する形になります。
列挙と書きましたが、二つ以上の画像が無ければいけないと言う事はありません。画像が一枚しかない場合(つまり列挙すべきものが一つしかない場合)でも、堂々と定義リストとしてマークアップする事が可能です。
このように、定義リストは幾つもの応用例があり、非常に便利な要素となっております。
