見出し画像

継続は力なり＃２７

うちやましょうたろう/成り上がり

行頭記号を画像にする

「list-style-image プロパティ」を使用すると、行頭記号を画像に変えることができる

以下が指定できる値になり、画像は「url（〜）」の書式で指定

list-style-image　に指定できる値

・url（画像のアドレス）
指定した画像を行頭記号として表示させる

・none
画像を行頭記号として表示させない


例

HTML

<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

CSS

ul { list-style-image: url(triangle.gif); }

画像1


行頭記号の表示位置を設定する

「list-style-position プロパティ」を使用すると、行頭記号の表示位置を、テキストを表示させる領域の先頭部分に変更できる

以下の値を指定できる

list-style-positionに指定できる値

・outside
テキストを表示させる領域の外側に行頭記号を表示させる

・inside
テキストを表示させる領域の内側に行頭記号を表示させる


行頭記号の位置を変更しても、項目内のテキストが１行だと違いがわからない

以下のサンプルのようにテキストが複数行になると、行頭記号の位置の違いがわかる

例

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; }

画像2


リスト関連プロパティの一括指定

「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>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

CSS

ul { list-style: url(triangle.gif) square; }

画像3