サイトレビュー
【勝手にWEBサイトレビュー #14】イラストが可愛らしいギリシャのデ...
2021.02.28
今回はHTMLでリストを作る方法をご紹介します。
リストを表すタグは複数あるので、内容によってしっかり使い分けることで文書構造に沿った綺麗なサイトに近づきます。
目次
基本的にはolとli、ulとliのどちらかのセットでリストを作っていきます。
liはそれぞれのリストの中身です。
olもしくはulでliを囲みます。
<ol> <li>1つ目の中身</li> <li>2つ目の中身</li> <li>3つ目の中身</li> </ol>
ol要素はliの順番に意味がある「順序リスト」を表します。
ランキングや手順が決まっている作業のリストを表示するのに向いています。
<p>好きなおでんの具ランキング</p> <ol> <li>大根</li> <li>たまご</li> <li>もち巾着</li> <li>牛すじ</li> <li>こんにゃく</li> </ol>
<p>おでんの作り方</p> <ol> <li>鍋で出汁をとる</li> <li>下処理した大根を入れる</li> <li>ゆでた卵、こんにゃく、牛すじを入れる</li> <li>もち巾着を入れる</li> <li>火を止める直前にはんぺんを入れる</li> </ol>
ulはliの順番は関係しない「順不同のリスト」を表します。
持ち物リストや、スライドショーの表示に向いています。
<p>おでんの具材の買い出しリスト</p> <ul> <li>卵</li> <li>大根</li> <li>こんにゃく</li> <li>ちくわ</li> <li>はんぺん</li> </ul>
ol(ul)の中に更にol(ul)を入れることも可能です。
ただし、ol(ul)の直下に置くことはできないので、必ずliの中に使用します。
<p>おでんの具材の下処理方法</p> <ul> <li>大根 <ol> <li>皮を厚めにむく</li> <li>切り口を包丁でそいで面取りする<li> <li>隠し包丁を入れる<li> <li>下茹でをする<li> </ol> </li> <li>こんにゃく <ol> <li>適当な大きさにカットする</li> <li>両面に網目模様の切込みを入れる</li> <li>塩を少し刷り込み、5分置く</li> <li>塩を流して下茹でする</li> </ol> </li> </ul>
ol、ulは各リストの前にマーカーを付けることができます。
htmlのol(ul)タグにtype属性を追加する、もしくはcssのlist-style-typeで指定する2パターンがあります。
今回はcssでの指定方法を紹介します。
See the Pen list-style-type by spiqa design (@spiqa_design) on CodePen.
ol(ul)タグにlist-style-type:〇〇;を設定します。
一部ブラウザでは対応していないものもあるので注意してください。
例には挙げきれませんでしたが、ヘブライ数字、アルメニア数字、グルジア数字などを指定することもできます。
dlを使ったリストはol・ulとは違い、定義リストを表します。
とある語句と、それに対する説明文がセットになっています。
会社概要のリストや商品名+説明文などに向いています。
<p>おでんの具材の好きな理由</p> <dl> <dt>大根</dt> <dd>数少ない野菜だから</dd> <dt>たまご</dt> <dd>味がしみ込んでいておいしい</dd> </dl>
ol、ul、dlタグを正しく使うことで綺麗なマークアップができるようになります。
また、今回ご紹介しきれませんでしたがlist-style-typeを非表示にして疑似要素の::beforeタグを使うことでオリジナルのマーカーを付けることもできます。
ぜひそれぞれの特性を理解して使い分けてみてください!
株式会社スピカデザイン