リストのスタイル設定に役立つクリエイティブな方法をいくつか紹介します。
リストを考えると何が思い浮かびますか？最もわかりやすい例はショッピング リストです。これは最もシンプルなリストで、特に順序のないアイテムの集合です。ウェブでは、さまざまな方法でリストを使用しています。会場で開催される今後のコンサートのコレクションリストである可能性が高い。予約プロセスが複数のステップで構成されている場合、リストである可能性が高いです。画像ギャラリーですか？それでも、字幕付きの画像のリストと見なされる可能性があります。
この記事では、ウェブで使用できるさまざまな HTML リストの種類と、それらの使用方法について説明します。また、あまり馴染みのない属性についても説明します。また、CSS でスタイルを設定する便利でクリエイティブな方法についても説明します。
リストを使用する場合
項目を意味的にグループ化する必要がある場合は、HTML リスト要素を使用する必要があります。ユーザー補助技術（スクリーン リーダーなど）は、リストがあることとアイテムの数をユーザーに通知します。たとえば、ショッピング サイト上にある商品のグリッドについて考えた場合、この情報を知っておくと非常に役立ちます。そのため、リスト要素を使用することをおすすめします。
タイプのリスト表示
マークアップに関しては、次の 3 種類のリスト要素から選択できます。
- 順序なしリスト
- 順序付きリスト
- 説明リスト
どちらを選択するかは、ユースケースによって異なります。
順序なしリスト（ul）
順序なしリスト要素（<ul>）は、リスト内のアイテムが特定の順序に対応していない場合に最も便利です。デフォルトでは、箇条書きリストとして表示されます。たとえば、順序が重要でない買い物リストなどです。
ウェブでは、ナビゲーション メニューが一般的な例です。メニューを作成する場合は、ul を nav 要素でラップし、メニューをラベルで識別して、支援技術をサポートすることをおすすめします。aria-current 属性を使用して、メニューの現在のページも特定する必要があります。
<nav aria-label="Main">
<ul>
<li>
<a href="/page-1" aria-current="page">Menu item 1</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
…
</ul>
</nav>
メニュー構造に関するこの記事では、すべてのユーザーがナビゲーション メニューを利用できるようにするための推奨事項をいくつか概説しています。
順序付きリスト（ol）
複数のステップからなるプロセスなど、項目の順序が重要な場合は、順序付きリスト要素（<ol>）が最適です。デフォルトでは、リストアイテムは番号付きで表示されます。一例として、一連の手順が順番に完了しなければならない場合があります。
<ol> 要素と <ul> 要素の両方には、直接の子として <li> 要素のみを含めることができます。
説明リスト（dl）
説明リストには、用語（<dt> 要素）と説明（<dd>）が含まれます。各用語には複数の説明を付加できます。ユースケースとしては、用語集やレストランのメニューなどがあります。説明リストはデフォルトではマーカーなしで表示されますが、ブラウザでは <dd> 要素がインデントされる傾向があります。
HTML では、<div> を使用して用語とその説明をグループ化できます。これは、後で説明するように、スタイル設定に役立ちます。
<!-- This is valid -->
<dl>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</dl>
<!-- This is also valid -->
<dl>
<div>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</div>
</dl>
シンプルなリストのスタイル設定
リストの最も簡単な用途の一つは、本文のブロック内です。多くの場合、このようなシンプルなリストには複雑なスタイルは必要ありませんが、順序付きリストまたは順序なしリストのマーカーは、ブランドカラーを使用したり、箇条書き用のカスタム画像を使用したりするなどして、ある程度カスタマイズする必要があります。list-style と ::marker 疑似要素を使用すると、さまざまなことができます。
::marker
リストマーカーに基本的なスタイルを設定できるだけでなく、循環する箇条書きを作成することもできます。ここでは、::marker 疑似要素の content 値に 3 つの異なる画像 URL を使用しています。これにより、ショッピング リストの例に手書きの雰囲気が加わります（すべての項目に同じ画像を使用する場合とは異なります）。
::marker {
content: url("/marker-1.svg") ' ';
}
li:nth-child(3n)::marker {
content: url("/marker-2.svg") ' ';
}
li:nth-child(3n - 1)::marker {
content: url("/marker-3.svg") ' ';
}
カスタム カウンタ
順序付きリストによっては、カウンタ値を使用して別の値を付加する場合があります。list-item カウンタをマーカーの content プロパティの値として使用し、他のコンテンツを追加できます。
::marker {
content: counter(list-item) '🐈 ';
}
カウンタは自動的に 1 ずつインクリメントされますが、リストアイテムに counter-increment プロパティを設定することで、別の値でインクリメントすることもできます。たとえば、カウンタは毎回 3 ずつ増分されます。
li {
counter-increment: list-item 3;
}
カウンタには他にも多くの機能があります。可能性について詳しくは、CSS リスト、マーカー、カウンタの記事をご覧ください。
::marker スタイルの制限事項
マーカーの位置やスタイルをより細かく制御したい場合もあります。たとえば、flexbox や grid を使用してマーカーを配置することはできません。他の配置が必要な場合は、デメリットになることがあります。::marker は、限られた数のスタイル設定用の CSS プロパティを公開します。デザインで基本的なスタイル以外のものが必要な場合は、別の疑似要素を使用することをおすすめします。
リストのように見えないスタイルの設定
デフォルトのスタイルとはまったく異なる方法でリストのスタイルを設定したい場合もあります。これは、ナビゲーション メニューでよく見られるケースです。通常、すべてのマーカーを削除し、flexbox を使用してリストを横向きに表示します。一般には、list-style プロパティを none に設定します。これにより、DOM でマーカーの疑似要素にアクセスできなくなります。
::before を使用したカスタム マーカー
::marker が登場する前は、::before 疑似要素にスタイルを設定してカスタム リストマーカーを作成する方法が一般的でした。しかし今でも、より柔軟に、視覚的に複雑なリストのスタイルを設定できます。
::marker と同様に、content 属性を使用して独自のカスタム 箇条書きスタイルを追加できます。::marker を使用する場合とは異なり、list-style-position が提供する自動的なメリットがないため、手動で配置を行う必要があります。しかし、Flexbox では比較的簡単に位置を調整でき、アライメントの可能性も広がります。たとえば、マーカーの位置を交互に表示できます。
::before 要素を使用して順序付きリストのスタイルを設定する場合は、カウンタを使用して数値マーカーを追加することもできます。
li::before {
counter-increment: list-item;
content: counter(list-item);
}
::marker ではなく ::before を使用すると、カスタム スタイル設定用の CSS プロパティに完全にアクセスできるほか、アニメーションと遷移も許可されます。::marker では、アニメーションと遷移のサポートが制限されています。
属性を一覧表示する
番号付きリスト要素には、さまざまなユースケースで役立つ、省略可能な属性がいくつかあります。
逆順のリスト
過去 1 年間のトップ 10 アルバムのリストがある場合、10 から 1 にカウントダウンしたい場合があります。そのためにカスタム カウンタを使用し、負の値でインクリメントすることもできます。または、HTML で reversed 属性を使用するだけです。カウンタが純粋にプレゼンテーション用である場合を除き、CSS でカウンタを負の値でインクリメントするのではなく、reversed 属性を使用する方がセマンティックな意味を持つと考えられます。CSS の読み込みに失敗しても、HTML ではカウントダウンが正しく表示されます。また、スクリーン リーダーがリストをどのように解釈するかも考慮する必要があります。
2021 年のトップ 10 アルバムのデモをご覧ください。カウンタが CSS のみでインクリメントされていた場合、スクリーン リーダーを使用してページにアクセスしたユーザーは、数字が上向きにカウントされたため、10 が実際には 1 であると結論付けてしまう可能性があります。
デモでは、reversed 属性を使用すると、追加の作業なしでマーカーに正しい値が設定されていることがわかります。ただし、::before 疑似要素を使用してカスタム リストマーカーを作成する場合は、カウンタを調整する必要があります。リストアイテムのカウンタを負の値でインクリメントするように指示するだけです。
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
Firefox ではこれで十分ですが、Chrome と Safari では、マーカーは 0 から -10 までカウントダウンします。この問題は、リストに start 属性を追加することで解決できます。
リストの分割
start 属性を使用すると、リストの開始値を指定する数値を指定できます。便利な機能の 1 つは、リストをグループに分割する場合です。
アルバムのトップ 10 の例を基に、実際には、トップ 20 のアルバムを 10 個ずつカウントダウンしたい場合もあります。2 つのグループの間に他のページ コンテンツがある。
HTML で 2 つの個別のリストを作成する必要がありますが、カウンタが正しいことを確認するにはどうすればよいですか？マークアップは現在は維持されているため、どちらのリストも 10 から 1 にカウントダウンされますが、これは望ましい結果ではありません。ただし、HTML では start 属性値を指定できます。最初のリストに start 値 20 を追加すると、マーカーが再び自動的に更新されます。
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
複数列のリスト レイアウト
前のデモでご覧いただいたように、リストにはマルチカラムのレイアウトが適している場合があります。列の幅を設定すると、リストが自動的にレスポンシブになり、十分なスペースがある場合にのみ 2 つ以上の列にまたがって表示されます。列間にギャップを設定することもできます。さらに華やかにするために、スタイル設定された column-rule を追加することもできます（border プロパティに似た省略形を使用します）。
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
列を使用すると、リストアイテムに見慣れない区切りが生じることがあります。想定どおりの結果になるとは限りません。
リストアイテムで break-inside: avoid を使用すると、このような強制的な中断を防ぐことができます。
li {
break-inside: avoid;
}
カスタム プロパティ
CSS カスタム プロパティを使用すると、リストのスタイル設定の可能性が広がります。リストアイテムのインデックスがわかれば、そのインデックスを使用してプロパティ値を計算できます。残念ながら、現時点では CSS だけで要素のインデックスを決定する方法はありません（少なくとも、実用的な方法はありません）。カウンタでは content プロパティの値のみが使用され、計算はできません。
ただし、HTML の style 属性内で要素のインデックスを設定することはできます。これにより、特にテンプレート言語を使用している場合は、計算がより容易になります。次の例は、Nunjucks を使用して設定する方法を示しています。
<ol style="--length: items|length">
</ol>
Splitting.js は、クライアント側で同様の機能を実行するライブラリです。
カスタム プロパティ値を使用すると、リストの進行状況をさまざまな方法で表示できます。その方法の一つに、ステップのリストを示す進行状況バーがあります。この例では、線形グラデーションの疑似要素を使用して、各アイテムにユーザーがリストをどこまで移動したかを示すバーを作成します。
li::before {
--stop: calc(100% / var(--length) * var(--i));
--color1: deeppink;
--color2: pink;
content: '';
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);
}
また、hsl() カラー関数を使用して、リストの進行に合わせて色相を調整することもできます。カスタム プロパティを使用して hue 値を計算できます。
説明リストのスタイル設定
前述のように、用語とその定義を dl の div 内でラップすると、より多くのスタイル設定オプションを使用できます。たとえば、リストをグリッドとして表示するとします。各グループをラップする div なしでリストに display: grid を設定すると、用語と説明が異なるグリッドセルに配置されます。次の例に示すように、パイのメニューとその説明を表示すると便利な場合があります。
リスト自体にグリッドを定義して、用語と説明が常に列に揃えられるようにし、列の幅は最も長い用語によって決まるようにします。
一方、カード形式で用語と説明を明確にグループ化する場合、ラッパー <div> が非常に役立ちます。
リソース
- リスト リストと ::marker の概要
- ::marker を使用したカスタム マーカー
- カウンタ付きの CSS リスト