ホーム プログラミング言語 Web関連 css3 CSS リストスタイル (リストスタイル)

CSS リストスタイル (リストスタイル)


 
 
リストは、ナビゲーション メニュー、ニュース リスト、製品カテゴリなど、Web ページのさまざまな場所で使用されます。リストを簡単に設定するために HTML でいくつかの属性を使用することに加えて、CSS は、次のように、リストを設定およびフォーマットするために特別に使用されるいくつかの属性も提供します。

 

  • list-style-type: リスト項目の前にあるマーカーの形状 (外観) を設定します。
  • list-style-position: マークとリストの日本語バージョンの間の距離を設定します。
  • list-style-image: デフォルトのマークアップの代わりに画像を使用します。
  • list-style: 上記の 3 つの属性を一律に設定します。

1.list-style-type

list-style-type 属性を使用して、リスト内の各リスト項目の前にマークアップのスタイルを設定します. 属性のオプションの値は次のとおりです:

価値 説明
none 無印
disc 黒丸でマークされたデフォルト値
circle マーカーを中空円に設定
square マーカーを塗りつぶした正方形に設定します
decimal マーカーを数値に設定する
decimal-leading-zero タグを 0 で始まる数値タグに設定します (例: 01、02、03)。
lower-roman i、ii、iii、iv、v などの小文字のローマ数字にマーカーを設定します
upper-roman I、II、III、IV、V などの大文字のローマ数字にマーカーを設定します
lower-alpha タグを a、b、c、d、e などの小文字の英字に設定します
upper-alpha マークアップを A、B、C、D、E などの大文字の英字に設定します
lower-greek α、β、γ、δ、εなどの小文字のギリシャ文字にタグを設定します
lower-latin タグを a、b、c、d、e などの小文字のラテン文字に設定します
upper-latin タグを大文字のラテン文字 (A、B、C、D、E など) に設定します
hebrew マーカーを伝統的なヘブライ語の番号付けに設定
armenian マーカーを伝統的なアルメニアの番号付けに設定します
georgian マーカーを伝統的なジョージア番号に設定します
cjk-ideographic マーカーを一、二、三、四、五などの日本の数字に設定します
hiragana あ、い、う、え、おなどのひらがなにタグを設定します
katakana ア、イ、ウ、エ、オなどのカタカナ文字にタグを設定します
hiragana-iroha マークアップを日本語のひらがな序数に設定します
katakana-iroha タグを日本語のカタカナの序数に設定

【例】順序なしリスト、順序付きリストのリスト項目の前にあるタグのスタイルを list-style-type 属性で変更する場合:

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: circle;
        }
        ol {
            float: left;
        }
        .ol_one {
            list-style-type: lower-roman;
        }
        .ol_two {
            list-style-type: lower-greek;
        }
        .ol_three {
            list-style-type: georgian;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ul>
    <ol class="ol_one">
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ol>
    <ol class="ol_two">
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ol>
    <ol class="ol_three">
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ol>
</body>
</html> 

実行結果は次の図のとおりです。

図: list-style-type 属性のデモ
図: list-style-type 属性のデモ

2.list-style-position

list-style-position 属性を使用して、リスト アイテムの前にマークを配置する場所を設定します。この属性のオプションの値は次のとおりです。

価値 説明
inside リストアイテムの前のマークはその後のテキスト内に配置され、リストアイテム内のテキストはマークに従って配置されます
outside デフォルト、テキストの左側にマークアップを保持、リスト アイテムがテキストの外側に配置される前のマークアップ、およびリスト アイテム内のテキストはマークアップに従って配置されません
inherit 親要素から list-style-position 属性の値を継承する

[例] list-style-position 属性を使用して、リスト項目の前にマークの位置を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ol {
            list-style-type: lower-roman; オーダリストの種類をローマ数字に設定する。
        }
        li {
            background: #ccc; リスト要素の背景色をグレーにする。
            margin-bottom: 2px; リスト要素間のマージンを2ピクセルにする。
        }
        .ol_one {
            list-style-position: inside; リスト要素のマーカーの位置をリスト内にする。
        }
        .ol_two {
            list-style-position: outside; リスト要素のマーカーの位置をリスト外にする。
        }
    </style>
</head>
<body>
    <ol class="ol_one"> <!-- クラス"ol_one"を指定したオーダリスト -->
        <li>CSSリンク</li>
        <li>CSS境界線</li>
        <li>CSSテーブル</li>
    </ol>
    <ol class="ol_two"> <!-- クラス"ol_two"を指定したオーダリスト -->
        <li>CSSリンク</li>
        <li>CSS境界線</li>
        <li>CSSテーブル</li>
    </ol>
</body>
</html> 

実行結果は次の図のとおりです。

図: list-style-position プロパティのデモ
図: list-style-position プロパティのデモ

3.list-style-image

リスト項目の前のマークは、list-style-image 属性を介して画像に置き換えることができます. 属性のオプションの値は次のとおりです:

価値 説明
URL 画像パス
none デフォルト、画像は表示されません
inherit 親要素から list-style-image 属性の値を継承する

[例] list-style-image 属性を使用して、リスト項目の前のマークアップを画像に置き換えます。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-image: url('./css_icon.png');
        }
    </style>
</head>
<body>
    <ul>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSSテーブル</li>
    </ul>
</body>
</html> 

実行結果は次の図のとおりです。

図: list-style-image プロパティのデモ
図: list-style-image プロパティのデモ

 

4.リストスタイル

list-style 属性は、上記の 3 つの属性 (list-style-type、list-style-position、list-style-image) の省略形です. list-style を使用すると、上記の 3 つの属性を同時に設定できます. 構文形式以下のとおりであります:

list-style: list-style-type || list-style-position || list-style-image;

ヒント: list-style 属性を使用する場合、 list-style: none;のように 1 つ以上のパラメーターが無視される場合でも、パラメーターの順序に従う限り、上記の順序でパラメーターに値を割り当てる必要があります。 list-style: none;list-style:circle inside; 、無視されたパラメーターは、パラメーターの対応するデフォルト値に設定されます。

【例】 list-style 属性を使用して、リスト項目のマークアップ スタイル、位置、イメージを一律に設定する:

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style: url('./css_icon.png');;
        }
        ol {
            list-style: lower-greek inside;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSSテーブル</li>
    </ul>
    <ol>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSSテーブル</li>
    </ol>
</body>
</html> 

実行結果は次の図のとおりです。

図: リスト スタイルの属性のデモ
図: リスト スタイルの属性のデモ
 

「CSS リストスタイル (リストスタイル)」についてわかりやすく解説!絶対に観るべきベスト2動画

CSS List Properties | List Style Type | List Style Image | List Style Position in CSS – 36
Style Lists With Css – Css Lists Style – Pure CSS Tutorial – Css Hover Effects