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>
を使用してリストを作成する必要があります。
理解度を確認する
リストに関する知識をテストする
リストアイテムの前に配置される要素は、
::pencil
::counter
::marker
::bullet
HTML リストには次の 3 種類があります。
<lo>
<list>
<dl>
<ol>
<li>
<ul>
このリストのどの 2 つのスタイルが ::marker
にスタイルを適用しますか。
transition
display
background-color
color