項 目 | 説 明 |
---|---|
記述形式 | セレクタ {list-style-position: 値 } |
値 の形式 | inside,hanging,outside |
初 期 値 | outside |
対応ブラウザー | C1+ / e4+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
適用可能な要素 | <ul>, <ol>, <li> などのリストアイテム要素 (display プロパティの値が list-item である要素) |
継 承 | する |
list-style-positionプロパティ は,リスト・マーカーの表示位置 を指定します。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
inside | ::marker 擬似要素 は リスト項目のボックスの中で ::before 擬似要素 の直前に置かれたインライン・ブロック要素になり,それに要素のコンテンツが続きます。 |
hanging | リスト項目またはその子要素の最初のテキストまたは空白(significant whitespace)の直前に ::marker 擬似要素 が置かれることを除いて,inside と同様です。 マーカーにリスト項目が ぶら下がった形 になります。 |
outside | ::marker 擬似要素 の静的な水平位置が,マーカーの終端をリスト項目の親要素の開始端に揃えるように決められることを除いて,hanging と同様です。 (初期値) |
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css"> <!-- div.sample { width: 20em; margin: 10px; padding: 5px; border: 2px solid #8c8c8c ; } .lsp1 { list-style-position: outside; } .lsp2 { list-style-position: hanging; } .lsp3 { list-style-position: inside; } --> </style> |
HTML <body> ~ </body> |
<div class="sample"> <ul class="lsp1"> <li>項目1(通常の <li> 要素)</li> <li>項目2(通常の <li> 要素)</li> <li class="lsp1">項目3(lsp1クラスの <li> 要素)</li> <li class="lsp2">項目4(lsp2クラスの <li> 要素)</li> <li class="lsp3">項目5(lsp3クラスの <li> 要素)</li> </ul> </div> <div class="sample"> <ul class="lsp2"> <li>項目1(通常の <li> 要素)</li> <li>項目2(通常の <li> 要素)</li> <li class="lsp1">項目3(lsp1クラスの <li> 要素)</li> <li class="lsp2">項目4(lsp2クラスの <li> 要素)</li> <li class="lsp3">項目5(lsp3クラスの <li> 要素)</li> </ul> </div> <div class="sample"> <ul class="lsp3"> <li>項目1(通常の <li> 要素)</li> <li>項目2(通常の <li> 要素)</li> <li class="lsp1">項目3(lsp1クラスの <li> 要素)</li> <li class="lsp2">項目4(lsp2クラスの <li> 要素)</li> <li class="lsp3">項目5(lsp3クラスの <li> 要素)</li> </ul> </div> |
ブラウザー 表示例 |
---|
↑ {list-style-position: outside; } の表示
↑ {list-style-position: hanging; } の表示
↑ {list-style-position: inside; } の表示 |