シェアする
Creating Lists - Japanese Only
さて、続きましてリストというものを作ってみましょう。
リストとは日本語でいうところの『目録』や『一覧表』などに該当します。こんなのがリストですね。
- 猫
- 犬
- 馬
もうひとつ定義リストというものがあります。定義リストとは用語とそれに関する説明をセットにしたものです。以下みたいなのが定義リストです。表題の猫と、それに対する説明がセットになっていますね。
- 猫 -ネコ-
- 猫はネコ科に分類される小型哺乳類である。人間によく懐くため代表的なペットとして世界中で広く飼われている。とりあえず可愛い。
今回はこの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
- リスト2
- リスト3
定義したい内容に合わせて使い分けていきましょう。
CSSを使用するとマーカーは自由に設定できます。昨今ではul要素とol要素を使い分ける必要はほとんどありません。
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入門編のこちらの記事で解説しています。
リストと定義リストの基本的な作り方は以上です。
昨今のウェブサイトではメニュー部分や新着情報部分などがリストとしてマークアップされていることが多く、リスト系のタグは使用頻度が非常に高いです。使い方をしっかりマスターしておきましょうね。
実は『li』要素、『dt』要素、『dd』要素の閉じタグは省略可能だったりします。ただ少しややこしくて
- HTML 4.01 → 省略可能
- XHTML1.0 → 省略不可
- HTML5 → 省略可能
となっており、特に理由がない限りは閉じタグをしっかり閉じタグを記述したほうが無難です。
※閉じタグを書かないメリットは月間数億アクセスを超える超大型サイトなどで一文字レベルでデータ量を切り詰めたい、というような場合です。
次の記事では『インデント』というものについて解説していきたいと思います。引き続き頑張っていきましょう。
ではでは～。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
