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-*
color
direction
font-*
content
unicode-bidi
white-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 つのスタイルのうち、::マーカーにスタイルを適用するものはどれですか。
transition
background-color
color
display