HTML リストタグの書き方

HTMLのリストの書き方を説明した記事になります。基本的に３つの書き方があるのでご紹介します。

箇条書きリスト

基本的に順序の関係ないリストを書く時は ul タグを使います。ul（親要素）タグでリストアイテムとなる li（子要素）を囲います。

ul	unordered list の略
li	list item の略

＜html ソース＞

<ul>
 <li>うまい</li>
 <li>まずい</li>
 <li>そうでもない</li>
</ul>

＜ブラウザの表示＞

リストを白丸にする

リストの黒丸を白丸にする場合は ul に以下のようなスタイルを指定します。

プロパティ	list-style-type
値	circle

＜html ソース＞

<ul>
 <li>ポーランド</li>
 <li>オーストラリア</li>
 <li>ニュージーランド</li>
</ul>

＜CSS ソース＞

ul {
  list-style-type: circle;
}

＜ブラウザの表示＞

順序付きリスト

順序が大事になるリストを書くときには、ol タグを使います。ol（親要素）タグでリストアイテムとなる li（子要素）を囲います。

ol	ordered list の略
li	list item の略

＜html ソース＞

<ol>
 <li>ボールに牛乳と卵を入れて混ぜる</li>
 <li>ホットケーキミックスをボールに入れて混ぜる</li>
 <li>フライパンで焼く</li>
</ol>

＜ブラウザの表示＞

リストをアルファベットにする

リストの順番をアルファベットにしたい時は ol に以下のようなスタイルを指定します。

プロパティ	list-style-type
値	lower-alpha

＜html ソース＞

<ol>
 <li>10代</li>
 <li>20代</li>
 <li>30代</li>
</ol>

＜CSS ソース＞

ol {
  list-style-type: lower-alpha;
}

＜ブラウザの表示＞

先頭の記号を内側に表示する

リストの先頭にある記号はデフォルトでは外側に表示されますが、内側に表示させたい時は以下のようにスタイルを指定します。

プロパティ	list-style-position
値	inside

＜html ソース＞

<ul>
 <li>40代</li>
 <li>50代</li>
 <li>60代</li>
</ul>

＜CSS ソース＞

ol {
  list-style-position: inside;
}

＜ブラウザの表示＞

※リストのテキストが折り返された時に分かると思います。

先頭の記号の消し方

リストの先頭にある記号を消す時は以下のようにスタイルを指定します。

プロパティ	list-style-type
値	none

＜html ソース＞

<ul>
 <li>アイス</li>
 <li>わたあめ</li>
 <li>チョコパイ</li>
</ul>

<ol>
 <li>駅西口を出る</li>
 <li>近くのコンビニを左折</li>
 <li>10km先目的地</li>
</ol>

＜CSS ソース＞

ul {
  list-style-type: none;
}

ol {
  list-style-type: none;
}

＜ブラウザの表示＞

リスト記号の代わりに画像を使用する

リスト記号の代わりに画像を使用する時は以下のようにスタイルを指定します。

プロパティ	list-style-image
値	url(ファイルの場所)

＜html ソース＞

<ul>
 <li>ショートケーキ</li>
 <li>チョコケーキ</li>
 <li>モンブラン</li>
</ul>

＜CSS ソース＞

ul {
  list-style-image: url(../img/icon.png);
}

＜ブラウザの表示＞

説明リスト

質問に対して回答がある時などは dl タグを使います。dl（親要素）タグで質問となるコンテンツを dt（子要素）で囲い、回答となるコンテンツを dd（子要素）で囲います。

dl	description list の略
dt	description term の略
dd	description detail の略

＜html ソース＞

<dl>
 <dt>質問A</dt>
 <dd>回答A</dd>
 <dt>質問B</dt>
 <dd>回答B</dd>
</dl>

＜CSS ソース＞

リストのスタイルをまとめて指定する

リストの先頭記号を白丸・内側・画像などにする場合は list-style プロパティを使い、値は半角スペースで区切って指定します。

プロパティ	list-style
値	circle, inside, src()など

＜html ソース＞

<ul>
 <li>チーズケーキ</li>
 <li>フルーツケーキ</li>
 <li>シフォンケーキ</li>
</ul>

＜CSS ソース＞

ul {
  list-style: circle inside url(../img/icon.png);
}

＜ブラウザの表示＞

まとめ

リスト化するとサイトが見やすくなることと、適切なタグを使うことによりSEO効果も上がるのでどんどん利用していきましょう。