CSS

リストの見た目を自由にカスタマイズ！list-styleの基本を徹底解説

Webページでは、箇条書きのリスト（<ul> や <ol>）を使うことがよくあります。

例えば、料理のレシピの手順や、ショッピングサイトの商品一覧などでリストが使われます。

CSSのlist-style プロパティを使うと、リストの見た目を自由に変更できます。

主に以下のプロパティを使ってカスタマイズできます。

  • list-style-type（リストのマーカーの種類を変更）
  • list-style-position（マーカーの配置を調整）
  • list-style-image（マーカーを画像に変更）
  • list-style（上記3つをまとめて指定）

この記事では、それぞれのプロパティの使い方を詳しく解説しながら、実際に試していきます！

実際に試してみよう！

HTMLファイル（index.html）

このHTMLでは、リストを作成し、リストの見た目をカスタマイズできるようになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSのリスト装飾を学ぼう！</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSSのリスト装飾を学ぼう！</h1>
    <ul class="list-example">
        <li>りんご</li>
        <li>バナナ</li>
        <li>ぶどう</li>
    </ul>
</body>
</html>

CSSファイル（style.css）

以下のCSSを保存し、値を変えながら試してみてください。

.list-example {
    list-style-type: disc;
    list-style-position: outside;
    background-color: lightyellow;
    padding: 20px;
    width: 200px;
}

どの部分を変更すれば何が変わる？

  • list-style-type: リストのマーカーの種類を変更
  • list-style-position: マーカーの配置を調整
  • list-style-image: マーカーを画像に変更
  • list-style: これらをまとめて指定

いろいろな値を試してみよう！

例えば、次のような値に変更して試してみましょう。

  • list-style-type: square; → 四角のマーカーに変更
  • list-style-type: none; → マーカーを非表示
  • list-style-position: inside; → マーカーをリストの内側に配置
  • list-style-image: url('marker.png'); → 画像をマーカーとして使用

それぞれのプロパティを詳しく学ぼう

list-style-type（リストのマーカーの種類）

list-style-type は、リストのマーカー（記号）を変更するプロパティです。

使える値（代表的なもの）

  • disc（● 黒丸・デフォルト）
  • circle（○ 白丸）
  • square（■ 四角）
  • decimal（1, 2, 3… 数字）
  • none（マーカーなし）

list-style-position（マーカーの配置）

list-style-position を使うと、マーカーの位置を変更できます。

使える値

  • outside（リストの外側・デフォルト）
  • inside（リストの内側）

list-style-image（マーカーを画像に変更）

list-style-image を使うと、マーカーを画像に置き換えることができます。

試してみよう！

.custom-list {
    list-style-image: url('marker.png');
}

list-style（まとめ指定）

list-style プロパティを使うと、type、position、image を一括で指定できます。

試してみよう！

.list-example {
    list-style: square inside;
}

問題集

Q1. マーカーを四角にするには？

  1. list-style-type: disc;
  2. list-style-type: square;
  3. list-style-type: circle;

Q2. マーカーをリストの内側に配置するには？

  1. list-style-position: inside;
  2. list-style-position: outside;
  3. list-style-position: none;

✅ 答え: Q1→2, Q2→1

まとめ

  • list-style-type でマーカーの種類を変更
  • list-style-position でマーカーの位置を調整
  • list-style-image でマーカーを画像に変更
  • list-style を使うと、一括で指定できる
  • いろいろな値を試して、リストの見た目をカスタマイズしよう！

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。