タイトル: リスト
SEOタイトル: HTML リスト (ul/ol/dl) 完全ガイド
| この記事の要点 |
|
3 種類のリスト要素
| 要素 | 用途 | マーカー (既定) |
|---|---|---|
<ul> (Unordered List) | 順序の無い箇条書き | ・(disc) |
<ol> (Ordered List) | 順序が意味を持つ手順・ランキング | 1. 2. 3. (decimal) |
<dl> (Description List) | 用語と説明のペア | なし |
順序なしリスト
<ul>
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ul>順序が意味を持たない箇条書き全般に使います。買い物リスト・メニュー・ナビゲーションメニューなど。
順序ありリスト
<ol>
<li>ログイン画面を開く</li>
<li>ID とパスワードを入力</li>
<li>「ログイン」ボタンをクリック</li>
</ol>
<!-- 開始番号を変更 -->
<ol start="5">
<li>5 番目から始まる</li>
<li>6</li>
</ol>
<!-- 逆順 -->
<ol reversed>
<li>3 として表示</li>
<li>2</li>
<li>1</li>
</ol>手順・ランキング・章番号など、順序が意味を持つケースで使います。start / reversed 属性で番号を制御できます。
定義リスト
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language の略。Web ページの構造を記述する言語。</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets の略。HTML 文書の見た目を指定する言語。</dd>
<dt>JavaScript</dt>
<dd>Web ブラウザで動的な処理を実現するプログラミング言語。</dd>
</dl>用語集・FAQ・メタデータ (著者・公開日・カテゴリ) など「キーと値のペア」を意味的に表すときに使います。1 つの <dt> に対し複数の <dd>、また逆も可能です。
type 属性は廃止 → CSS で制御
古い HTML では <ul type="disc"> や <ol type="A"> といったマーカー指定が可能でしたが、HTML5 では非推奨です。CSS の list-style-type を使います。
/* マーカーの形状 */
ul.disc { list-style-type: disc; } /* ● */
ul.circle { list-style-type: circle; } /* ○ */
ul.square { list-style-type: square; } /* ■ */
ul.none { list-style-type: none; } /* なし */
ol.decimal { list-style-type: decimal; } /* 1.2.3. */
ol.lower-alpha { list-style-type: lower-alpha; } /* a.b.c. */
ol.upper-alpha { list-style-type: upper-alpha; } /* A.B.C. */
ol.lower-roman { list-style-type: lower-roman; } /* i.ii.iii. */
ol.upper-roman { list-style-type: upper-roman; } /* I.II.III. */
ol.cjk-ideographic { list-style-type: cjk-ideographic; } /* 一二三 */
ol.katakana { list-style-type: katakana; } /* ア.イ.ウ. */
ol.hiragana { list-style-type: hiragana; } /* あ.い.う. */
/* マーカー位置 */
ul.inside { list-style-position: inside; } /* 文字に重なる */
ul.outside { list-style-position: outside; } /* 既定: 外側 */
/* 画像マーカー */
ul.custom {
list-style-image: url('/img/bullet.png');
}
/* ショートハンド */
ul { list-style: square inside; }counter-reset / counter-increment でカスタム番号
CSS カウンターを使うと、複雑な番号付け (1.1 / 1.2 / 1.2.1 のような節番号) も実現できます:
ol.toc {
counter-reset: section;
list-style: none;
}
ol.toc > li {
counter-increment: section;
}
ol.toc > li::before {
content: counter(section) ". ";
font-weight: bold;
}
ol.toc ol {
counter-reset: subsection;
list-style: none;
}
ol.toc ol > li {
counter-increment: subsection;
}
ol.toc ol > li::before {
content: counter(section) "." counter(subsection) " ";
}ネストしたリスト
<ul>
<li>フロントエンド
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript
<ul>
<li>React</li>
<li>Vue</li>
</ul>
</li>
</ul>
</li>
<li>バックエンド
<ul>
<li>PHP</li>
<li>Python</li>
</ul>
</li>
</ul>ネストは <li> の中に <ul>/<ol> を入れます。<ul> の直接の子は <li> のみで、<li> と <li> の間に <ul> を置くと無効です。
ARIA role="list" の意味
Safari は list-style: none を当てた <ul> をリストとして読み上げないことがあります (アクセシビリティのバグ気味挙動)。これを補うため、デザインでリストを消す場合は明示的に role="list" を付けるテクニックがあります:
<ul role="list" style="list-style: none">
<li role="listitem">項目1</li>
<li role="listitem">項目2</li>
</ul>CSS フレームワークでのリセット
Tailwind CSS・Bootstrap・Material UI 等は、デフォルトで ul/ol のスタイルをリセットしています。意図したリストには明示的に class="list-disc list-inside" (Tailwind) などを付ける必要があります。
<!-- Tailwind: 既定だとマーカー消える -->
<ul class="list-disc list-inside space-y-1">
<li>項目1</li>
<li>項目2</li>
</ul>
<!-- Bootstrap 5 -->
<ul class="list-unstyled">
<li>マーカー無しリスト</li>
</ul>SEO とアクセシビリティ
- ナビゲーションは
<nav><ul>...</ul></nav>でマークアップ - パンくずリストは
<ol>+ Schema.org BreadcrumbList - スクリーンリーダーは「3 項目のリスト」のように個数を読み上げてくれる
- div を並べただけよりリスト要素を使った方が SEO に有利 (構造として認識される)
FAQ
Q: ul と ol、迷ったらどっち?
A: 順序を入れ替えても意味が変わらないなら ul、変わるなら ol。
Q: メニューバーは何で作る?
A: <nav><ul> の中に <li><a> を並べるのが定石です。横並びにするには CSS で display: flex を当てます。
Q: dl は table と何が違う?
A: dl は「用語と説明のペア」という意味で、表形式 (行と列で構造化された 2 次元データ) ではありません。スペックシートや 2 軸以上の比較には table を使います。