TECH I.S.

CSSでlistのデザインをカスタマイズする方法


順序なしリスト:

  • コーヒー
  • お茶
  • コカコーラ
  • コーヒー
  • お茶
  • コカコーラ

番号付きリスト:

  1. コーヒー
  2. お茶
  3. コカコーラ
  1. コーヒー
  2. お茶
  3. コカコーラ

HTML リストと CSS リストのプロパティ

HTML には、主に 2 種類のリストがあります。

  • 順序なしリスト(<ul>) - リスト項目は黒丸でマークされています
  • 順序付きリスト(<ol>) - リスト項目は数字または文字でマークされています

CSS リストプロパティを使用すると、次のことができます。

  • 番号付きリストに異なるリスト項目マーカーを設定する
  • 番号なしリストに異なるリスト項目マーカーを設定する
  • 画像をリストアイテムマーカーとして設定する
  • リストとリストアイテムに背景色を追加する

異なるリストアイテムマーカー

list-style-typeプロパティは、リスト項目マーカーのタイプを指定します。

次の例は、使用可能なリストアイテムマーカーの一部を示しています。

ul.a {   list-style-type: circle; } ul.b {   list-style-type: square; } ol.c {   list-style-type: upper-roman; } ol.d {   list-style-type: lower-alpha; }
自分で試してみる »
注: 一部の値は順序なしリスト用で、一部は順序付きリスト用です。

リスト項目マーカーとしての画像

list-style-imageプロパティは、リストアイテムマーカーとして画像を指定します。

ul{ list-style-image: url('sqpurple.gif'); }
自分で試してみる »

リストアイテムマーカーの配置

list-style-positionプロパティは、リスト項目マーカー(箇条書き)の位置を指定します。

「list-style-position: outside;」は箇条書きがリスト項目の外にあることを意味します。リスト項目の各行の開始は、垂直方向に配置されます。これはデフォルトです。

  • コーヒー -焙煎したコーヒー豆を使った醸造ドリンク...
  • お茶
  • コカコーラ

「list-style-position: inside;」は箇条書きがリスト項目内にあることを意味します。これはリスト項目の一部であるため、テキストの一部になり、最初にテキストをプッシュします。

  • コーヒー -焙煎したコーヒー豆を使った醸造ドリンク...
  • お茶
  • コカコーラ

ul.a {   list-style-position: outside; } ul.b {   list-style-position: inside; }

自分で試してみる »


デフォルト設定を削除

list-style-type:noneプロパティを使用して、マーカー/箇条書きを削除することもできます。リストにはデフォルトのマージンとパディングもあることに注意してください。 これを削除するには、margin:0padding:0を<ul>または<ol>に追加します。

ul{ list-style-type: none;   margin: 0;   padding: 0; }
自分で試してみる »

リスト - 省略形のプロパティ

list-styleプロパティは省略形のプロパティです。 1 つの宣言ですべてのリストプロパティを設定するために使用されます。

ul{  list-style: square inside url("sqpurple.gif"); }
自分で試してみる »
省略形プロパティを使用する場合、プロパティ値の順序は次のとおりです。
  • list-style-type(リスト形式の画像が指定されている場合、何らかの理由で画像を表示できない場合に、このプロパティの値が表示されます。)
  • list-style-position(リスト項目マーカーをコンテンツフローの内側または外側のどちらに表示するかを指定します)
  • list-style-image(リスト項目マーカーとしてイメージを指定します)

上記のプロパティ値のいずれかが欠落している場合、欠落しているプロパティのデフォルト値があれば挿入されます。


色付きスタイリングリスト

リストを色でスタイルして、もう少し面白く見せることもできます。

<ol>または<ul>タグに追加されたものはすべてリスト全体に影響しますが、<li>タグに追加されたプロパティは個々のリスト項目に影響します:

ol {   background: #ff9999;   padding: 20px; } ul {   background: #3399ff;   padding: 20px; } ol li {   background: #ffe5e5;   color: darkred;   padding: 5px;   margin-left: 35px; } ul li {   background: #cce5ff;   color: darkblue;   margin: 5px; }
結果:
  1. コーヒー
  2. お茶
  3. コカコーラ
  • コーヒー
  • お茶
  • コカコーラ
自分で試してみる »

その他の例

赤い左枠のカスタマイズされたリストこの例は、赤い左の境界線を持つリストを作成する方法を示しています。

全角ボーダーリストこの例は、箇条書きのない枠付きリストを作成する方法を示しています。

リストのすべての異なるリスト項目マーカーこの例は、CSS のさまざまなリスト項目マーカーをすべて示しています。


すべてのCSSリストプロパティ
プロパティ 説明
list-style 1つの宣言でリストのすべてのプロパティを設定します
list-style-image リスト項目マーカーとして画像を指定します
list-style-position リスト項目マーカー(箇条書き)の位置を指定します
list-style-type リスト項目マーカーのタイプを指定します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細