list-style-position/マーカー位置

説明

　list-style-positionはリストマーカーの開始位置をテキスト開始位置と合わせるのかテキスト開始位置の外にするのか設定出来ます。

構文

　list-style-positionプロパティの構文は以下の通りです。

list-style-position: 位置;

　位置は2つ設定が出来ます。

　outsideはテキスト開始位置の外にリストマーカーを配置します。これがデフォルトです。

　insideはテキスト開始位置にリストマーカーを配置します。

利用例

　list-style-positionの記号利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

ul {
list-style-position: inside;
}

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

　上記を表示すると以下になります。

　テキスト開始位置にマーカーが配置されます。

　デフォルトのoutsideでは以下のようにマーカーが左の方に配置されます。

表(テーブル)での利用

　番号無リストの<ul>タグや番号付きリストの<ol>タグではデフォルトで左にpaddingが大きく入るため、これをpadding:0;等で打ち消したり小さくする事があります。

　この場合、デフォルトのoutsideのまま表の中で使うと以下のようにセルの外にマーカーが配置される可能性があります。

　outsideはテキスト開始位置より左にマーカーを表示するためです。IE7等古いブラウザではこの状態でもセルの中に表示される可能性があります。

　セルの外に表示された時はinsideを指定するとセルの中にマーカーが配置されます。

関連ページ

・ホームページ作成「HTMLへのリスト項目挿入と装飾」

　リスト項目の設定方法や装飾の方法等を説明しています。

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る