リストのスタイル

リストについて

HTMLでは次の二種類のリストが使用できます。

  • 列挙リスト (UL)
  • 順序付きリスト (OL)

以下は列挙リストと順序付きリストの表示例です。

列挙リスト(UL)の例

  • 氏名
  • 住所
  • 電話番号

順序付きリスト(OL)の例

  1. 大阪府
  2. 東京都
  3. 静岡県

 

リストのスタイル

CSSで列挙リスト(UL)および順序付きリスト(OL)を装飾するために、以下のスタイルが使用できます。

  • list-style
  • list-style-type
  • list-style-position
  • list-style-image

では、順番に見ていきましょう。

list-style

list-style はリストの種類、位置、画像をまとめて設定します。

意味
list-style 種類、位置、画像を指定します。タイプ、位置、画像の指定順序は任意です。ただし、タイプと画像が同時に指定された場合は画像のほうを優先します。

なお、list-style-imageと同時には使用できません。もし同時に指定した場合にはlist-style-imageのほうが優先されます。

list-style-type

リストの種類を設定します。

CSS2では以下の値が使用できます。

説明
none 表示しない
disc 黒丸(既定値)
circle 白丸
square 黒四角
decimal 数字(1, 2, 3…)
decimal-leading-zero 0付きの数字(01, 02, 03…)
upper-roman 大文字ローマ数字(I, II, III…)
lower-roman 小文字ローマ数字 (i, ii, iii…)
upper-alpha 大文字アルファベット(A, B, C…)
lower-alpha 小文字アルファベット(a, b, c…)
hiragana ひらがな
katakana カタカナ
hiragana-iroha ひらがな-いろは
katakana-iroha カタカナ-イロハ

日本ではあまり使用しないタイプ

説明
upper-latin 大文字ラテン文字
lower-latin 小文字ラテン文字
upper-greek 大文字ギリシャ文字
lower-greek 小文字ギリシャ文字
hebrew ヘブライ数字
armenian アルメニア数字
georgian グルジア数字

CSS3では上記に加えて、多くの種類が使えるようになっています。

list-style-position

リストのマーカーの位置を設定します。

位置として指定できるのは次のとおりです。

意味
outside 外側(既定値)—折り返し時に文字はマーカーの内側に入ります。
inside 内側                   —折り返し時に文字はマーカーの位置に入ります。

 

list-style-image

リストのマーカーに使う画像を設定します。

意味
url(画像のURL) マーカーに使用する画像のURLアドレス
none 画像なし

※ list-style-typeと同時には使用できません。もし同時に指定した場合にはlist-style-imageのほうが優先されます。

マーカーと文字の間の間隔を設定するには?

マーカーと文字の間の間隔を直接設定するCSSは見当たりません。

これは、<li>タグのスタイルの”margin-left”プロパティーを設定することで設定します。

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です