CSSでリストのスタイルを設定する方法

HTMLリストの要約

HTMLのリストには、主に2つのタイプがあります。順序付き順序なしです。

順序付きリスト(

    )、リストアイテムの順序は重要です。アイテムは、番号、ローマ数字、アルファ数字、または別の種類のマーカーの順に表示される場合があります。順序付きリストのデフォルトのマーカーは数字(またはdecimal)です。

    では順不同リスト(

      )、リストアイテムの順序は重要ではありません。アイテムは箇条書きで表示されます。順序付けされていないリストのデフォルトのマーカーは、丸い箇条書きまたはdiscです。

      順序付きリストまたは順序なしリスト内の各リストアイテムは、タグを使用して作成されます。

      リスト固有のスタイル

      そこスタイリングリストへの3つの共通の特性の特定は以下のとおりですlist-style-typelist-style-positionlist-style-image。3つすべてを含む省略形のプロパティもあります。

      list-style-type

      順序付きリストと順序なしリストに表示されるマーカー(または箇条書き)は、さまざまな方法でスタイルを設定できます。マーカータイプをスタイル設定するためのCSSプロパティはlist-style-typeです。list-style-type順序付きリストのデフォルト値decimalはですが、順序なしリストのデフォルト値はdiscです。

      順序付きリストの例:

      /* css */ ol { list-style-type: upper-roman; }

      順序なしリストの例:

      /* css */ ul { list-style-type: square; }

      マーカーの例なし:

      /* css */ ul { list-style-type: none; }

      list-style-typeプロパティの許容値は次のとおりです。

      注文なし:

      • ディスク(デフォルト
      • サークル
      • 平方

      順序付けられました:

      • 10進数(デフォルト
      • 10進数の先行ゼロ
      • 下ローマ
      • アッパーローマン
      • 下ギリシャ語
      • 低ラテン語
      • アッパーラテン
      • アルメニア語
      • ジョージア語
      • 下位アルファ
      • アッパーアルファ

      その他:

      • 無し

      注:上記のすべてのプロパティ値は、順序付きリストと順序なしリストの両方のスタイル設定に使用できます(例:squareリストマーカー付きの順序付きリスト)。

      list-style-position

      list-style-positionリストマーカーを各リストアイテム要素の内側に表示するか外側に表示するかを制御します()。プロパティは、outside(デフォルト)またはの2つの値を受け入れますinside

      outsideリストアイテム要素のマーカーを配置すると、各リストアイテムのすべてのテキスト行とサブ行が垂直方向に整列します。

      /* css */ ul { list-style-position: outside; /* default */ }

      マーカーinsideを配置すると、各リストアイテムの最初のテキスト行がインデントされ、マーカー用のスペースが確保されます。同じリストアイテムのサブ行は、最初のテキスト行ではなくマーカーと整列します。

      /* css */ ul { list-style-position: inside; }

      list-style-image

      list-style-imageプロパティは、リストマーカーの代わりに画像のURLを受け入れます。このプロパティのデフォルト値はnoneです。

      /* css */ ul { list-style-image: url(//url-to-image); }

      list-style Shorthand

      list-style is a shorthand property for the three style properties listed above. The order of values list-style accepts is list-style-type, list-style-position, and list-style-image. If any value is omitted, the default value for that property will be used.

      Example:

      /* css */ ul { list-style: circle inside none; }

      More List-Specific Styling

      Ordered list tags also accept attributes that control the flow, count, or specific marker values of its list items. These include the start, reversed, and value attributes. See the MDN resources listed below for further details.

      General Styling

      List content can be styled just like other p or div elements. color, font-family, margin, padding, or border are just a few examples of properties that can be added to either the ul, ol, or li elements.

      Note that any styles added to the ul or ol element will affect the entire list. Styles added directly to the li elements will affect the individual list items. In the example below, the border and background-color properties are styled differently between the list and list item elements:

      /* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }

      List Spacing

      You may notice extra spacing in front of the list items when list-style-type is set to none. Setting padding to 0 (or whatever spacing is preferred) on the list element will override this default padding.

      /* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }

      Sources:

      The links below were referenced in compiling information found in this article. Please visit them for further details about this topic.

      More Information:

      MDN - Styling Lists

      W3Schools - CSS Lists

      CSS Tricks - list-style