CSSを使用してリストのスタイルを設定する方法

CSSを使用したリストのスタイリング

リストは多くのウェブページの非常に重要な部分です。

CSSは、いくつかのプロパティを使用してそれらのスタイルを設定できます。

list-style-typeリストで使用される事前定義されたマーカーを設定するために使用されます。

li {
  list-style-type: square;
}

可能な値はたくさんありますが、ここで確認できますhttps://developer.mozilla.org/en-US/docs/Web/CSS/list-style-typeそれらの外観の例で。最も人気のあるもののいくつかはdisccirclesquareそしてnone

list-style-image事前定義されたマーカーが適切でない場合に、カスタム画像をマーカーとして使用するために使用されます。

li {
  list-style-image: url(list-image.png);
}

list-style-positionマーカーを追加できますoutside(デフォルト)またはinsideページの外側ではなく、ページのフロー内のリストコンテンツの

li {
  list-style-position: inside;
}

ザ・list-style省略形のプロパティを使用すると、これらすべてのプロパティを同じ行で指定できます。

li {
  list-style: url(list-image.png) inside;
}

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: