継続は力なり＃２６

2020年3月25日 21:02

リスト関連のプロパティ

CSSにはul要素とol要素に使用できる専用のプロパティがある

・list-style-type
行頭記号を変える

・list-style-image
行頭記号を画像にする

・list-style-position
行頭記号の表示位置を設定

・list-style
リスト関連プロパティの一括指定

ここでのプロパティは、全て行頭記号に関するもので、指定する対象は「li要素」となる

これらのプロパティは全てその内部の要素にも値を継承するタイプなので、ul要素やol要素に対して指定すると、その子要素であるli要素にも適用される

行頭記号を変える

「list-style-typeプロパティ」は、行頭記号を変更するプロパティ

表示される行頭記号は、ブラウザの種類によって異なる場合がある

以下が指定できる

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

・none
行頭記号を消す

・disc
塗り潰した丸にする

・circle
白抜きの丸にする

・square
四角にする

・decimal
数字にする

・decimal-leading-zero
01, 02, 03, 〜 99,　のように先頭に０をつけた数字にする

・lower-roman
小文字のローマ数字にする

・upper-roman
大文字のローマ数字にする

・lower-latin
小文字のアルファベットにする

・upper-latin
大文字のアルファベットにする

・lower-alpha
小文字のアルファベットにする

・upper-alpha
大文字のアルファベットにする

・lower-greek
小文字のギリシャ文字にする

例

HTML

<ul id="sample1">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
 
<ul id="sample2">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
 
<ul id="sample3">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
 
         　　　　　　　　　　　　　・・・中略・・・

<ol id="sample9">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ol>

CSS

ul, ol {
   float: left;
   margin-right: 40px;
}
#sample1 { list-style-type: note; }
#sample2 { list-style-type: disc; }
#sample3 { list-style-type: circle; }
#sample4 { list-style-type: square; }
#sample5 { list-style-type: decimal; }
#sample6 { list-style-type: decimal-leading-zero; }
#sample7 { list-style-type: lower-roman; }
#sample8 { list-style-type: upper-roman; }
#sample9 { list-style-type: lower-alpha; }