| 属性名 | list-style-position |
|---|---|
| 値 | outside | inside | hanging |
| 初期値 | outside |
| 適用可能要素 | li などのリストアイテム要素 |
| 継承 | 継承する。 |
| メディア | Visual / List |
| サポート | C1 / e4 / N4 / Fx1 / Ch1 / Op3.5 / Sa1 |
リストのスタイルを指定します。
| 値 | 説明 |
|---|---|
| outside | マーカーを文章よりも左側の位置に表示します。 |
| inside | マーカーを文章と同じインデント位置に表示します。 |
| hanging | CSS3で追加検討されています。サポートしているブラウザはまだありません。 |
.sample-outside {
list-style-position: outside;
border: 1px solid #999999;
width: 250px;
}
.sample-inside {
list-style-position: inside;
border: 1px solid #999999;
width: 250px;
}
<h5>outside</h5> <ul class="sample-outside"> <li>秋の田の仮庵の庵の苫をあらみ わが衣手は露にぬれつつ <li>春過ぎて夏来にけらし白妙の 衣ほすてふ天の香具山 <li>あしひきの山どりの尾のしだり尾の ながながし夜をひとりかもねむ </ul> <h5>inside</h5> <ul class="sample-inside"> <li>秋の田の仮庵の庵の苫をあらみ わが衣手は露にぬれつつ <li>春過ぎて夏来にけらし白妙の 衣ほすてふ天の香具山 <li>あしひきの山どりの尾のしだり尾の ながながし夜をひとりかもねむ </ul>