list-style/CSS/HTMLの基本を学ぶ/ウェブ作成に役立つ情報サイト/It's a long way to the top

list-style

Home>CSS>プロパティリファレンス>list-style

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

list-styleプロパティの役割

list-styleプロパティは、リスト項目の先頭に表示されるマークの表示設定をまとめて指定します。

list-styleプロパティは、list-style-imageプロパティlist-style-positionプロパティlist-style-typeプロパティの3つを一度に指定できます。

list-styleプロパティに設定できる値

各値は、順不同です。
各値と値の間に半角のスペースをひとつあけます。

list-style-imageプロパティの値

url() ()の中に画像までのパスを記述。

list-style-positionプロパティの値

inside マークをリスト項目の内側に表示する。
outside マークをリスト項目の外側に表示する。初期値。

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

armenian アルメニア文字の数字。
circle 白丸。
cjk-ideographic 漢数字。一, 二, 三...
decimal 算用数字。1, 2, 3...
decimal-leading-zero 先頭にゼロをつけた数字。01, 02, 03...
disc 黒丸。
georgian グルジア文字の数字。
hebrew ヘブライ文字の数字。
hiragana 平仮名。あ, い, う...
hiragana-iroha 平仮名のいろはで表示。い, ろ, は...
katakana 片仮名。ア, イ, ウ...
katakana-iroha 片仮名のイロハで表示。イ, ロ. ハ...
lower-alpha 小文字のローマ数字。i, ii, iii...
lower-greek 小文字のギリシア文字。α, β, γ...
lower-latin 小文字のローマ数字。i, ii, iii...
lower-roman 小文字のアルファベット。a, b, c...
square 黒い四角。
upper-alpha 大文字のローマ数字。I, II, III...
upper-latin 大文字のローマ数字。I, II, III...
upper-roman 大文字のアルファベット。A, B, C...

list-styleプロパティの使い方

<ul style="list-style:url(../../../data/img/global/sample-dot.gif) square outside">
<li>項目1</li>
<li>項目2</li>
</ul>

  • 項目1
  • 項目2

上記のサンプルでは、リスト項目の先頭に表示される画像を「sample-dot.gif」に指定し(画像がない場合は■マークを表示)、項目の外側にマークを表示するような指定を一括して行っています。

関連リンク

よく読まれている記事

UpDate:2010-8-23