list-style の関連プロパティ
◉関連プロパティ
●リスト記号 list-style-type
●リスト記号の画像 URL list-style-image
●リスト記号の位置 list-style-position
●まとめて指定 list-style
◉ list-style-type の種類
● none
項目１
項目２
項目３
● disc
⚫︎項目１
⚫︎項目２
⚫︎項目３
● circle
⚪︎項目１
⚪︎項目２
⚪︎項目３
● square
▪️項目１
▪️項目２
▪️項目３
● decimal
1. 項目１
2. 項目２
3. 項目３
● declimal-leading-zero
01. 項目１
02. 項目２
03. 項目３
● lower-roman
ⅰ. 項目１
ⅱ. 項目２
ⅲ. 項目３
● uppe3r-roman
Ⅰ. 項目１
Ⅱ. 項目２
Ⅲ. 項目３
● lower-alpha
a. 項目１
b. 項目２
c. 項目３
● upper-alphra
A. 項目１
B. 項目２
C. 項目３
● hiragana
あ. 項目１
い. 項目２
う. 項目３
● katakana
ア. 項目１
イ. 項目２
ウ. 項目３
◉ list-style-image はリスト記号を画像に変更することができる。
●HTMLファイルにおいて
<ul>
<li> 項目1</li>
<li> 項目2</li>
<li> 項目3</li>
</ul>
●CSSファイルにおいて
li {
list-style-image: url(" ico_arrow.png ");
}
などと記述することで可能になる。
●表示上は以下のようになる。
▶︎ 項目１
▶︎ 項目２
▶︎ 項目３
◉ list-style-position でリスト記号の位置を設定する。
「outside」 と「inside」で文章が2行に渡った際に文章の頭の位置が異なる。
「outside」文章の頭が揃う。
EX)
⚫︎項目１項目１項目１項目１項目１項目１項目１項目１
項目１項目１項目１項目１項目
⚫︎項目２
●CSSファイルにおいて、
ul.outside li {
list-style-position: outside ;
}
「inside」 記号も含めての文章の頭が揃う。
EX)
⚫︎項目１項目１項目１項目１項目１項目１項目１項目１
項目１項目１項目１項目１項目
⚫︎項目２
●CSSファイルにおいて、
ul.inside li {
list-style-position: inside;
}
◉ 「リスト記号」「記号の画像URL」「位置」を一括して指定
stlye-list を指定し、スペースで区切ることで、まとめて指定することができる。
但し、list-type と list-style-image を同時に指定すると、
「list-style-image」が優先される。
