![見出し画像](https://assets.st-note.com/production/uploads/images/21594795/rectangle_large_type_2_16aa102211905d64692d5a9b1ad02f13.jpeg?width=1200)
継続は力なり#27
行頭記号を画像にする
「list-style-image プロパティ」を使用すると、行頭記号を画像に変えることができる
以下が指定できる値になり、画像は「url(〜)」の書式で指定
list-style-image に指定できる値
・url(画像のアドレス)
指定した画像を行頭記号として表示させる
・none
画像を行頭記号として表示させない
例
HTML
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
CSS
ul { list-style-image: url(triangle.gif); }
行頭記号の表示位置を設定する
「list-style-position プロパティ」を使用すると、行頭記号の表示位置を、テキストを表示させる領域の先頭部分に変更できる
以下の値を指定できる
list-style-positionに指定できる値
・outside
テキストを表示させる領域の外側に行頭記号を表示させる
・inside
テキストを表示させる領域の内側に行頭記号を表示させる
行頭記号の位置を変更しても、項目内のテキストが1行だと違いがわからない
以下のサンプルのようにテキストが複数行になると、行頭記号の位置の違いがわかる
例
HTML
<ul id="sample1">
<li>行頭記号の表示位置として「outside」を指定しています。</li>
<li>行頭記号の表示位置として「outside」を指定しています。</li>
</ul>
<ul id="sample2">
<li>行頭記号の表示位置として「inside」を指定しています。</li>
<li>行頭記号の表示位置として「inside」を指定しています。</li>
</ul>
CSS
#sample1 { list-style-position: outside; }
#sample2 { list-style-position: inside; }
リスト関連プロパティの一括指定
「list-style プロパティ」を使用すると、リスト関連プロパティの値を任意の順ででまとめて一括で指定できる
必要な値を半角スペースで区切って指定する
「none」を指定すると、「list-style-type」と「list-style-image」の両方の値が「none」に設定される
list-styleに指定できる値
・list-style-typeの値
list-style-typeに指定できる値を指定できる
・list-style-imageの値
list-style-imageに指定できる値を指定できる
・list-style-positionの値
list-style-positionに指定できる値を指定できる
例
HTML
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
CSS
ul { list-style: url(triangle.gif) square; }