CSSフレームワークでサクッとカスタマイズ！HTMLリストの箇条書き
2024-04-08
HTMLリストの箇条書きの色を変更する方法
CSSを使う
1 リスト全体の色を変える
以下のコードをHTMLファイルの <head> タグ内に追加します。
ul {
list-style-type: circle; /* 箇条書きの種類 */
color: red; /* 箇条書きの色 */
}
2 個別項目の色を変える
ul li:nth-child(1) {
color: blue; /* 1番目の項目の色 */
}
ul li:nth-child(2) {
color: green; /* 2番目の項目の色 */
}
/* 以下、必要に応じて他の項目の色も設定 */
3 擬似要素を使う
ul li {
list-style-type: none; /* 箇条書きを非表示にする */
}
ul li::before {
content: "•"; /* 箇条書きの代わりに表示する文字 */
color: red; /* 箇条書きの色 */
font-size: 18px; /* 箇条書きのサイズ */
}
HTML属性を使う
以下のコードのように、ul タグまたは li タグに style 属性を追加します。
<ul style="list-style-color: red;">
<li>項目1</li>
<li>項目2</li>
</ul>
注意:
- CSSを使う方法の方が、より柔軟に箇条書きの色を変更できます。
- HTML属性を使う方法は、コードが簡潔になりますが、個別に色を設定できないなどの制限があります。
CSSを使ってリスト全体の色を変える
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストの箇条書きの色を変える</title>
<style>
ul {
list-style-type: circle;
color: red;
}
</style>
</head>
<body>
<h1>リストの箇条書きの色を変えてみた</h1>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
CSSを使って個別項目の色を変える
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストの箇条書きの色を変える</title>
<style>
ul li:nth-child(1) {
color: blue;
}
ul li:nth-child(2) {
color: green;
}
</style>
</head>
<body>
<h1>リストの箇条書きの色を変えてみた</h1>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
このコードを実行すると、1番目の項目が青色、2番目の項目が緑色になります。
CSSを使って擬似要素を使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストの箇条書きの色を変える</title>
<style>
ul li {
list-style-type: none;
}
ul li::before {
content: "•";
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<h1>リストの箇条書きの色を変えてみた</h1>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
このコードを実行すると、箇条書きが赤い丸に変更されます。
HTML属性を使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストの箇条書きの色を変える</title>
</head>
<body>
<h1>リストの箇条書きの色を変えてみた</h1>
<ul style="list-style-color: red;">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
このコードを実行すると、リスト全体の色が赤色になります。
上記以外にも、さまざまな方法でリストの箇条書きの色を変えることができます。詳しくは、以下のサイトなどを参考にしてみてください。
HTMLリストの箇条書きの色を変えるその他の方法
画像を使う
箇条書きの代わりに画像を使う方法です。
<ul>
<li><img src="bullet_red.png" alt="•"></li>
<li><img src="bullet_green.png" alt="•"></li>
<li><img src="bullet_blue.png" alt="•"></li>
</ul>
この方法のメリットは、画像を使うことでデザインの幅が広がることです。デメリットは、画像ファイルを用意する必要があることです。
JavaScriptを使って、動的に箇条書きの色を変える方法です。
<ul id="list">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<script>
const list = document.getElementById("list");
const items = list.getElementsByTagName("li");
for (let i = 0; i < items.length; i++) {
items[i].style.color = "red";
}
</script>
この方法のメリットは、JavaScriptによってさまざまな色やアニメーションを適用できることです。デメリットは、JavaScriptの知識が必要になることです。
CSSフレームワークを使う
BootstrapやMaterializeなどのCSSフレームワークを使うと、簡単に箇条書きの色を変えることができます。
<ul class="list-unstyled">
<li class="text-danger">項目1</li>
<li class="text-success">項目2</li>
<li class="text-primary">項目3</li>
</ul>
この方法のメリットは、コードが簡潔になることです。デメリットは、CSSフレームワークの知識が必要になることです。
HTMLリストの箇条書きの色を変える方法は、いくつかあります。それぞれの方法のメリットとデメリットを理解して、目的に合った方法を選びましょう。
html css html-lists
