リストスタイルジェネレーター

ライブプレビューでCSSリストスタイルを生成します。標準の箇条書き、番号、絵文字、カスタム画像などから選択できます。CSSコードを即座にコピーできます。完全にクライアントサイドで動作します。

16px
40px
1.6
プレビュー
  • Item 1
  • Item 2
  • Item 3
サンプルアイテム
CSSコード

CSSリストスタイルジェネレーターについて

CSSのlist-styleはリスト項目のマーカーの表示方法を制御します。このジェネレーターは、すべての標準CSSリストタイプをプレビューし、絵文字、アイコン、または画像でカスタムマーカーを作成できます。生成されたCSSは、::marker疑似要素を使用して、フォールバックサポート付きでモダンなブラウザに対応します。

機能

よくある質問

CSSの::marker疑似要素とは何ですか？

::marker疑似要素は、リスト項目のマーカーボックスをターゲットにします。箇条書きや番号をカスタムの色、フォント、サイズでスタイル設定できます。モダンなブラウザは::markerをサポートしていますが、ジェネレーターは古いブラウザのために標準のlist-styleプロパティを使用したフォールバックCSSも提供します。

カスタム画像をリストマーカーとして使用できますか？

はい、list-style-imageプロパティまたはcontentを使用した::marker疑似要素のいずれかを使用できます。ジェネレーターは両方のアプローチをサポートしています。最良の結果を得るには、小さなSVGまたはPNG画像（16x16pxから24x24px）を使用してください。

::markerをサポートするブラウザはどれですか？

::marker疑似要素は、Chrome 86+、Firefox 68+、Safari 11.1+、Edge 86+を含むすべてのモダンなブラウザでサポートされています。古いブラウザの場合、ジェネレーターは標準のlist-styleプロパティを使用したフォールバックCSSを提供します。

リストの番号の色を変更するにはどうすればよいですか？

colorプロパティを使用した::marker疑似要素を使用します。生成されたCSSはこれを自動的に含みます。順序付きリストの場合、これはリスト項目のテキストを元の色のままにしながら、番号の色を変更します。