リストの種類を用途に応じて使い分けよう

こんにちは、クリエイティブフレークです。

コーディングをしていると、リストをよく使用するのですが、リストの種類って気にしたことがありますか？



リストは大きく分けて3種類。

・<ul><li>を使用
・<ol><li>を使用
・<dl><dt><dd>を使用



↓↓何が違うのかというのがこちら↓↓





■<ul><li>のサンプル



HTML

<div>
<p>試験当日持参するもの</p>
<ul>
<li>受験票</li>
<li>筆記用具</li>
<li>写真付き身分証明書</li>
</ul>
<p>持ち込み禁止物</p>
<ul>
<li>携帯電話（持ち込みの場合は電源をOFF）</li>
<li>問題集、参考書</li>
<li>飲食物</li>
</ul>
</div>

CSS

div {
　color: #333333;
　font-size: 12px;
　width: 300px;
}
p {
　background: #f1f1f1;
　border-left: 5px solid #17aad8;
　padding: 5px 15px;
}

※リストの装飾については今回は省略します。



■<ol><li>のサンプル



HTML

<div>
<p>当店人気フレーバーランキング</p>
<ol>
<li>チョコチップ</li>
<li>ストロベリー</li>
<li>抹茶ミルク</li>
</ol>
</div>

※CSSは<ul><li>のサンプルと同じです。
※リストの装飾については今回は省略します。



■<dl><dt><dd>のサンプル



HTML

<div>
<p>店舗情報</p>
<dl>
<dt>住所</dt>
<dd>東京都◯◯区◯◯町1-1-1</li>
<dt>電話番号</dt>
<dd>03-1111-2222</li>
<dt>営業時間</dt>
<dd>10:00〜19:00</li>
</dl>
</div>

CSS

div {
 color: #333333;
 font-size: 12px;
 width: 300px;
}
p {
 background: #f1f1f1;
 border-left: 5px solid #17aad8;
 padding: 5px 15px;
}
dt {
 float: left;
 width: 80px;
}

※リストの装飾についてはフロート以外、今回は省略します。



見た目以外に、タグを正しく使い分けることで、ソースコードが綺麗に整然となり、さらにはSEOの効果も期待できます。

というのは、検索ロボットがタグの一覧を理解しているので、タグとその意味を関連付けて解釈しようとします。

コーディングにも優しさが大切、ってことですよ。

Written by Creative Flake