制作者の活動(PR)。

アイドル・堀北真希ちゃんはうさぎの耳が似合うと思って作った女子大生キャラクタ
主な堀北真希うさぎ収録作品

堀北真希うさぎ(うさ耳女子大生)：昔のボシュロムのソフトコンタクトレンズ『オプティマ』コマーシャル風にコンタクトをつけている場面を含んだ仮想CM動画

HTMLでのリスト。

HTMLでの基本的な要素を一通りマスターしたら、是非リストについてもマスターして欲しいものです。

ここでは、HTMLでのリストについて解説します。

HTMLでのリスト・目次。

リストとは何か。

リストとは、一個以上の項目を列挙したものです。

具体的には箇条書きなどが挙げられます。

リストは文書を構成する大まかなブロックと見なされますので、当然ブロックレヴェル要素となります。

リストは通常の段落とは異なるものなので、マークアップでも段落とは別の要素として定義されております。

HTMLで定義されている要素は以下の三つです。

順不同リスト(箇条書き)。

順不同リストとは、いわゆる箇条書きの事で、項目の順序に意味が無いリストの事です。

HTMLで順不同リストをマークアップするには、以下のようになります。

  1. 各項目を<li>要素(リスト項目)としてマークアップする
  2. 全ての項目をまとめて<ul>要素(順不同リスト)としてマークアップする

例えば、以下のように文書中にリストがあったとします。

主な女性アイドルには以下のものが挙げられます。
・堀北真希
・新垣由衣
・榮倉奈々
・長澤まさみ
・仲間由紀恵
・上戸彩
最近では三次元より二次元の方がいいと言う方もいるようですが…

これは、以下のようにマークアップされる事でしょう。

<p>主な女性アイドルには以下のものが挙げられます。</p>
<ul>
    <li>堀北真希</li>
    <li>新垣由衣</li>
    <li>榮倉奈々</li>
    <li>長澤まさみ</li>
    <li>仲間由紀恵</li>
    <li>上戸彩</li>
    </ul>
<p>最近では三次元より二次元の方がいいと言う方もいるようですが…</p>

ここで注意したい事として、段落(<p>要素)の中にはリストは入れられないと言う事です。

これはHTMLの文法で決められている事ですが、<p>要素の中には他のブロックレヴェル要素を入れる事が出来ないのです。(※1)

従って、論理的には段落の中にリストがあるという場合であっても、マークアップ上(或いは構造上)段落はリストの直前で終わり、リストの後には新たなブロックレヴェル要素が続くと言う事になります。

順不同リストの応用。

HTMLにはしばしばマークアップしたくても定義されていない要素があるものです。

ブロックレヴェル要素で言えば、見出しや段落などは定義されておりますが、脚注, 例文, 画像のみのブロックなど普通の段落とは違うブロックレヴェル要素はHTMLでは定義されておりません。

このため、これらのような特別なブロックであっても、定義されている普通の要素としてマークアップする事となります。

ただ、これらを通常の段落と同じようにマークアップしてしまうと、実際に文書を見た際に通常の段落と紛れて分かり難くなってしまう事があります。

そこで、普通の段落とは違う特別なブロックについては、そのブロックの内容が並んだ順不同リストとしてマークアップすると言う考え方があります。(※2)

例えば脚注については以下のようになるでしょう。

<p>さいたま市岩槻区と埼玉県鴻巣市は雛人形の町として有名です。</p>
<ul class="notes">
    <li>旧埼玉県岩槻市は合併でさいたま市に併合され、さいたま市岩槻区になりました。</li>
    </ul>

ここで、class="notes"と言う属性が与えられておりますが、これはclass属性と言って要素に与えたクラス名です。

クラス名とは要素に対して与えられる名称の事で、ここでは脚注のリストである事を表わすため、notes と言うクラス名を与えております。

適切なクラス名を与える事で、特別なブロックである事が明確になると言う訳です。

順序付きリスト(序列リスト)。

順序付きリストまたは序列リストとは、項目の順番に意味があるリストの事です。

例えば、以下のようなリストが考えられます。

こう言ったリストには順不同リストではなく順序付きリストとして扱うと言う事になっております。

例えば、以下のような場合を考えてみましょう。

埼玉会館へのアクセス
浦和駅からのアクセス

1. まず浦和駅西口からロータリーの左に見える道をまっすぐ進む
2. 右手にコナカのある交差点を右に曲がる
3. 左にマツモトキヨシが見えたら、その手前の遊歩道を左に入る
4. …

これをマークアップすると、以下のようになるでしょう。

<h1>埼玉会館へのアクセス</h1>
<h2>浦和駅からのアクセス</h2>
<ol>
    <li>まず浦和駅西口からロータリーの左に見える道をまっすぐ進む</li>
    <li>右手にコナカのある交差点を右に曲がる</li>
    <li>左にマツモトキヨシが見えたら、その手前の遊歩道を左に入る</li>
    <li>…</li>
    </ol>

定義リスト。

定義リストとは、定義される語句と語句の定義の組み合わせを項目として並べたリストの事です。

定義される語句は<dt>要素、定義は<dd>要素としてそれぞれマークアップし、それらを一纏めにして<dl>要素としてマークアップします。

例えば、以下のような場合を考えてみましょう。

日本には幾つかの携帯電話会社がありますが、代表的なのは以下の二社でしょう。

エヌ・ティ・ティ・ドコモ
    日本電信電話公社を起源とする、日本最大の携帯電話会社。
au(エーユー)
    日本第二位の通信会社・KDDIの携帯電話部門と沖縄地区の携帯電話会社・沖縄セルラーが共同で展開している携帯電話ブランド。

これをマークアップすると、以下のようになるでしょう。

<p>日本には幾つかの携帯電話会社がありますが、代表的なのは以下の二社でしょう。</p>
<dl>
    <dt>エヌ・ティ・ティ・ドコモ</dt>
    <dd>日本電信電話公社を起源とする、日本最大の携帯電話会社。</dd>
    <dt>au(エーユー)</dt>
    <dd>日本第二位の通信会社・KDDIの携帯電話部門と沖縄地区の携帯電話会社・沖縄セルラーが共同で展開している携帯電話ブランド。</dd>
    </dl>

定義リストの応用。

定義リストは、語句とそれに関連する文章の組合せであれば、定義の有無に関係なく利用する事が出来ます。

例えば、

サイトのメニュー
サイトのコンテンツを語句、更新年月日やコンテンツの説明を定義に見立てて定義リストに出来ます。
質疑応答
問いを語句、問いへの回答を定義に見立てて定義リストに出来ます。

などと言った使い方が出来ます。

HTMLの知識がある方へのより詳しい解説。

以下、HTMLの知識がある方への補足です。

※1 <p>要素に他のブロックレヴェル要素を入れられない事について
※2 <ul>要素を特別なブロックレヴェル要素として利用する事について

汎用インライン要素としては、<div>要素が定義されておりますが、本来の定義はグループ化されたブロックレヴェル要素であり、従って本来ならブロックレヴェル要素をまとめるために用いられるべきと言う考えがあります。

この考えに沿えば、通常の段落と異なるブロックは"その内容が並んだリスト"としてマークアップする方がベターと考えられます。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com