スタイルシートリファレンス > list-style-position

スタイルシートリファレンス list-style-position


list-style-position マーカーの位置を指定する (IE4/N6)

<ul><ol><li>タグで表示される、マーカーの位置を指定します。

outside
外側:規定値
inside
内側(文章が折り返された時に、インデント(字下げ)がされません。)

▲ページ先頭へ

使用例 list-style-position

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.smp1 {
list-style-position: outside;
}
.smp2 {
list-style-position: inside;
}
-->
</style>
</head>
<body>
outside
<ul class="smp1">
<li>リスト1<br>このように、表示されます。</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<br>
inside
<ul class="smp2">
<li>リスト1<br>このように、表示されます。</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


list-style-position: outside;


list-style-position: inside;




▲ページ先頭へ

関連項目【リスト】

list-style
マーカーの指定をまとめて行う
list-style-type
マーカーの形を指定する
list-style-position
マーカーの位置を指定する
list-style-image
マーカーに画像を指定する
marker-offset ※
マーカとリストアイテムとの距離を指定する

▲ページ先頭へ

スタイルシートリファレンス > list-style-position