CSSでリストをスタイリングする方法｜list-styleプロパティの使い方
CSSでは、背景色やlist-styleプロパティ、フォントスタイルなどを指定することで、リストの見た目を自由にカスタマイズできます。list-styleプロパティは、list-style-type、list-style-image、list-style-position の3つの値をこの順序でまとめて設定できるショートハンド（一括指定）プロパティです。
構文
CSSのlist-styleプロパティの基本構文は次のとおりです。
Selector {
list-style: /*value*/
}
使用例1：画像マーカーを指定したul要素
以下の例では、list-style-imageを使って箇条書きのマーカーを任意の画像に変更し、背景色や余白もあわせて調整しています。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
display: flex;
float: left;
list-style-image: url("https://www.tutorialspoint.com/images/reactjs.png");
background: lightseagreen;
list-style-position: inside;
}
li {
background: azure;
margin: 5px 20px;
}
</style>
</head>
<body>
<h3>ReactJS</h3>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
<li>Lesson 3</li>
<li>Lesson 4</li>
<li>Lesson 5</li>
</ul>
</body>
</html>
出力結果
上記コードの表示結果は以下のようになります。
使用例2：ol要素への一括指定
次の例では、番号付きリスト（ol）に対して「lower-greek inside」という値をlist-styleプロパティで一括指定しています。これにより、ギリシャ文字の小文字がマーカーとして表示され、マーカーはテキストの内側に配置されます。あわせて背景画像も設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
ol {
width: 40%;
color: white;
list-style: lower-greek inside;
background-image: url("https://www.tutorialspoint.com/ethereum/images/ethereum-mini-logo.jpg");
}
li {
background-color: rgba(0,0,0,0.6);
margin: 5px 30px;
}
</style>
</head>
<body>
<h2>Ethereum</h2>
<ol>
<li>Smart Contracts</li>
<li>Ganache</li>
<li>Creating Wallet </li>
<li>Deploying Contract</li>
</ol>
</body>
</html>
出力結果
上記コードの表示結果は以下のようになります。
-
CSSだけでカレンダーを作成する方法をわかりやすく解説【サンプルコード付き】
Webページにカレンダーを表示したいとき、CSS（スタイルシート）だけでも十分に実現できます。JavaScriptなどのスクリプトに頼らなくても、HTMLのリスト要素とCSSを組み合わせるだけで、月表示のカレンダーを見やすいレイアウトで作成することが可能です。 ここでは、月名の表示、前月・次月へのナビゲーション矢印、曜日ヘッダー、日付グリッド、さらに「今日」の日付を円形でハイライトする演出まで含めた、実用的なカレンダーのサンプルコードを紹介します。 サンプルコード CSSでカレンダーを作成するには、以下のように記述します。 <!DOCTYPE html> <html>
-
CSSの::markerセレクターでリストの箇条書きマーカーの色を変更する方法
::markerセレクターとはCSSの::marker擬似要素は、リスト項目（<li>）に表示される箇条書きマーカーや番号に対して個別にスタイルを適用できるセレクターです。通常、マーカーの色はテキストの色に連動しますが、::markerを使えばマーカーだけの色やフォントサイズを自由に変更できます。構文CSS ::markerセレクターの基本構文は以下の通りです。Selector::marker { attribute: /*値*/; }例1：基本的な使い方以下の例では、ul要素のリストスタイルを「circle」に設定し、li::markerに対して緑色を指定しています。&l