↩ プログラミング言語 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>

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

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>

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

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 属性は、上記の 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

https://www.youtube-nocookie.com/watch?v=M4Noi7ooBkI&pp=ygU3Q1NTIOODquOCueODiOOCueOCv-OCpOODqyAo44Oq44K544OI44K544K_44Kk44OrKSZobD1KQQ%3D%3D

CSS List Properties | List Style Type | List Style Image | List Style Position in CSS – 36 (https://www.youtube-nocookie.com/watch?v=M4Noi7ooBkI&pp=ygU3Q1NTIOODquOCueODiOOCueOCv-OCpOODqyAo44Oq44K544OI44K544K_44Kk44OrKSZobD1KQQ%3D%3D)

Style Lists With Css – Css Lists Style – Pure CSS Tutorial – Css Hover Effects

https://www.youtube-nocookie.com/watch?v=dhLcyBCJ0r4&pp=ygU3Q1NTIOODquOCueODiOOCueOCv-OCpOODqyAo44Oq44K544OI44K544K_44Kk44OrKSZobD1KQQ%3D%3D

Style Lists With Css – Css Lists Style – Pure CSS Tutorial – Css Hover Effects (https://www.youtube-nocookie.com/watch?v=dhLcyBCJ0r4&pp=ygU3Q1NTIOODquOCueODiOOCueOCv-OCpOODqyAo44Oq44K544OI44K544K_44Kk44OrKSZobD1KQQ%3D%3D)

css3

リストは、ナビゲーションメニュー、ニュースリスト、製品カテゴリなど、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>

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

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>

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

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 属性は、上記の 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

https://www.youtube-nocookie.com/watch?v=M4Noi7ooBkI&pp=ygU3Q1NTIOODquOCueODiOOCueOCv-OCpOODqyAo44Oq44K544OI44K544K_44Kk44OrKSZobD1KQQ%3D%3D

CSS List Properties | List Style Type | List Style Image | List Style Position in CSS – 36 (https://www.youtube-nocookie.com/watch?v=M4Noi7ooBkI&pp=ygU3Q1NTIOODquOCueODiOOCueOCv-OCpOODqyAo44Oq44K544OI44K544K_44Kk44OrKSZobD1KQQ%3D%3D)

Style Lists With Css – Css Lists Style – Pure CSS Tutorial – Css Hover Effects

https://www.youtube-nocookie.com/watch?v=dhLcyBCJ0r4&pp=ygU3Q1NTIOODquOCueODiOOCueOCv-OCpOODqyAo44Oq44K544OI44K544K_44Kk44OrKSZobD1KQQ%3D%3D

Style Lists With Css – Css Lists Style – Pure CSS Tutorial – Css Hover Effects (https://www.youtube-nocookie.com/watch?v=dhLcyBCJ0r4&pp=ygU3Q1NTIOODquOCueODiOOCueOCv-OCpOODqyAo44Oq44K544OI44K544K_44Kk44OrKSZobD1KQQ%3D%3D)

css3