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>
リストのスタイル
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
リストの作成方法を学んだところで、リストのスタイルを設定できるようになりました。最初に検出される 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>
でリストを作成する必要があります。
理解度をチェックする
リストに関する知識をテストする
list-item の前にある要素は、リスト項目と呼ばれます。
::marker
::bullet
::pencil
::counter
この 3 種類の HTML リストは、
<ul>
<dl>
<list>
<lo>
<li>
<ol>
::marker
にスタイルを適用する、次のリストの 2 つのスタイルはどれですか。
background-color
transition
display
color