CSSでリストの色を変える方法
2024-08-27
HTML/CSSでリストの箇条書きの色を変更する方法
HTML
<ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
</ul>
CSS
ul {
list-style-type: none; /* 箇条書きのマークを非表示にする */
}
li {
position: relative; /* 箇条書きのマークを位置づけるための基準 */
}
li::before {
content: "\2022"; /* 箇条書きのマーク（丸）を挿入 */
position: absolute;
left: -20px; /* 箇条書きのマークの位置を調整 */
top: 50%;
transform: translateY(-50%); /* 垂直方向の中央に配置 */
color: blue; /* 箇条書きのマークの色を変更 */
}
解説
- list-style-type: none;
箇条書きのデフォルトのマーク（●）を非表示にします。 - position: relative;
li要素を相対的に配置し、子要素である::before要素の位置を基準とするための準備をします。 - ::before
li要素の前に疑似要素を挿入します。content: "\2022";：箇条書きのマーク（丸）を挿入します。position: absolute;：li要素に対して絶対的に配置します。left: -20px;：箇条書きのマークを左に移動します。top: 50%;：箇条書きのマークを垂直方向の中央に配置します。transform: translateY(-50%);：垂直方向の中央に配置するための調整を行います。color: blue;：箇条書きのマークの色を青色に変更します。
<ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
</ul>
ul {
list-style-type: none; /* 箇条書きのマークを非表示にする */
}
li {
position: relative; /* 箇条書きのマークを位置づけるための基準 */
}
li::before {
content: "\2022"; /* 箇条書きのマーク（丸）を挿入 */
position: absolute;
left: -20px; /* 箇条書きのマークの位置を調整 */
top: 50%;
transform: translateY(-50%); /* 垂直方向の中央に配置 */
color: blue; /* 箇条書きのマークの色を変更 */
}
list-style-imageプロパティを使用
ul {
list-style-type: none;
list-style-image: url(your-bullet-image.png); /* 箇条書きのマークとして画像を使用 */
}
この方法では、画像を箇条書きのマークとして使用します。画像のサイズや位置を調整することで、カスタマイズが可能です。
::marker疑似要素を使用
ul {
list-style-type: none;
}
li::marker {
content: "\2022"; /* 箇条書きのマーク（丸）を挿入 */
color: blue; /* 箇条書きのマークの色を変更 */
}
この方法では、::marker疑似要素を使用して、箇条書きのマークを直接スタイル設定します。
JavaScriptを使用して動的に変更
const listItems = document.querySelectorAll('ul li');
listItems.forEach(item => {
const marker = document.createElement('span');
marker.textContent = '\u2022'; // 箇条書きのマーク（丸）
marker.style.color = 'blue'; // 箇条書きのマークの色を変更
item.prepend(marker);
});
この方法では、JavaScriptを使用して、各リストアイテムの前にspan要素を挿入し、そのスタイルを動的に変更します。
注意
- JavaScriptを使用する場合は、パフォーマンスやアクセシビリティに配慮する必要があります。
::marker疑似要素はブラウザのサポート状況に注意が必要です。list-style-imageプロパティを使用する場合、画像のサイズや位置を適切に調整する必要があります。
css layout colors
