【完全ガイド】CSSでUL/LIリストの箇条書きの色を変更する方法と、その他のデザインテクニック
2024-04-02
CSSのみでUL/LIリストの箇条書きの色を変更する方法
手順
- HTMLファイル
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
- CSSファイル
以下のコードをCSSファイルに記述します。
ul {
list-style: none; /* デフォルトの箇条書きを消去 */
}
li {
list-style-type: circle; /* 箇条書きの種類を円に変更 */
list-style-color: red; /* 箇条書きの色を赤に変更 */
}
ポイント
list-style: none;で、ul要素のデフォルトの箇条書きを消去します。list-style-typeで、箇条書きの種類を指定します。circle: 円square: 四角disc: 丸none: 箇条書きなし
list-style-colorで、箇条書きの色を指定します。
- 箇条書きの種類は、上記以外にも多数存在します。詳細は CSS list-style-type: URL CSS list-style-type を参照してください。
- 箇条書きの色は、カラーコードやカラー名で指定できます。詳細は CSS color: URL CSS color を参照してください。
- 箇条書きのサイズや位置などを調整したい場合は、
list-style-imageやmargin-leftなどのプロパティを使用します。詳細は CSS list-style: URL CSS list-style を参照してください。
CSSのみで、画像やspanタグを使わずに、UL/LIリストの箇条書きの色を変更する方法を紹介しました。
上記を参考に、リストデザインを自由に変更してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>箇条書きの色を変更</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>サンプル</h1>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
ul {
list-style: none;
}
li {
list-style-type: circle;
list-style-color: red;
}
このコードを実行すると、ブラウザ上で以下の様に表示されます。
ブラウザ上の表示
<h1>サンプル</h1>
* 項目1
* 項目2
* 項目3
その他のサンプル
- 箇条書きの種類を変更
li {
list-style-type: square;
}
li {
list-style-color: blue;
}
li {
list-style-type: circle;
list-style-image: url(https://example.com/image.png);
}
li {
list-style-type: circle;
margin-left: 20px;
}
これらのコードを参考に、様々なデザインを試してみてください。
箇条書きの色を変更する他の方法
::marker 疑似要素は、リスト項目の箇条書き部分のみを対象にスタイルを設定できます。
ul li::marker {
color: red;
}
このコードは、li 要素内の ::marker 疑似要素に対して color プロパティを適用し、箇条書きの色を赤に変更します。
list-style-image プロパティは、箇条書きの代わりに画像を表示できます。
li {
list-style-type: none;
list-style-image: url(https://example.com/image.png);
}
このコードは、list-style-type を none に設定してデフォルトの箇条書きを消去し、list-style-image で画像を指定します。
before 疑似要素は、要素の前にコンテンツを挿入できます。
li {
list-style: none;
position: relative;
&::before {
content: "";
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
}
}
content プロパティは、要素の内容を変更できます。
li {
list-style: none;
padding-left: 20px;
&::before {
content: "•";
color: red;
font-size: 16px;
}
}
上記で紹介した4つの方法は、それぞれ異なる利点と欠点があります。
::marker疑似要素は、最も簡単で効率的な方法ですが、古いブラウザでは対応していない場合があります。list-style-imageプロパティは、画像を使って自由度の高いデザインが可能ですが、画像ファイルの読み込み時間が長くなる場合があります。before疑似要素は、画像を使わずに様々なデザインが可能ですが、コードが複雑になる場合があります。contentプロパティは、シンプルなデザインに適していますが、複雑なデザインには不向きです。
目的に合った方法を選択して、箇条書きのデザインを自由に変更してみてください。
css layout colors
