CSS - list-style-position

概要

属性名	list-style-position
値	outside \| inside \| hanging
初期値	outside
適用可能要素	li などのリストアイテム要素
継承	継承する。
メディア	Visual / List
サポート	C1 / e4 / N4 / Fx1 / Ch1 / Op3.5 / Sa1

説明

リストのスタイルを指定します。

値	説明
outside	マーカーを文章よりも左側の位置に表示します。
inside	マーカーを文章と同じインデント位置に表示します。
hanging	CSS3で追加検討されています。サポートしているブラウザはまだありません。

使用例

CSS

.sample-outside {
    list-style-position: outside;
    border: 1px solid #999999;
    width: 250px;
}
.sample-inside {
    list-style-position: inside;
    border: 1px solid #999999;
    width: 250px;
}

HTML

<h5>outside</h5>
<ul class="sample-outside">
  <li>秋の田の仮庵の庵の苫をあらみ わが衣手は露にぬれつつ
  <li>春過ぎて夏来にけらし白妙の 衣ほすてふ天の香具山
  <li>あしひきの山どりの尾のしだり尾の ながながし夜をひとりかもねむ
</ul>
<h5>inside</h5>
<ul class="sample-inside">
  <li>秋の田の仮庵の庵の苫をあらみ わが衣手は露にぬれつつ
  <li>春過ぎて夏来にけらし白妙の 衣ほすてふ天の香具山
  <li>あしひきの山どりの尾のしだり尾の ながながし夜をひとりかもねむ
</ul>

表示

outside

秋の田の仮庵の庵の苫をあらみわが衣手は露にぬれつつ
春過ぎて夏来にけらし白妙の衣ほすてふ天の香具山
あしひきの山どりの尾のしだり尾のながながし夜をひとりかもねむ

inside

秋の田の仮庵の庵の苫をあらみわが衣手は露にぬれつつ
春過ぎて夏来にけらし白妙の衣ほすてふ天の香具山
あしひきの山どりの尾のしだり尾のながながし夜をひとりかもねむ

初版：1997年7月27日、最終更新：2012年5月3日

https://www.tohoho-web.com/css/prop/list-style-position.htm