リスト

CSS ポッドキャスト - 030: リスト

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

<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 を使用すると、1 つ、2 つ、3 つの list-style プロパティの組み合わせを任意の順序で宣言できます。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;

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

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

::marker 疑似要素

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

DevTools でリストを調べると、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 リスト、マーカー、カウンター
• CSS カウンタを使用した MDN
• CSS リストとカウンタ モジュール レベル 3
• CSS のトリック: CSS カウンタと CSS グリッドを使用したカウント