目次 < プロパティ一覧 戻る 使用例

バナー

中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

list-style

list-styleプロパティは、リストの先頭に表示するマーカーを一括指定します。


(value)

以下で指定する値を半角の空白を空けて記述します。

inherit親要素からの継承
適用要素リスト要素display プロパティで list-item に指定されている要素。
初期値list-style-type/image/position の各プロパティ参照
継承します。

list-style-type プロパティプロパティ

list-style-typeプロパティは、リストの先頭に表示するマーカーの型を指定します。


(value)
disc(黒丸)順不動リストで使用
  • 形は、UA依存。
  • 使用例を参照してください。
circle(円)
square(四角)
decimal順序リストで使用
  • 番号付けは、UA依存。
  • UAにより、反映されないプロパティ値があります。
  • 使用例を参照してください。
decimal-leading-zero
lower-roman
upper-roman
georgian
armenian
lower-latin
upper-latin
lower-alpha
upper-alpha
nonelist-style-typeプロパティを使用しません。
inherit親要素からの継承
適用要素リスト要素displayプロパティでlist-itemに指定されている要素。
初期値順不動リスト:disc 順序リスト:decimal
継承します。

list-style-imageプロパティ

list-style-imageプロパティは、順不動リストで、リストの先頭に表示するマーカーイメージを指定します。


(value)
url("URI")マーカーイメージのURIを指定します。UAがそのイメージを使用できない場合は、無視されます。
nonelist-style-imageプロパティを使用しません。
inherit親要素からの継承
適用要素リスト要素displayプロパティでlist-itemに指定されている要素。
初期値none
継承します。

list-style-positionプロパティ

list-style-positionプロパティは、リストマーカーの表示位置を指定します。


(value)
insideリストを表示する要素の内側の先頭にマーカーを表示します。
outsideマーカーに続いて、リストを表示する要素を表示します。
inherit親要素からの継承
適用要素リスト要素displayプロパティでlist-itemに指定されている要素。
初期値outside
継承します。

使用例

HTML記述です。

XXXX 背景色と内枠線はリスト要素の範囲です。

HTML記述
<ul>
<li>とりなくこゑす ゆめさませ</li>
<li>みよあけわたる ひんかしを</li>
<li>そらいろはえて おきつへに</li>
<li>ほふねむれゐぬ もやのうち</li>
</ul>
表示例
  • とりなくこゑす ゆめさませ
  • みよあけわたる ひんかしを
  • そらいろはえて おきつへに
  • ほふねむれゐぬ もやのうち
HTML記述
<ol>
<li>とりなくこゑす ゆめさませ</li>
<li>みよあけわたる ひんかしを</li>
<li>そらいろはえて おきつへに</li>
<li>ほふねむれゐぬ もやのうち</li>
</ul>
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

上記例で UL/OL 要素を修飾して list-styleプロパティを検証します。

list-style-type : disc ;

HTML記述
<ul style="list-style-type:disc;">
表示例
  • とりなくこゑす ゆめさませ
  • みよあけわたる ひんかしを
  • そらいろはえて おきつへに
  • ほふねむれゐぬ もやのうち

list-style-type : circle ; 指定

HTML記述
<ul style="list-style-type:circle;">
表示例
  • とりなくこゑす ゆめさませ
  • みよあけわたる ひんかしを
  • そらいろはえて おきつへに
  • ほふねむれゐぬ もやのうち

list-style-type : square ; 指定

HTML記述
<ul style="list-style-type:square;">
表示例
  • とりなくこゑす ゆめさませ
  • みよあけわたる ひんかしを
  • そらいろはえて おきつへに
  • ほふねむれゐぬ もやのうち

list-style-type : decimal ; 指定

HTML記述
<ol style="list-style-type:decimal;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

list-style-type : decimal-leading-zero ; 指定

HTML記述
<ol style="list-style-type:decimal-leading-zero;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

list-style-type : lower-roman ; 指定

HTML記述
<ol style="list-style-type:lower-roman;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

list-style-type : upper-roman ; 指定

HTML記述
<ol style="list-style-type:upper-roman;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

list-style-type : georgian ; 指定

HTML記述
<ol style="list-style-type:georgian;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

list-style-type : armenian ; 指定

HTML記述
<ol style="armenian;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

list-style-type : lower-latin ; 指定

HTML記述
<ol style="list-style-type:lower-latin;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

list-style-type : upper-latin ; 指定

HTML記述
<ol style="list-style-type:upper-latin;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

list-style-type : lower-alpha ; 指定

HTML記述
<ol style="list-style-type:lower-alpha;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

list-style-type : upper-alpha ; 指定

HTML記述
<ol style="list-style-type:upper-alpha;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

list-style-image : url( "URI" ) ; 指定

HTML記述
<ul style="list-style-image:url('smp/lnk.png');">
表示例
  • とりなくこゑす ゆめさませ
  • みよあけわたる ひんかしを
  • そらいろはえて おきつへに
  • ほふねむれゐぬ もやのうち

list-style-position : inside ; 指定

HTML記述
<ol style="list-style-position:inside;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

list-style-position : outside ; 指定

HTML記述
<ol style="list-style-position:outside;">
表示例
  1. とりなくこゑす ゆめさませ
  2. みよあけわたる ひんかしを
  3. そらいろはえて おきつへに
  4. ほふねむれゐぬ もやのうち

目次 < プロパティ一覧 戻る Top

Created:Jun 01, 2005 Updated:Oct.,25,2011 © by おっちゃん
Oct.,25,2011 全面更新