説明
リストマーカーの設定は個別に以下の設定が可能ですが、list-styleはこれらの設定を一括で行えます。
- ・list-style-type
- リストマーカー記号や番号
- ・list-style-position
- リストマーカー位置
- ・list-style-image
- リストマーカー画像
list-styleプロパティを使うとリストマーカーの種類、位置、画像の設定を一括で指定出来ます。
リストマーカーの設定は個別に以下の設定が可能ですが、list-styleはこれらの設定を一括で行えます。
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>
上記を表示すると以下になります。
設定の詳細と利用例は以下をご参照下さい。
・ホームページ作成「HTMLへのリスト項目挿入と装飾」
リスト項目の設定方法や装飾の方法等を説明しています。
・ホームページ作成「スタイルシートの定義方法」
外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ