青い★リストマーカーも簡単！箇条書きリストのCSSを使った装飾のやり方

2020年12月9日 2020年12月9日

記事を作成する場合、<ul>タグや<ol>タグを使って箇条書きに簡潔にまとめる作業って大事ですよね。WordPressのグーテンベルグでは、そんな箇条書きや番号付き箇条書きもすぐにできるようになっているのですが、デザインを考える上では少し物足りないです。

そこで今回は箇条書きおよび番号付き箇条書きのCSSを使った装飾について説明します。

<ul>タグや<ol>タグの基本的な使い方

HTML

<ul>
     <li>箇条書き１</li>
     <li>箇条書き２</li>
     <li>箇条書き３</li>
</ul>

上のようにHTMLタグを書くと、以下のように表示されます。

HTML

<ol>
     <li>箇条書き１</li>
     <li>箇条書き２</li>
     <li>箇条書き３</li>
</ol>

上のようにHTMLタグを書くと、以下のように表示されます。

これがulタグとolタグとliタグの使い方の基本です。

箇条書きの最初についているリストマーカーは初期設定では、discになっています。番号付き箇条書きのリストマーカーは、初期設定ではdecimalとなっています。

HTML

<ul class="ul-test1">
    <li>箇条書き１</li>
    <li>箇条書き２</li>
    <li>箇条書き３</li>
</ul>

CSS

.ul-test1 {
    list-style-type: none;
}

このようにリストマーカーがなくなります。

HTML

<ul class="ul-test2">
    <li>箇条書き１</li>
    <li>箇条書き２</li>
    <li>箇条書き３</li>
</ul>

CSS

.ul-test1 {
    list-style-type: square;
}

このようにリストマーカーが■になります。

このようにclass名 {list-style type: 値}と指示することで、リストマーカーを変更することができます。

list-style-typeにはさまざまな種類があります。以下に主なlist-style-typeを載せておきます。

準備されているリストマーカーだけでは足りないと思う方もいるかと思います。ということで、普通に入力できる文字や記号をリストマーカー代わりにして色も変えてみましょう。

HTML

<ul class="star">
    <li class="blstr">箇条書き１</li>
    <li class="blstr">箇条書き２</li>
    <li class="blstr">箇条書き３</li>
</ul>

CSS

.star {
    list-style: none;
    padding:0;
    margin:0;
}

.blstr:before {
    content: "★ ";
    color: blue;
}

すると以下のように表示されます。

デザイン的にも見やすくするためにもリストマーカーは大切です。

本当はリストマーカーに画像も設定できるんですが、長くなりそうなのでまた次回に回します。