【CSS】リストタグの点のデザインを変更する方法

リストマーカーはWebページの視覚的な構成要素として重要です。リストマーカーのデザインをカスタマイズすることで、ページ全体のデザイン性を向上させることができます。今回は、HTMLとCSSを使ってリストマーカーを変更する方法を4つご紹介します。

デフォルトのリストマーカーを変更する方法

デフォルトのリストマーカーを変更するには、CSSのlist-style-typeプロパティを使用します。このプロパティを使えば、丸点、四角点、番号など、さまざまなスタイルに変更可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>リストマーカーの変更</title>
    <style>
        ul {
            list-style-type: square; /* デフォルトの丸点を四角に変更 */
        }
    </style>
</head>
<body>
    <ul>
        <li>項目 1</li>
        <li>項目 2</li>
        <li>項目 3</li>
    </ul>
</body>
</html>
  • 項目 1
  • 項目 2
  • 項目 3

リストマーカーのオプション一覧

オプション 説明 表示例
disc 塗りつぶしの丸（デフォルト）
  • 例
circle 空洞の丸
  • 例
square 塗りつぶしの四角
  • 例
decimal 10進数の番号
  1. 例
decimal-leading-zero 0で始まる10進数の番号
  1. 例
lower-roman 小文字のローマ数字
  1. 例
upper-roman 大文字のローマ数字
  1. 例
lower-alpha 小文字の英字
  1. 例
upper-alpha 大文字の英字
  1. 例
none リストマーカーを表示しない
  • 例

カスタム画像をリストマーカーとして使用する方法

CSSのlist-style-imageプロパティを使って、画像をリストマーカーとして使用することができます。これにより、独自のデザインをリストマーカーに反映することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カスタムリストマーカー</title>
    <style>
        ul {
            list-style-image: url('path/to/your/image.png'); /* カスタム画像をリストマーカーとして使用 */
        }
    </style>
</head>
<body>
    <ul>
        <li>項目 1</li>
        <li>項目 2</li>
        <li>項目 3</li>
    </ul>
</body>
</html>
  • 項目 1
  • 項目 2
  • 項目 3

擬似要素を使ったカスタムリストマーカーの作成方法

CSSの擬似要素::beforeや::afterを使って、自由にカスタマイズされたリストマーカーを作成できます。これにより、よりクリエイティブなデザインが可能になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>擬似要素によるカスタムリストマーカー</title>
    <style>
        ul {
            list-style: none; /* デフォルトのリストマーカーを無効化 */
            padding: 0;
        }
        ul li {
            position: relative;
            padding-left: 20px; /* カスタムマーカーのスペースを確保 */
        }
        ul li::before {
            content: '•'; /* カスタムマーカーとしてのコンテンツを定義 */
            position: absolute;
            left: 0;
            color: red; /* マーカーの色を赤に変更 */
        }
    </style>
</head>
<body>
    <ul>
        <li>項目 1</li>
        <li>項目 2</li>
        <li>項目 3</li>
    </ul>
</body>
</html>
  • 項目 1
  • 項目 2
  • 項目 3

アイコンフォントを使用してリストマーカーをカスタマイズする方法

アイコンフォント（例：Font Awesome）を使用すると、さらに多様なリストマーカーを実現できます。アイコンフォントを利用することで、リストの視覚的な魅力を高めることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アイコンフォントを使ったリストマーカー</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        ul {
            list-style: none; /* デフォルトのリストマーカーを無効化 */
            padding: 0;
        }
        ul li {
            position: relative;
            padding-left: 20px; /* アイコンのスペースを確保 */
        }
        ul li::before {
            content: '\f00c'; /* Font Awesomeのチェックアイコンを使用 */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            left: 0;
            color: green; /* アイコンの色を緑に変更 */
        }
    </style>
</head>
<body>
    <ul>
        <li>項目 1</li>
        <li>項目 2</li>
        <li>項目 3</li>
    </ul>
</body>
</html>
  • 項目 1
  • 項目 2
  • 項目 3

まとめ

リストマーカーのカスタマイズは、Webページのデザインを一段と引き立てる効果的な方法です。今回紹介した4つの方法を活用して、あなたのWebデザインに合ったリストマーカーを作成してみてください。