リストを作ってみよう

さて、続きましてリストというものを作ってみましょう。

リストとは日本語でいうところの『目録』や『一覧表』などに該当します。こんなのがリストですね。

• 猫
• 犬
• 馬

もうひとつ定義リストというものがあります。定義リストとは用語とそれに関する説明をセットにしたものです。以下みたいなのが定義リストです。表題の猫と、それに対する説明がセットになっていますね。

猫 -ネコ-

猫はネコ科に分類される小型哺乳類である。人間によく懐くため代表的なペットとして世界中で広く飼われている。とりあえず可愛い。

今回はこの2つを勉強していきます。まずはリストからいきましょう。

HTMLでリストを作成するときに使用する要素は『ul』要素、『ol』要素、『li』要素の3つです。記述方法は『ul』要素か『ol』要素の中に『li』要素を入れていく形になります。

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

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

『ul』要素と『ol』要素の違いはマーカー(文頭の印)です。『ul』要素は黒点が付き、『ol』要素は連番が付きます。以下にサンプルを用意したので確認してみましょう。

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

• リスト1
• リスト2
• リスト3

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

1. リスト1
2. リスト2
3. リスト3

定義したい内容に合わせて使い分けていきましょう。

li要素は中に色々な要素をいれることができます。これはli要素の中にp要素とspan要素を入れた場合ですね。

<ul>
    <li>
        <p>リスト1</p>
        <p><span>ここはspanです</span></p>
    </li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

尚、『ul』要素と『ol』要素の直下に『li』要素以外の要素をいれるのは非推薦となっています。直下はNG、というわけなので上記のように『li』要素の中なら別の要素を入れて問題ありません。ここは間違いやすいので注意してください。

続いて定義リストを作ってみましょう。使用する要素は『dl』要素、『dt』要素、『dd』要素の3つです。

記述方法はリストと同じくdl要素の中に『dt』要素と『dd』要素を入れていきます。『dt』要素は定義元、『dd』要素はそれに対する説明や解説を定義します。

<dl>
    <dt>定義</dt>
    <dd>ここに説明を書くよ</dd>
</dl>

ブラウザで読み込ませると以下のような感じになります。

定義

ここに説明を書くよ

HTML5では『dt』要素と『dd』要素が一対一の対になっていなくても大丈夫です。以下は1つの『dt』要素に対して複数の『dd』要素を設置しています。

<dl>
    <dt>猫</dt>
    <dd>可愛い</dd>
    <dd>ツンデレ</dd>
    <dd>とりあえずきゃわわ</dd>
</dl>

猫

可愛い

ツンデレ

とりあえずきゃわわ

逆に複数の『dt』要素に対して1つの『dd』要素でもOKです。

<dl>
    <dt>可愛い</dt>
    <dt>とりあえず可愛い</dt>
    <dt>ほんとうに可愛い</dt>
    <dd>ねこのとくちょう</dd>
</dl>

可愛い

とりあえず可愛い

ほんとうに可愛い

ねこのとくちょう

『dt』要素だけで『dd』要素なし、という形では定義リストとする意味がありませんのでその場合は『ol』要素か『ul』要素を使用して普通のリストとしてマークアップしたほうが無難です。

尚、『dd』要素には色々な要素をいれられますが、デフォルトの状態では『dt』要素の中にブロック要素はいれられません。間違いやすいのでご注意ください。
※ブロック要素についての解説はCSS入門編のこちらの記事で解説しています。

リストと定義リストの基本的な作り方は以上です。

昨今のウェブサイトではメニュー部分や新着情報部分などががリストとしてマークアップされていることが多く、リスト系のタグは使用頻度が非常に高いです。使い方をしっかりマスターしておきましょうね。

次の記事では『インデント』というものについて解説していきたいと思います。引き続き頑張っていきましょう。

ではでは～。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア