CSSリスト、マーカー、およびカウンター

CSSのリストには、私たちが期待する標準のリストスタイルを提供する特定のプロパティがあります。 順序付けされていないリストには、 discタイプのリストの箇条書きが付けられ、順序付けられたリストには番号が付けられます。 リストをより詳細に調査することに興味を持ったのは、MDNの::marker疑似要素を文書化するために行った作業から来ました。 この疑似要素はFirefox68に同梱されており、本日リリースされます。 ::marker疑似要素を使用できるので、リストを使っていくつかの興味深いことを始めることができます。この記事では、さらに詳しく説明します。

リストの脱構築

リストはマークアップで頻繁に使用されますが、あまり考えていないかもしれません。 多くのものは、リストとして非常に論理的にマークアップできます。 ステップバイステップの説明またはランク付けされた要素は、当然、順序付きリスト<ol>で記述できますが、設計の多くのことは、順序なしリスト<ul>を使用して記述できます。 たとえば、要素の非常に一般的な使用法は、サイト上の目的地のリストであるため、ナビゲーションをマークアップすることです。 私たちの調査では、CSSのリストが正確に何であるかを調べることから始めましょう。

CSSの多くのものと同様に、リストにはいくつかの初期値が適用されます。 これらの値により、リストのように見えます。 これらの特別な値は、リストアイテムがlist-itemの値を持つdisplayプロパティを持っているという情報で始まります。 これにより、追加のマーカーボックスを含むブロックレベルのボックスが作成されます。 マーカーボックスは、リストの箇条書きまたは番号が追加される場所です。

リストはCSSの早い段階で定義されており、現在使用しているリストの定義の多くはCSS2からのものです。 CSS2仕様では、リスト項目を次のように説明しています。

「 display: list-itemを使用した要素は、要素のコンテンツの主要なブロックボックスを生成します。また、 list-style-typeとlist-style-imageの値によっては、要素がリストアイテム。」

主要なブロックボックスは要素のメインボックスであり、リストアイテムに他のマークアップを含めることができるため、すべての子が含まれます。 次に、マーカーボックスがこのプリンシパルボックスに対して配置されます。 仕様では、背景色がこの主要ボックスの背後にのみ表示され、マーカーには表示されないという事実が詳しく説明されています。 また、マーカーは事前定義された値の範囲の1つに設定できます。

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none
• inherit

レベル3の表示仕様では、 display: list-itemと、 displayプロパティの他の可能な値を定義します。 これはCSS2.1を参照し、CSS2から取得する多くのCSSプロパティと値も同様ですが、 list-itemキーワードを「要素に::marker疑似要素を生成させる」と説明しています。

レベル3仕様では、2つの値の構文が使用されているインラインリストアイテムを作成する機能も導入されていdisplay: inline list-item 。 これはまだブラウザによって実装されていません。

非リストアイテムにマーカーボックスを作成する

displayの他の値と同様に、任意のHTML要素にlist-itemの表示タイプを指定することは完全に有効です（アイテムに::marker疑似要素を生成する場合）。 これにより、要素が意味的にリストアイテムになることはありませんが、代わりにリストアイテムとして視覚的にのみ表示されるため、 ::markerを持つことができます。 以下で::marker疑似要素について説明すると、他の要素にdisplay: list-itemを指定すると便利な場合があります。

CSSリストレベル3仕様::markerとカウンター

display仕様は、CSS2で見つかったリストの定義を拡張して明確にしますが、リストの動作を詳細に定義する仕様もあります。CSSリスト仕様レベル3です。リストアイテムの基本的な動作はdisplayで定義されているため、仕様では、何かがdisplay: list-itemと、順序付きリストを作成するときにデフォルトで使用されるカウンター。 これらの機能を介してアクセスされる潜在的に有用な機能がいくつかあります。

::marker疑似要素

::marker疑似要素を使用すると、リストアイテムのコンテンツとは別に、リストマーカーをターゲットにすることができます。 これは以前のバージョンのCSSでは不可能でした。したがって、 ulまたはliの色またはフォントサイズを変更すると、マーカーの色とフォントサイズも変更されます。 テキストとは異なる色のリストの箇条書きを使用するのと同じくらい単純に見えることを行うには、リストアイテムのコンテンツをスパンでラップする（またはマーカーに画像を使用する）必要があります。

 ul { color: #00b7a8; } ul span { color #333; }

::marker疑似要素を使用すると、テキストの色とは異なる箇条書きを使用するのが最も簡単です。つまり、上記の例のコードの代わりに、次のコードを使用できます。

 ul { color: #333; } ul ::marker { color: #00b7a8; }

順序付きリストの番号付けには、異なるサイズとfont-familyを使用することもできます。

 ol ::marker { font-size: 200%; color: #00b7a8; font-family: "Comic Sans MS", cursive, sans-serif; }

私のCodePenの例を使用すると、サポートしているブラウザーでこれらすべてを確認できます。

リスト以外のアイテムには::marker疑似要素を使用できます。 以下のコードでは、 display: list-item 。 これはそれに弾丸を与え、したがってターゲットとする::markerボックスを与えます。

絵文字を使用するように箇条書きを変更しました。

 h1 { display: list-item; } h1::marker { content: ""; } 

上記の例では、マーカーのルールで生成されたコンテンツを使用しました。 ::markerで使用できるCSSプロパティのサブセットはごくわずかです。 これらにはフォントプロパティと色が含まれますが、生成されたコンテンツを含めるためのcontentプロパティも含まれます。

::markerの許可されたプロパティとしてcontentが追加されたのは最近のことですが、Firefoxの実装に含まれています。 インクルードとは、 ::markerにテキストの文字列を含めるなどの操作を実行できることを意味します。 また、カウンターの使用を::markerと組み合わせると、マーカーのフォーマットの可能性がさらに高まります。

ブラウザのサポートとフォールバック

::marker疑似要素をサポートしていないブラウザの場合、フォールバックはとにかく表示される通常のマーカーです。 残念ながら、現在、この疑似要素などのセレクターのサポートを検出するために機能クエリを使用することはできませんが、これを仕様に追加することに関して問題が発生しています。 つまり、サポートがある場合はコードをフォークして1つのことを実行し、サポートがない場合は別のことを実行することはできません。 ほとんどの場合、通常のマーカーにフォールバックすることが合理的な解決策になります。

カウンター

順序付きリストにはリスト番号が付いています。これは、CSSカウンターを使用して実現されます。 したがって、CSSリスト仕様では、これらのカウンターについても説明しています。 自分でカウンターにアクセスして作成することができます。これを::marker疑似要素と組み合わせると、いくつかの便利な機能を利用できます。 これらのカウンターは、通常の（ ::marker以外の）生成コンテンツでも使用できます。

ステップの番号付きリストがある場合（「ステップ1」、「ステップ2」などを書きたい場合）、マーカーで生成されたコンテンツを使用し、 list-itemカウンターを追加することでこれを行うことができます。これは、組み込みのカウンターを表します。

 ::marker { content: "Step " counter(list-item) ": "; } 

ネストされたカウンター

ネストされたリストがある場合、それらに番号を付ける一般的な方法は、最上位のアイテムに整数（1）を付け、次に子アイテムを（1.1、1.2）とその子（1.1.1、1.1.2）として持つことです。等々。 これは、カウンターのより多くの機能を使用することで実現できます。

HTMLリストをネストすると、同じ名前の複数のカウンターが互いにネストされてしまいます。 カウンターのネストには、 counters()関数を使用してアクセスできます。

以下のコードでは、 counters()を使用して、上記のようにリストマーカーをフォーマットしています。 counters()の最初の引数は、使用するカウンターの名前です。 組み込みのlist-itemカウンターを使用しています。 2番目の引数は文字列です—これは出力カウンター間で連結されるものです（私は。を使用してい. ）。 最後に、カウンター関数の外側でcontentの値の内側に:を追加して、カウンター出力がコロンでコンテンツから分離されるようにします。

 ::marker { content: counters(list-item,'.') ':'; color: #00b7a8; font-weight: bold; }

これにより、画像のように出力が得られます。 ::markerとcountersをサポートするブラウザーを使用している場合は、CodePenの例でそれが機能していることを確認できます—から文字列を変更してみてください. それが出力をどのように変えるかを見るために何か他のものに。

counter()とcounters()の違いは何ですか？

最初の例でステップを書き出すために使用したcounter()関数は、最も内側のカウンターのみを使用します。 したがって、ネストされたリストのセットがある状況では、現在のレベルに関連するカウンターを書き出します。

counters()関数は、基本的にそのブランチ全体を書き出し、ブランチ内のカウンター間で文字列を連結する機会を提供します。 したがって、カウンターが2のリストアイテム（カウンターが4のリストアイテム内にネストされたリストの一部）がある場合、ブランチには次のものが含まれます。

• 4
• 2

次を使用して、これをマーカーに4.2として出力できます。

 ::marker { content: counters(list-item,'.'); }

他の要素のカウンター

カウンターは、リストではないものに使用できます—マーカーを出力するため—この場合、要素はdisplay: list-item —を持っている必要があります—または通常生成されたコンテンツを出力します。 カウンターは、章や図の番号付けを可能にするために、本の制作で広く使用されています。 特に長い記事の場合、Webで同様のアプローチをとらない理由はありません。

これらのカウンターを処理するCSSリスト仕様で定義されているCSSプロパティは次のとおりです。

• counter-set
• counter-reset
• counter-increment

これらがリストの外でどのように機能するかを確認するために、カウンターを使用してドキュメントの見出しに番号を付ける例を見ることができます。

私が最初に行う必要があるのは、body要素のヘッダー用のカウンターを作成することです—すぐに使用できます。 これを行うために、 counter-resetプロパティを使用しています。 counter-resetとcounter-setのプロパティは非常に似ています。 counter-resetプロパティは、指定された名前のカウンターがまだ存在しない場合は新しいカウンターを作成しますが、その名前のカウンターが存在する場合は、上記のようにネストされたカウンターも作成します。 counter-setプロパティは、その名前のカウンターがない場合にのみ新しいカウンターを作成します。 このためには、どちらのプロパティを使用しても問題なく機能しますが、 counter-setはcounter-resetほど優れたブラウザーサポートを備えていないため、実用的な方法を採用しています。

 body { counter-reset: heading-counter; }

カウンターができたので、ヘッダーのセレクターでcounter-incrementプロパティを使用できます。 これにより、セレクターが一致するたびにカウンターがインクリメントされます。

 h2 { counter-increment: heading-counter; }

値を確認するには、それをドキュメントに出力する必要があります。 次のCodePenの例に示すように、生成コンテンツを使用して見出しのbeforeに追加することで、これを行うことができます。

 h2::before { content: counter(heading-counter) ": "; color: #00b7a8; font-weight: bold; } 

または、以下に示すように、 h2要素をlist-itemにしてから、 ::markerを使用することもできます。 すでに詳しく説明したように、 ::marker要素を使用するとブラウザのサポートが制限されます。 Firefoxでは、見出しのマーカーとして使用されるカウンターが表示されますが、他のブラウザーではデフォルトの箇条書きが表示されます。

 h2 { display: list-item; } h2::marker { content: counter(heading-counter) ": "; color: #00b7a8; font-weight: bold; } 

フォーム要素のカウンター

CSSカウンターを使用して実現できる双方向性も少しあります。これは、JavaScriptを実行する必要があると思われるかもしれません。

いくつかの必須フィールドがあるフォームがあります。 必要なステータスは、CSSで:required疑似クラスを使用して選択でき、フィールドが完了していないという事実は、 :invalid疑似クラスを介して検出できます。 これは、必須と無効の両方のフィールドをチェックし、カウンターをインクリメントできることを意味します。 次に、それを生成コンテンツとして出力します。

これが実際にどれほど有用であるかは議論の余地があります—生成されたコンテンツにそれを貼り付ける以外に、その値で実際に何もできないことを考えると。 生成されたコンテンツが特定のスクリーンリーダーにアクセスできないという懸念もあります。したがって、装飾的以上の使用法では、その情報にアクセスする他の方法を確保する必要があります。 アクセシビリティと生成されたコンテンツの詳細については、「CSS生成コンテンツのアクセシビリティサポート」および最新情報「CSSコンテンツプロパティのスクリーンリーダーの互換性」をお読みください。

ただし、これは、カウンターが単にリストに番号を付けるよりも便利なことを実現できることを示しています。 ある日、あなたが取り組んでいる問題を解決するために知識が役立つかもしれません。

詳細はこちら

この記事は、私が説明したすべてがCSSリストの仕様に含まれているにもかかわらず、リストのスタイル設定からはかなり遠いものになりました。 以下のリンクで説明されていることについての詳細を見つけることができます。 CSSカウンターの興味深い使用法を見つけた場合、または::markerを使用できることを考えられる場合は、コメントにメモを追加してください。

• ::marker
• counter-set
• counter-reset
• counter-increment
• 「CSSカウンターの使用」、MDNWebドキュメント
• 「CSSカウンターとCSSグリッドを使用したカウント」CSS-トリック