リストタグとは？
リストタグとは「・」や「1,2,3…」など、項目を並べて表示させることが出来ます。
見た目上以外にも、ブラウザや検索エンジンに構造を分かってもらう役割もあります。
つまり、リストタグとは複数の項目を意味のあるまとまりとして表現する為の構造です。
リストタグは３種類存在する
リストタグには、３つの種類が存在します。
役割を含めて載せていきます。
・ul
・ol
上記のリストタグには「li」を記述する必要がある為、先に載せていきます。
li（リストに表示させるアイテム）
li（List itemの略称）は、項目を表すコンテナを意味します。
リストタグ内には何個でも入れることが出来るので、リストとして表示させたい項目に応じて記述してあげましょう。
<ul>
<li>リストの内容</li>
</ul>
liに含めていい内容
liは文章ではなく項目を表す項目を表すコンテナです。
その為、以下のように要素はほぼ全てを入れて問題ありません。
・p
・div
・h2~
・a
・img
<ul>
<li>
<h2>見出し</h2>
<p>問題なし</p>
<a href = “https://hyouchan.com/”>リンク先</a>
</li>
</ul>
li単体の記述はNG
li単体の記述はNGとなっています。
必ず、ulもしくはolとセットで使用してください。
リストタグ（ul / ol）直下にli以外の要素記述はNG
「liはブロック要素だから、代わりにdivを含めても問題なさそうだよね？」と思いがちですが、ulやolにはliの代わりにdiv等を記述することはNGとなっています。
理由としては、リスト本来の意味を失ってしまうからです。
紛らわしいですが、ul / ol 直下ではなく、liの中にpなど要素を含めるのは問題ありません。
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
↑「これはリストで、１項目はりんごで２項目はみかんだな」と正しくブラウザが読み込みをしてくれます。
<ul>
<div>りんご</div>
<div>みかん</div>
</ul>
↑「これはHTML構文違反じゃないか。リストではなくただの文章の羅列だね」と本当はリストとして認識してほしいのに、正しくブラウザが読み込みをしてくれない。
ul（箇条書きリスト）
ul（Unordered Listの略称）は、順序なしの箇条書きリストに使用します。
リスト内を並び変えても意味が変わらないところが特徴です。
<ul>
<li>みかん</li>
<li>りんご</li>
<li>ばなな</li>
</ul>
ul同士のネストは可能
ulの中にulを記述することが出来ます。
考え方を一言で表すと順序なしのグループ。
記述するシーンとしては、親子関係や包含関係をはっきりと表したい時です。
例えば以下の記述は、フルーツというグループの中に、りんごとみかんが含まれています。
<ul>
<li>フルーツ
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
</li>
</ul>
ol（番号付きリスト）
ol（Ordered Listの略称）は、順序ありの番号付きリストに使用します。
項目の並び順そのものに意味がある特徴があります。
<ol>
<li>みかん</li>
<li>りんご</li>
<li>ばなな</li>
</ol>
ol同士のネストは可能
olの中にulを記述することが出来ます。
考え方を一言で表すと手順と順序のグループ。
記述するシーンとしては、親子関係や包含関係をはっきりと表したい時です。ulとは異なり、番号が表示されます。
例えば以下の記述は、フルーツというグループの中に、りんごとみかんが含まれています。
<ol>
<li>フルーツ
<ol>
<li>りんご</li>
<li>みかん</li>
</ol>
</li>
</ol>
olは順番を逆にする属性がある
olは通常、上から順序番号が付与されていますが、「reverssed」属性を記述することによって逆順の構成に変更することが出来ます。
<ol reversed>
<li>3位</li>
<li>2位</li>
<li>1位</li>
</ol>
olは開始番号を指定する属性がある
olは通常、上から順序番号が付与されていますが、「start」属性を記述することによって開始番号の構成を変更することが出来ます。
これでブラウザ上に「このリストは途中から始まるのか」と認識してもらうことが出来ます。
<ol start = “3”>
<li>3番目</li>
<li>2番目</li>
</ol>
dl
dl（Description Listの略称）は、”用語と説明” や “質問と回答” などに使用します。
1つの名前に対して説明が付く関係性が特徴です。
・dt → 名前（用語や質問など）
・dd → 説明（説明や回答など）
ulやolにliを記述するように、dlには上記のdtとddをセットにして入力します。
<dl>
<dt>お支払方法は何がありますか？</dt>
<dd>クレジットカードに対応しています。</dd>
</dl>
dl同士のネストは可能 ※深堀必要
dlの中にulを記述することが出来ます。
考え方を一言で表すと質問と答えのグループ。
ulやolとは異なり親子関係ではありません。
例えば以下の記述は、
Q：HTMLとは？
A：Webページを構造化する言語
その説明の中で
Q：用途は？
A：見出し・段落・リストなど
↑このような意味合いとなっています。
<dl>
<dt>HTML</dt>
<dd>
webページを構造化する言語
<dl>
<dt>用途</dt>
<dd>見出し・段落・リストなどを定義</dd>
</dd>
</dl>
dl直下にdt / dt以外の要素記述はNG
ulやolの直下にliしか記述してはいけないことと同様、dlの直下にはdt / dd のみ記述することが出来ます。理由は、リスト同様にdlの構造を壊してしまう為です。
紛らわしいですが、dl / dt 直下ではなく、ddの中にpなど要素を含めるのは問題ありません。<dl>
<dt>これはdt</dt>
<dd>
<p>この記述は問題ない</p>
</dd>
</dl>
コメント