CSS リストモデルでのマーカータグの使用

この記事では主に、 list-itemの下にある::master疑似要素、 list-style-imageおよびlist-style-typeスタイル属性を紹介し、実際にどのように使用するかを紹介します。 list-itemには、ここでは紹介されていない、あまり一般的に使用されない他のスタイル属性もあります。興味があれば、CSS標準ドキュメントに移動できます。

::markerとは

::marker 、リスト項目を表すためにlist-itemに記入するコンテンツを定義できる疑似要素です。その機能を明確に示す例を示します。

<スタイル>
li::marker { コンテンツ: "(" counter(リスト項目) ")"; }
li { 表示: リスト項目; }
</スタイル>

<ul>
  <li>zhaodao88.com ビジネスチャンスを探す</li>
  <li>zhaodao88.com つながりを見つける</li>
  <li>zhaodao88.com 購入品の検索</li>
</ul>

効果画像:

ここで、 marker要素は各リスト項目の前のマーカーを定義し、 content疑似要素のコンテンツはリスト項目の前に入力されるコンテンツです。

マーカーコンテンツを入力するには::markerを使用します

通常の要素でmarkerを使用する場合は、 display: list-itemとして定義する必要があることに注意してください。 list-items作成時にmarkerとcounter自動的に生成します。

マーカースタイルはlist-style-typeとlist-style-image属性を使用して記述することも、 ::marker疑似要素を使用して直接記述することもできます。以下に例を示します。

マーカーを制御するには、 ::marker疑似要素を使用します。疑似要素のcontent 、マーカーの内容です。

<スタイル>
  p { 左余白: 12 em; }
  p.note {
    表示: リスト項目;
    カウンター増加: ノートカウンター;
  }
  p.note::marker {
    内容: "メモ " counter(note-counter) ":";
    色: 青;
    フォントの太さ: 太字;
  }
</スタイル>
<p>zhaodao88.com ビジネスチャンスを見つける</p>
<p class="note">zhaodao88.com 購入品の検索</p>
<p>zhaodao88.com つながりを見つける</p>

効果は次のようになります:

もちろん、上記の効果と同様に、マーカーのフォントスタイル、色、その他の属性を設定することもできますli::marker { color: blue; font-weight:bold; }

現時点では、 marker疑似要素で使用できるのは以下の属性のみであることに注意してください。

すべてのフォントスタイル: フォント関連
空白プロパティ
色属性
text-combine-upright、unicode-bidi、方向プロパティ
コンテンツ属性
すべてのアニメーションとトランジションのプロパティ

マークアップでwhite-space: preを使用すると、効果が得られない可能性があることを示唆する問題があります。text text-space-collapse: preserve-spacesとtext-space-trim: discard-afterを併用して、目的の効果を実現してみてください。ご興味がある場合は、問題 4448と問題 4891に移動してください。

タグコンテンツを埋めるためにlist-style-imageを使用する

マーカー画像を指定します。リスト項目の内容が正常の場合、リスト項目のマーカーが指定した画像で塗りつぶされます。

list-style-imageの通常の値は<image> | noneです。定義されていない場合はnoneになります。これはリスト項目list-itemsに適用されます。ここで、 <image>はマーカー画像のurlを指定するために使用されます。参考リンク

以下は、指定されたリンクのellipse.pngイメージを<li>タグブロックに埋め込む使用例です。

li { リストスタイルの画像: url("http://www.example.com/ellipse.png") }

タグコンテンツを入力するには、リストスタイルのテキストタイプを使用します。

マーカー文字列を指定します。リスト項目の内容が正常な場合は、リスト項目マーカーを指定された文字列で埋めます。

list-style-typeの通常の値は<counter-style> | <string> | noneです。定義されていない場合はdisc(圓形標記符)となり、リスト項目list-itemsに適用されます。参考リンク

<counter-style>は CSS で定義されたカウンタースタイルであり、開発者はcounterのスタイルをカスタマイズできます。例えば：

@counter-style サムネイル {
 システム：循環的;
 シンボル: "\1F44D";
 接尾辞: " ";
}

ul {
  リスト スタイル タイプ: サムネイル;
}

特定の<counter-style>定義ルールのリファレンス

以下はlist-style-typeの使用例です (要素がリスト要素でない場合は、要素の display を list-item に設定する必要があります)

ul { list-style-type: "★"; } // "★" をマーカーとして使用します p.note { // 対象要素がリスト要素でない場合は、要素の表示を list-item に設定する必要があります
  表示: リスト項目;
  list-style-type: "注記: ";
  リストスタイルの位置: 内側;
}

ol { list-style-type: upper-roman; } // 大文字のローマ数字として定義されています ul { list-style-type: symbols(cyclic '○' '●'); } // マーカーは '○' と '●' の間で切り替わります ul { list-style-type: none; } // マーカーは表示されません

知らせ

::marker疑似要素タグは、 chromeを含むすべてのブラウザでサポートされているわけではありません。Chrome では、 experimental Web Platformを有効にすることでバージョン 80 以降でのみサポートされます。効果をテストしたい場合は、 chrome://flagsにアクセスして、 experimental Web Platformを有効にしてください。実際のプロジェクトではこのルールを使用することはお勧めしません。マークアップブロックスタイルを設定するには、従来の方法を使用することをお勧めします。

要約する

リストはフロントエンドプロジェクトで非常に一般的であり、幅広いアプリケーションシナリオがあります。個人的には、 ::marker疑似要素はlist-style-imageとlist-style-text補足であると考えています。これら 3 つはすべて、マーカーブロックの塗りつぶしコンテンツを定義します。image imageに重点を置き、 text文字列に重点を置き、 ::marker font 、 color 、その他のスタイルを定義でき、それぞれに独自の特性があります。

参照する

https://www.w3.org/TR/2020/WD-css-lists-3-20200709
https://developer.mozilla.org/en-US/docs/Web/CSS/::マーカー

CSS リストモデルでのマーカータグの使用に関するこの記事はこれで終わりです。CSS マーカータグに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: WebデザイナーがRetinaディスプレイデバイス向けの画像を作成する方法

>>: vue.js ベースの QQ チャットルーム