list-style-positionプロパティの説明
CSSのlist-style-positionプロパティは、リスト項目の先頭に表示されるマーカーの位置を指定します。マーカーはリスト項目の内側に生成される::markerという擬似要素によって配置されます。
本プロパティは、この擬似要素を<li>のコンテンツ・エリアの内側に収めるか、外側に出すかの2種類から選択するものです。つまり、マーカーの細かい位置を調整するものではなく、リスト項目のマーカーをどのようなルールで配置するかの基準を示すものです。
list-style-positionの適用対象はリスト項目です。具体的には、displayプロパティにlist-itemの値を持つ要素で、既定値では<li>に当たります。ただし、本プロパティの値は継承するので、全てのリスト項目に対して指定する必要はなく、親要素の<oi>や<ul>へ指定すれば、全てのリスト項目に適用されます。
list-styleまたはlist-style-typeの値がnoneだった場合は、::markerが生成されなくなるため、このプロパティは意味を失います。
リスト・マーカーの位置調整が上手く行かない場合は、リスト自体が生成するボックスと、リスト項目が生成するボックス、そしてリスト・マーカーが所属している位置を分解して考えましょう。ボックスという言葉の意味が分からない方は、CSSのボックス・モデルの解説を参照して下さい。
その他、CSSでリストをデザインするテクニックは、CSSリファレンスで詳しく解説しています。入れ子構造、開閉できる多段式のリスト、横並びのレイアウトの具体的なサンプルも参照できます。
list-style-positionに指定できる値
outside- リスト項目の最初の要素として生成された
::markerは、<li>のコンテンツ・エリアの外部に配置されます。この時、マーカーはリスト項目のパディング・ボックスおよびボーダー・ボックスの外側に所属します。 inside- リスト項目の最初の要素として生成された
::markerは、<li>のコンテンツ・エリアの内部に配置されます。この時、マーカーはリスト項目のパディング・ボックスおよびボーダー・ボックスの内側に所属します。
list-style-positionの使い方とサンプルコード
list-style-positionプロパティの構文は以下の通りです。
/* キーワード値 */
list-style-position: outside;
list-style-position: inside;
/* グローバル値 */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: unset;
list-style-positionの実例
それでは実際にlist-style-positionプロパティの書き方を見ていきましょう。以下の例は、マーカーの異なるリストを並べてlist-style-positionの値を変えた場合の比較です。マーカーの位置は上の段がoutside、下の段がinsideです。
<div class="samp_box">
<section id="ls_1" class="outside">
<h1>circle outside</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>
<section id="ls_2" class="outside">
<h1>decimal outside</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>
<section id="ls_3" class="outside">
<h1>image outside</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>
<section id="ls_4" class="inside">
<h1>circle inside</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>
<section id="ls_5" class="inside">
<h1>decimal inside</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>
<section id="ls_6" class="inside">
<h1>image inside</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>
</div>
.samp_box {
display: grid;
grid-template: repeat(2, auto) / repeat(3, 1fr);
gap: 1rem;
padding: 1rem;
background-color: #eee;
}
.samp_box > section {
padding: .5rem;
background-color: #fff;
}
section > h1 {
margin: 0;
font-size: 1rem;
}
.outside ul {
list-style-position: outside;
}
.inside ul {
list-style-position: inside;
}
#ls_1 ul {
list-style-type: circle;
}
#ls_2 ul {
list-style-type: decimal;
}
#ls_3 ul {
list-style-image: url(/images/sample_list_marker.png);
}
#ls_4 ul {
list-style-type: circle;
}
#ls_5 ul {
list-style-type: decimal;
}
#ls_6 ul {
list-style-image: url(/images/sample_list_marker.png);
}
リスト・マーカーの位置を確認する
リスト・マーカーの所在を分かりやすくするために、リストを構成する要素に色をつけてみましょう。上記のサンプルを応用して、リスト自体のボックスとリスト項目のボックスを可視化します。
ここでは、リスト自体のボックスに緑の背景色を指定し、リスト項目のボックスに青系統の背景色を指定しました。余白のプロパティは省略しているため、paddingおよびmarginは既定値が適用されています。
上記の通り、ボックスの構造を可視化すれば、リスト・マーカーの位置調整を行うために何をすべきかが見えてきます。ここで<ul>のパディングを0にすれば、outsideのリスト・マーカーは行の先頭からはみ出し、insideのリスト・マーカーは行の先頭に揃います。マーカーそのものが不要であれば、list-style-typeプロパティの値をnoneにしましょう。
リスト項目のマーカーがずれる問題
リスト項目の中にリンクなどの子要素を設置すると、マーカーがずれて表示されることがあります。これは、子要素のdisplayプロパティがblockだった場合に起こるもので、::markerのレンダリングが、ブロック要素の振舞いに衝突していることが原因です。
マーカーの描画に::markerを採用していないブラウザでは正常に表示されるため、ブラウザ側の不具合であると勘違いしたり、表示の崩れを見逃してしまうことがあります。
具体的な解決方法は、CSSでリストをデザインするための完全ガイドで解説しています。これらの仕様を理解することで、柔軟にリストを扱えるようになります。