list-style/リストマーカー全般

list-styleプロパティを使うとリストマーカーの種類、位置、画像の設定を一括で指定出来ます。

説明

 リストマーカーの設定は個別に以下の設定が可能ですが、list-styleはこれらの設定を一括で行えます。

・list-style-type
リストマーカー記号や番号
・list-style-position
リストマーカー位置
・list-style-image
リストマーカー画像

構文

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

list-style: 種類 位置 url(画像ファイル名、又はURL);

 種類、位置、urlはどれも省略可能で、省略した場合はデフォルトが採用されます。

 マーカー種類は記号としては以下が指定出来ます。

【マーカー種類記号の指定】
記号 説明 表示例
disc 黒丸(デフォルト)
square 黒四角
circle 白丸
none なし

 マーカー種類は番号としては以下が指定出来ます。

【マーカー種類番号の指定】
番号種類 説明 表示例
decimal 10進数(デフォルト)
decimal-leading-zero 10進数
1桁の場合は先頭に0
lower-roman ローマ字小文字
upper-roman ローマ字大文字
lower-alpha アルファベット小文字
upper-alpha アルファベット大文字
lower-greek ギリシャ文字小文字
none なし
hiragana ひらがな
あいうえお順
katakana カタカナ
アイウエオ順
cjk-ideographic 漢字
hiragana-iroha ひらがな
いろはにほへと順
katakana-iroha カタカナ
イロハニホヘト順

 ひらがな(あいうおえ順)以降はInternetExplorer等、ブラウザによっては表示されません。

 位置は以下の2つから設定出来ます。

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

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

 画像ファイル名はtest.png等です。異なるディレクトリの場合はimage/test.png、親ディレクトリの場合は../test.png等になります。

 URLで指定する場合はhttp://example.com/test.png等となります。http://を付ける事でURLと認識されます。

利用例

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

ul {
list-style: square inside url(test.png);
}

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

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

  • リスト
  • リスト
  • リスト

 マーカーの記号より画像が優先されます。もし、画像の指定が間違っていた場合は指定したマーカーの記号が表示されます。

 もう1つ例を示します。

ol {
list-style: lower-alpha outside;
}

<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>

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

  1. リスト
  2. リスト
  3. リスト

設定の詳細

 設定の詳細と利用例は以下をご参照下さい。

関連ページ

・ホームページ作成「リスト項目の挿入

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

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

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

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

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

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

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)