Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

CSSプロパティ

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

LISTリストTOPCSSPropertiesList

  1. list-style-typeリストマーカーの種類
  2. list-style-positionリストマーカーの位置
  3. list-style-imageリストマーカーに使用する画像
  4. list-styleリストスタイルのショートハンドプロパティ

list-style-positionリストマーカーの位置

プロパティの値inside | outside | inherit
初期値outside
対象要素display: list-item'の値を持つ要素
継承する
%無効
メディアvisual
W3C Ref.CSS2.1CSS3

プロパティの書式と機能

リスト項目で使用するマーカーの位置(リスト領域に含めるか含めないか)を指定します。 リスト内で文章が折り返した場合の字下げの有無にも影響します。

プロパティの書式機能(リストマークの位置)
list-style-position: outside字下げ有り
list-style-position: inside字下げ無し
list-style-position: inherit継承

EXAMPLE

<ul>
	<li.inside>いちご</li>		クラスにinsideを指定
	<li.outside>みかん</li>		クラスにoutsideを指定
</ul>
ul		{list-style-type: decimal}
ul li.inside	{list-style-position: inside}	値にinsideを指定
ul li.outside	{list-style-position: outside}	値にoutsideを指定

insideとoutsideでは、下のようにリスト範囲に違いが生じることが確認できます。

  • いちご
  • みかん
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.