logo

CSS リストのスタイル

CSS のリストは、コンテンツまたは項目を特定の方法でリストする方法を決定します。つまり、それらを整然と配置することも、ランダムに配置することもでき、きれいな Web ページの作成に役立ちます。適応性があり、扱いが簡単なため、大量の資料を整理するのに使用できます。リストのデフォルトのスタイルはボーダーレスです。リストは 2 つのカテゴリに分類できます。

    順序なしリスト:デフォルトでは、順序なしリストのリスト要素は小さな黒丸である黒丸で示されます。順序付きリスト:順序付きリストのリスト要素は、数字と文字で識別されます。

次の CSS リスト プロパティは、CSS リストの制御に使用できます。

    リストスタイルタイプ:このプロパティは、ディスク、文字、カスタム カウンター スタイルなどのリスト項目マーカーの外観を決定するために使用されます。リストスタイルの画像:リスト項目マーカーとして機能する画像は、このパラメータを使用して指定できます。リストスタイルの位置:メイン ブロック ボックスの周囲のどこにマーカー ボックスを配置するかを説明します。リスト形式:リスト スタイルはこの属性で構成されます。

ここでは、例を通してこれらの特性について詳しく学びます。

リスト形式のプロパティ

マーカーのデフォルトのリスト タイプは、正方形、円、ローマ数字、ラテン文字など、他のさまざまなタイプに変更できます。順序なしリストの項目は丸い黒丸 (・) で示されますが、順序付きリストの項目にはデフォルトでアラビア数字 (1、2、3 など) を使用して番号が付けられます。

値を none に設定すると、マークまたは箇条書きは削除されます。

構文:

リストスタイルタイプ:値;

配列リストのメソッド

値は次のように使用できます。

  1. 10 進数、例:1、2、3 など
  2. 10 進数の先頭のゼロ、例:01、02、03、04 など
  3. 下ローマ字
  4. 上部ローマ字
  5. 低位アルファ、例: a、b、c など
  6. 上位アルファ、例: A、B、C など
  7. 四角

注: デフォルトのパディングとマージンもリストに含まれます。にpadding:0とmargin:0を追加する必要があります。
    そして
      これを解消するためのタグです。

この例では、いくつかのリスト スタイルのタイプと値が正方形と上位アルファなどに設定された CSS リストを示しています。

 Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul> 

出力

CSS リストのスタイル