CSS - list-style-position

トップ > CSSリファレンス > list-style-position

概要

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

説明

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

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

使用例

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

Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月3日
http://www.tohoho-web.com/css/prop/list-style-position.htm