リストマーカーの後のギャップについて知っておくべきことすべて

読んでました 「クリエイティブ リスト スタイリング」 Google の web.dev ブログで、 ::marker 記事のセクション。 組み込みのリスト マーカーは、箇条書き、序数、および文字です。 の ::marker 疑似要素を使用すると、これらのマーカーのスタイルを設定したり、カスタムの文字や画像に置き換えたりできます。

::marker { content: url('/marker.svg') ' ';
}

私の注意を引いた例では、SVG アイコンをリスト項目のカスタム マーカーとして使用しています。 ただし、単一のスペース文字 (" ") の横にある CSS 値 url() 関数。 このスペースの目的は、カスタム マーカーの後にギャップを挿入することのようです。

このコードを見たとき、ギャップを作成するためのより良い方法があるのではないかとすぐに思いました。 にスペースを追加する content 最適な解決策というよりも、回避策のように感じます。 CSS が提供する margin & padding ページ上の要素の間隔を空けるその他の標準的な方法。 この状況では、これらのプロパティのどれも使用できませんか?

最初に、スペース文字を適切な余白に置き換えようとしました。

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

これはうまくいきませんでした。 それが判明したとして、 ::marker のみをサポートします 主にテキスト関連の CSS プロパティの小さなセット. たとえば、次のように変更できます。 font-size & color を設定し、カスタム マーカーを定義します。 content 上記のように、文字列または URL に変換します。 しかし margin & padding プロパティは サポートされていませんであるため、それらを設定しても効果はありません。 なんて失望でしょう。

カスタム マーカーの後にギャップを挿入する唯一の方法はスペース文字でしょうか? 私は調べる必要がありました。 このトピックについて調査したところ、この記事で共有したい興味深い発見がいくつかありました。

パディングとマージンの追加

まずは確認してみましょう margin & padding で行う <ul> & <li> 要素。 この目的のためにテストページを作成しました。 関連するスライダーをドラッグして、リスト マーカーの両側の間隔への影響を観察します。 ヒント: リセット ボタンを自由に使用して、すべてのコントロールを初期値にリセットします。

注： ブラウザはデフォルトを適用します padding-inline-left of 40px 〜へ <ol> & <ul> 要素。 論理的な padding-inline-left プロパティは物理的なものと同等です padding-left 左から右のインライン方向を持つ書記体系のプロパティ。 この記事では、わかりやすくするために物理プロパティを使用します。

あなたが見ることができるように、 padding-left on <li> リストマーカーの後のギャップを増やします。 他の XNUMX つのプロパティは、マーカーの左側の間隔、つまりリスト項目のインデントを制御します。

リスト項目の padding-left is 0px、マーカーの後にまだ最小ギャップがあります。 このギャップは margin or padding. 最小ギャップの正確な長さは、ブラウザーによって異なります。

要約すると、リスト項目のコンテンツは、マーカーからブラウザ固有の最小距離に配置されます。このギャップは、 padding-left 〜へ <li>.

次に、マーカーを配置するとどうなるか見てみましょう 内部 リスト項目。

リスト項目内でのマーカーの移動

　 list-style-position プロパティは次の XNUMX つのキーワードを受け入れます。 outside、これがデフォルトです。 inside、リスト項目内でマーカーを移動します。 後者は、全幅のリスト アイテムを含むデザインを作成する場合に便利です。

マーカーが現在の場合 内部 リストアイテム、これは padding-left on <li> マーカーの後のギャップを増やさなくなりましたか? 確認してみましょう。 私のテストページで、オンにします list-style-position: inside チェックボックスを介して。 XNUMX人はどうですか padding & margin この変更の影響を受けるプロパティ?

あなたが見ることができるように、 padding-left on <li> 間隔を 左 マーカーの。 これは、マーカーの後のギャップを増やす能力を失ったことを意味します。 このような状況では、追加できると便利です margin-right ::marker それ自体ですが、上で確立したように、それは機能しません。

さらに、 クロムのバグ これにより、マーカーの後のギャップが トリプル に切り替えた後 inside ポジショニング。 デフォルトでは、ギャップの長さはテキスト サイズの約 XNUMX 分の XNUMX です。 だからデフォルトで font-size of 16px、ギャップは約です 5.5px. に切り替えた後 inside、ギャップが完全に拡大します 16px クロムで。 このバグは disc, circle, square マーカーですが、 序数マーカーではありません.

次の図は、macOS の XNUMX つの主要なブラウザーでの外側および内側に配置されたリスト マーカーの既定のレンダリングを示しています。 便宜上、ギャップ サイズの違いを比較しやすくするために、すべてのリスト アイテムをマーカー上で水平方向に配置しました。

要約すると、に切り替えます list-style-position: inside XNUMX つの問題を紹介します。 ギャップを広げることはできなくなりました padding-left on <li>、ブラウザ間でギャップのサイズに一貫性がありません。

最後に、デフォルトのリスト マーカーをカスタム マーカーに置き換えるとどうなるか見てみましょう。

カスタム マーカーへの切り替え

を定義するには XNUMX つの方法があります。 カスタムマーカー:

• list-style-type & list-style-image プロパティ
• content プロパティ ::marker 疑似要素

　 content プロパティはより強力です。 たとえば、 counter() リスト項目の序数にアクセスする関数 ( 暗黙 list-item カウンタ) カスタム文字列で装飾します。

残念ながら、Safari は content 上のプロパティ ::marker まだ （WebKitのバグ）。 このため、私は list-style-type プロパティを使用してカスタム マーカーを定義します。 あなたはまだ使用することができます ::marker 経由で宣言されたカスタム マーカーをスタイルするセレクター list-style-type. その側面 ::marker Safari でサポートされています。

すべての Unicode 文字がカスタム リスト マーカーとして機能する可能性がありますが、実際に正式名に「箇条書き」が含まれているのはごく一部の文字セットのみなので、参考のためにここにまとめておきます。

文字	名前	コードポイント	CSS キーワード
•	弾丸	U+2022	disc
‣	三角弾丸	U+2023
⁃	ハイフンブレット	U+2043
⁌	黒い左弾丸	U+204C
⁍	黒の右向きの弾丸	U+204D
◘	逆弾丸	U+25D8
◦	白い弾丸	U+25E6	circle
☙	逆回転フローラル ハート ブレット	U+2619
❥	回転したヘビー ブラック ハート ブレット	U+2765
❧	回転した花のハートの弾丸	U+2767
⦾	丸で囲まれた白い弾丸	U+29BE
⦿	丸付きの箇条書き	U+29BF

注： CSS square キーワードには、対応する Unicode の「箇条書き」文字がありません。 一番近い文字は黒い小さな四角 (▪️) の絵文字 (U+25AA).

デフォルトのリストマーカーを次のように置き換えるとどうなるか見てみましょう list-style-type: "•" (U+2022 銃弾）。 これはデフォルトの弾丸と同じ文字であるため、レンダリングに大きな違いはないはずです。 私のテストページで、 list-style-type オプションを選択して、マーカーへの変更を観察します。

ご覧のとおり、XNUMX つの重要な変更点があります。

1. マーカーの後に最小ギャップがなくなりました。
2. 弾丸が小さくなり、まるで小さくレンダリングされたかのように font-size.

による CSS カウンター スタイル レベル 3、デフォルトのリスト マーカー (disc）は「に似ている必要があります• U+2022 銃弾"。 ブラウザーは、デフォルトの箇条書きのサイズを大きくして読みやすくしているようです。 Firefox は特殊なフォントを使用しており、 -moz-bullet-font、マーカーの場合。

サイズが小さい問題は CSS で解決できますか? テスト ページで、マーカー スタイルをオンにして、 font-size, line-height, font-family マーカーの。

ご覧のとおり、 font-size カスタム マーカーが垂直方向にずれます。これは、値を小さくしても修正できません。 line-heightを選択します。 vertical-align この問題を簡単に修正できるプロパティは、 ::marker.

しかし、あなたは font-family マーカーが大きくなる可能性がありますか？ に設定してみてください Tahoma. これは、小さなサイズの問題に対する十分な回避策になる可能性がありますが、主要なブラウザーやオペレーティング システムでどのフォントが最適に機能するかはテストしていません。

また、リスト アイテム内にマーカーを配置しても、Chromium のバグが発生しなくなったことに気付いたかもしれません。 これは、カスタム マーカーがこのバグの回避策として役立つことを意味します。 そして、これが主な問題と、私がこのトピックの研究を始めた理由につながります。 カスタム マーカーを定義してリスト項目内に配置すると、マーカーの後にギャップがなくなり、標準的な方法でギャップを挿入する方法がなくなります。

1. カスタム マーカーの後に最小ギャップはありません。
2. ::marker サポートしていません padding or margin.
3. padding-left on <li> マーカーが配置されているため、ギャップは増加しません inside.

まとめ

この記事で言及したすべての重要な事実の要約は次のとおりです。

1. ブラウザはデフォルトを適用します padding-inline-start of 40px 〜へ <ul> & <ol> 要素。
2. 組み込みのリスト マーカー (disc, decimalなど）。 カスタム マーカー (文字列または URL) の後に最小ギャップはありません。
3. を追加することで、ギャップの長さを増やすことができます。 padding-left 〜へ <ul>、ただし、マーカーがリスト項目の外側に配置されている場合のみ (デフォルト モード)。
4. カスタム文字列マーカーの既定のサイズは、組み込みのマーカーよりも小さくなっています。 の変更 font-family on ::marker サイズを大きくすることができます。

まとめ

記事冒頭のコード例を振り返ってみると、なぜスペース文字が含まれているのか理解できたと思います content 価値。 SVG マーカーの後にギャップを挿入するより良い方法はありません。 量がないため、必要な回避策です。 margin & padding リスト項目内に配置されたカスタム マーカーの後にギャップを作成できます。 あ margin-right on ::marker 簡単に実行できますが、サポートされていません。

まで ::marker より多くのプロパティのサポートが追加されたため、Web 開発者は多くの場合、マーカーを非表示にしてそれをエミュレートするしかありません。 ::before 疑似要素。 マーカーを変更できなかったので、最近自分でやらなければなりませんでした background-color. 願わくば、より強力な ::marker 疑似要素。

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/