【CSS Modules】list-style-positionプロパティの使い方

list-style-positionプロパティは、HTMLのリスト要素（<ul>や<ol>など）で使われる、リスト項目のマーカー（箇条書きの記号や数字）が、そのリスト項目のテキストに対してどこに配置されるかを制御するプロパティです。このプロパティを使用することで、マーカーがテキストの内側に含まれるように表示されるか、それともテキストの外側に独立して配置されるかを指定し、リストのレイアウトを細かく調整できます。

主に二つの値を取ります。一つはoutsideです。これはこのプロパティの初期値でもあり、マーカーをリスト項目のテキストボックスの外側に配置します。この設定では、マーカーはテキストの左端から少し離れた位置に表示され、リスト項目のテキストはマーカーの右側から揃って開始されます。これにより、リスト項目が複数行にわたる場合でも、テキストの左端が一直線に揃い、非常に読みやすい配置となります。

もう一つはinsideです。この値を指定すると、マーカーはリスト項目のテキストボックスの内側に配置されます。マーカーはテキストの一部として扱われるため、テキストはマーカーの右隣から始まり、リスト項目全体のインデントに合わせてマーカーも一緒に内側に移動します。この設定は、マーカーを含めて全体をコンパクトにまとめたい場合や、テキストの先頭に直接記号が付いているようなデザインにしたい場合に有効です。

list-style-positionプロパティは、ウェブサイトにおける箇条書きの見た目を決定する重要な要素の一つであり、コンテンツの可読性やデザインの意図を正確に表現するために活用されます。リストの視覚的な整合性を保ち、ユーザーエクスペリエンスを向上させる上で欠かせないプロパティと言えるでしょう。

Copy
1selector {
2  list-style-position: outside;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません