2022.07.20
【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおす...
デザイン
今回はHTMLでリストを作る方法と、その時に使うタグの違いについてご紹介いたします。
リストを表すタグは複数あるので、内容によってしっかり使い分けることで文書構造に沿った綺麗なサイトに近づけることができ、サイトの評価を上げることにもつながります!
目次
基本的にはol
とli
、ul
とli
のどちらかのセットでリストを作っていきます。li
はそれぞれのリストの中身を意味しており、ol
もしくはul
でli
を囲むことでリストを示すことになります。
<ol>
<li>1つ目の中身</li>
<li>2つ目の中身</li>
<li>3つ目の中身</li>
</ol>
ol
要素はli
の順番に意味がある「順序リスト」を表します。
ランキングや手順が決まっている作業のリストを表示するときにはol
の「順序リスト」でマークアップをします。
<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>
dl
タグはHTML5.2からルールが変わっているため、詳しい使い方は別の記事でご紹介しています。
ol
、ul
、dl
タグを正しく使うことで綺麗なマークアップができるようになります。
また、今回ご紹介しきれませんでしたがlist-style-type
を非表示にして疑似要素の::before
タグを使うことでオリジナルのマーカーを付けることもできます。
ぜひそれぞれの特性を理解して使い分けてみてください!
おすすめ記事はこちら!