説明
リストマーカーの設定は個別に以下の設定が可能ですが、list-styleはこれらの設定を一括で行えます。
- ・list-style-type
- リストマーカー記号や番号
- ・list-style-position
- リストマーカー位置
- ・list-style-image
- リストマーカー画像
初心者向けにホームページ作成、公開、SEO対策からアフィリエイトの導入方法まで解説しています。
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プロパティ一覧」に戻る
色と背景
テキスト
ボックス余白一括
表示と配置
リスト
テーブル
★上ページに含まれるプロパティ