リストを装飾するための方法を説明していきます。
list-style-type（リストスタイルタイプ）
list-style-typeは、リストの記号や番号のスタイルを指定することが出来ます。
- none:リストマーカーを非表示
- disc:黒丸
- circle:白丸
- square:黒四角
- decimal:数字
- decimal-leading-zero:0をつけた数字
- lower-roman:小文字のローマ字
- upper-roman:大文字のローマ字
- cjk-ideographic:漢数字
- hiragana:ひらがな
- katakana:カタカナ
- hiragana-iroha:ひらがなのイロハ
- katakana-iroha:カタカナのイロハ
- lower-alpha,lower-latin:小文字のアルファベット
- upper-alpha,upper-latin:大文字のアルファベット
ul{
list-style-type:square;
}
ol{
list-style-type:hiragana;
}
list-style-position（リストスタイルポジション）
list-style-positionは、リストマーカーの位置を指定することが出来ます。
- outside:ボックスの外側に表示
- inside:ボックスの内側に表示
ul{
list-style-position:outside;
}
ol{
list-style-position:inside;
}
list-style-image（リストスタイルイメージ）
list-style-imageは、リストマーカーを画像に変更することが出来ます。
- url:画像ファイルの画像URLを指定。
- none:指定しない。
ul{
list-style-image:url(images/icon.png);
}
list-style（リストスタイル）
list-syleは、先ほど３つの内容をまとめることが出来る短縮詠唱です。
記述コードの並び順は自由ですが、typeとimageプロパティそれぞれが含まれている場合は、imageプロパティの方が優先されます。
list-style:square inside url(images/icon.png);
コメント