リスト

The CSS Podcast - 030: Lists

次回の買い物で購入する予定の商品がいくつかあるとします。これを視覚的に表す一般的な方法はリストですが、買い物リストにスタイルを追加するにはどうすればよいでしょうか。

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

リストを作成する

上のリストは、セマンティック要素（<ul>）で始まり、子要素として買い物リストのアイテム（<li> 要素）が含まれています。各 <li> 要素を調べると、すべてに display: list-item があることがわかります。そのため、ブラウザはデフォルトで ::marker をレンダリングします。

li {
  display: list-item;
}

リストには他に 2 種類あります。

順序付きリストは <ol> で作成できます。この場合、リストアイテムには ::marker として番号が表示されます。

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

説明リストは <dl> で作成されますが、このリストタイプでは <li> リストアイテム要素は使用されません。

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

リストのスタイル

リストを作成する方法がわかったので、スタイルを設定しましょう。最初に検出される CSS プロパティは、リスト全体に適用されるプロパティです。

例のスタイル設定に使用できるリストスタイル プロパティは、list-style-position、list-style-image、list-style-type の 3 つです。

list-style-position

list-style-position を使用すると、箇条書きを inside または outside のリストアイテムの内容に移動できます。デフォルトの outside は、箇条書きがリストアイテムのコンテンツに含まれないことを意味します。一方、inside は、リストアイテムのコンテンツ内の最初の要素を移動します。

list-style-image

list-style-image を使用すると、リストの箇条書きを画像に置き換えることができます。これにより、url や none などの画像を設定することで、箇条書きを画像、SVG、GIF にすることができます。任意のメディアタイプやデータ URI を使用することもできます。

各食料品の画像を list-style-image として追加する方法を見てみましょう。

list-style-type

最後のオプションは、list-style-type にスタイルを設定する方法です。これにより、箇条書きが既知のスタイルキーワード、カスタム文字列、絵文字などに変更されます。使用可能なリストのスタイルの種類はすべて、こちらで確認できます。

list-style の略記

これで、これらの個々のプロパティがすべて揃いました。list-style ショートカットを使用して、すべてのリストスタイルを 1 行で設定できます。

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style では、list-style プロパティを 1 ～ 3 つ組み合わせて任意の順序で宣言できます。list-style-type と list-style-image の両方が設定されている場合、画像が使用できない場合は list-style-type がフォールバックとして使用されます。

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

これは、このセクションで説明するリストスタイルで最もよく使用されるプロパティです。一般的なアプリケーションの 1 つは、デフォルト スタイルを非表示にする list-style: none です。デフォルトのスタイルはブラウザから取得されます。多くの場合、リセット スタイルシートでは、パディングやマージンなどのリスト スタイルが削除されます。この省略記法を使用してスタイルを設定することもできます（例: list-style: square inside;）。

ここまでの例では、リスト全体とリストアイテム全体のスタイル設定に焦点を当ててきましたが、より細かいアプローチはどうでしょうか。

::marker 疑似要素

list-item マーカー要素は、リスト内の各項目を示す箇条書き、ハイフン、ローマ数字です。

デベロッパー ツールでリストを検査すると、HTML で宣言していないにもかかわらず、リストアイテムごとに ::marker 要素が表示されます。::marker をさらに調べると、ブラウザのデフォルトのスタイルが表示されます。

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

リストを宣言すると、HTML に箇条書きやローマ数字がなくても、各項目にマーカーが付けられます。これは疑似要素です。ブラウザが自動的に生成し、ターゲットに設定するための限定的なスタイル設定 API が用意されているためです。詳しくは、CSS 箇条書きの構造をご覧ください。::marker は Safari で限定的にサポートされています。

マーカー ボックス

CSS レイアウト モデルでは、リストアイテム マーカーは、各リストアイテムに関連付けられたマーカー ボックスで表されます。マーカー ボックスは、通常は箇条書きや番号が含まれるコンテナです。

マーカーボックスのスタイルを設定するには、::marker セレクタを使用します。これにより、リスト全体に基づいてスタイル設定するのではなく、マーカーのみを選択できます。

マーカーのスタイル

マーカーを選択したので、このセレクタで使用できるスタイル設定プロパティを見てみましょう。詳しくは、web.dev の CSS ::marker を使用したカスタム ブルズをご覧ください。

使用できる CSS ::marker プロパティは多数あります。

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

表示タイプ

list-style プロパティと ::marker プロパティはすべて、デフォルトの表示値が list-item であるため、<li> 要素にスタイルを適用します。<li> 以外のものをリストアイテムにすることもできます。

これを行うには、display: list-item プロパティを追加します。display: list-item を使用する例として、見出しに下矢印付きの箇条書きを追加し、::marker で別のものに変更する場合などがあります。次の例は、スタイル設定のために display: list-item を使用した見出しと、正しいリストマークアップを使用したリストを示しています。

display を使用すると、あらゆるものをリストアイテム ビューに変換できますが、スタイル設定するコンテンツが実際にリストである場合は、正しいリスト マークアップを使用する代わりに、これを使用しないでください。アイテムの外観をリストアイテムに変更しても、ユーザー補助サービスのアイテムの読み上げや認識方法は変更されません。そのため、スクリーン リーダーやスイッチ デバイスではリストアイテムとして読み上げられません。セマンティック マークアップは常に使用し、可能な限り <li> を使用してリストを作成する必要があります。

理解度を確認する

リストに関する知識をテストする

リソース

• リストのスタイル設定に関する MDN ガイド
• CSS ::marker を使用したカスタム ブルズアイ
• Smashing Magazine: CSS リスト、マーカー、カウンタ
• MDN Using CSS Counters
• CSS リストとカウンタ モジュール レベル 3
• CSS-Tricks: Counting With CSS Counters and CSS Grid