CSS ポッドキャスト - 030: リスト
次の食料品店への移動で、購入する予定の商品をいくつか持っているとします。これを視覚的に表現する一般的な方法はリストですが、食料品リストにスタイルを追加するにはどうすればよいでしょうか。
<ul>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ul>
リストの作成
上記のリストは、食料品リストアイテム（<li> 要素）を子として持つセマンティック要素（<ul>）で始まっています。各 <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 箇条書き構造の詳細Safari では、::marker のサポートが限定されています。
マーカー ボックス
CSS レイアウト モデルでは、リストアイテムのマーカーは、各リストアイテムに関連付けられたマーカー ボックスで表されます。マーカー ボックスは、通常は箇条書きや番号が格納されるコンテナです。
マーカー ボックスのスタイルを設定するには、::marker セレクタを使用します。これにより、リスト全体に基づいたスタイル設定ではなく、マーカーのみを選択することができます。
マーカーのスタイル
マーカーを選択したので、このセレクタで使用可能なスタイル プロパティを見てみましょう。詳しくは、web.dev の CSS ::marker を使用したカスタム リストをご覧ください。
多くの使用可能な CSS ::marker プロパティがあります。
animation-*transition-*colordirectionfont-*contentunicode-bidiwhite-space
ディスプレイの種類
list-style プロパティと ::marker プロパティはすべて、リストアイテムのデフォルト値があるため、<li> 要素のスタイル設定を行います。<li> でないものをリストアイテムにすることもできます。
そのためには、display: list-item プロパティを追加します。display: list-item を使用する一例として、見出しにぶら下がり箇条書き記号を付ける場合があり、それにより ::marker を使用して別の見出しに変更できます。以下の例は、スタイル設定の目的で display: list-item を使用した見出しと、正しいリスト マークアップを使用したリストを示しています。
display を使用すれば、何でもリストアイテムのビューに変換できますが、スタイル設定するコンテンツが実際にリストである場合は、正しいリスト マークアップの代わりにこれを使用しないでください。アイテムの外観をリストアイテムに変更しても、ユーザー補助サービスによるそのアイテムの読み取り方法と認識方法は変わりません。そのため、スクリーン リーダーやデバイスの切り替えの際にリストアイテムとして読み上げられることはありません。可能な限り、セマンティック マークアップを使用し、<li> でリストを作成してください。
理解度チェック
リストの知識をテストする
リストアイテムの前の要素は
HTML リストには、次の 3 種類があります。
<dl><lo><ol><li><ul><list>このリスト内の 2 つのスタイルのうち、::マーカーにスタイルを適用するものはどれですか。
transitionbackground-colorcolordisplay