【CSS】箇条書きのマーカーをレベルによって変える方法

はじめに

箇条書きを入れ子にした際、マーカーを入れ子構造がわかりやすいように変更する方法のメモ。

入れ子構造の時にマーカーを変更する

CSSの記載方法

/* １段目 */
.entry-content ul {
    list-style-type: disc;
}
/* ２段目 */
.entry-content ul > li > ul {
    list-style-type: circle;
}
/* ３段目 */
.entry-content ul > li > ul > li > ul {
    list-style-type:square ;
}
/* ４段目 */
.entry-content ul > li > ul > li > ul > li > ul {
    list-style-type:"\1F337" ;
}

list-style-typeオプションについて

オプションで指定する方法

• disc（黒丸）
• circle（白丸）
• square（四角）

等から選ぶことができる。

list-style-type - CSS: カスケーディングスタイルシート | MDN

文字コードでマーカーを指定する方法

４段目は、マーカーを文字コードで指定している。 文字コードは以下のサイトを参考にした。

gray-code.com

上記サイトの16進数の列に🌷とある絵文字を使うときは、

list-style-type:"\1F337" ;

と指定する。

参考：HTMLの中身

<ul>
    <li>１段目 
        <ul>
            <li>２段目
                <ul>
                    <li>３段目
                        <ul>
                            <li>４段目</li>
                        </ul>
                    </li>
               </ul>
            </li>
        </ul>
    </li>
</ul>