わたしと納豆ごはん

納豆、Web、雑記など

トップ > Web > リストのマーカーをCSSでカスタマイズする方法まとめ

リストのマーカーをCSSでカスタマイズする方法まとめ

Web HTML・CSS

HTMLでリストを作ると、自動でマーカーが付きます。非常に便利な機能で、順序付きリストなどでは非常に重宝します。

ですが、このマーカーを大きさや位置を調整しようとすると一筋縄ではいきません。ほぼ出来ないと言ってもいい。

その点を考慮したら、マーカーはオリジナルのものでカスタマイズしたほうが効率的といえます。

そこで今回、リストマーカーのカスタマイズ方法をいろいろ試したので、その備忘録も兼ねて記事としてまとめてみました。

スポンサーリンク

オリジナルのマーカーの設置方法ですが、li要素などのリスト内テキストの先頭に記号や画像などを設置する方法と、記述など何もせずCSSだけでマーカーを設置する方法の2つに大きく分けられます。

リスト先頭の記号や画像などをマーカーとして配置する方法

li要素内に書かれている文章の先頭に、リストマーカーにする記号や画像を記述してCSSでマーカーのように表示させる方法です。

わざわざ記号や画像を先頭に書き込まなくてはいけないというデメリットがありますが、リストごとに自由にマーカーを変えられるという利点があります。

text-indent で一文字ずらす

text-indentを使って先頭文字や記号をマーカーの代わりにする方法です。おそらく最も簡単な方法です。

フォントの記号は、大半は読み上げソフトでも無視されますので、アクセシビリティ的な配慮も期待できます。

ただし記号によっては読み上げてしまいますので、選定には配慮がいります。

参考リンク：総務省｜東海総合通信局｜その4 音声読み上げに配慮したテキスト表記

またフォント自体の種類が変われば、同じ記号でも記号自体の大きさが違うことがあります。つまりブラウザやデバイスが変われば表示がずれることがある。

この場合、Webフォントを使うといった回避策が考えられますが、この方法でリストマーカの代わりに使うのは手軽であっても使いにくいという印象を受けます。

疑似要素 first-letter を使う

先ほどの方法では一文字分しか移動させることができず、マーカーとして認識しにくいこともあります。やはり色や、せめて間隔を調整したいところです。

この点は疑似要素 first-letter を使うことで問題を解消することができます。

ただし疑似要素 first-letter は、一部の文字を一文字目と認識せず次の文字（二文字目）もふくめて要素として認識する場合があります。記号の「・」や「※」などがそれです。

疑似要素first-letterが二文字目も認識した画像

つまり使える記号に制限があるということです。

画像やアイコンを使う

リストアイテムの先頭に画像やアイコンを記述し、それをマーカーの代わりにする方法です。

上2段が画像を使ったもので、下2段がアイコンを使ったものです。

アイコンのリストの上のもの（リスト3）は Font Awesome を使ったものですが、一番下のアイコンは CSS だけでデザインしたアイコンです。

これは CSS だけでアイコンを表現するライブラリ「 CSS ICON 」を参考にしています。

参考リンク：CSS ICON -- project by Wenting Zhang

先頭に要素を入れているので、その要素などに CSS でマーカーになるよう指定するだけです。指定方法は position や margin などいろいろな方法があります。

CSSだけでマーカーを実装する方法

先ほどのようにリスト先頭に記号や画像を書き込むことなどせず、CSS だけでマーカーを設置する方法です。

先頭にわざわざ記述する手間がなく、CSS で一元管理もできるため、現実的にリストマーカーのカスタマイズするとなればこちらの方法を取ることが多いと思います。

li要素の背景として設置する

この方法は li要素にマーカー分の余白を作り、そこに背景画像を設置するものです。つまりマーカーを背景画像で代用するというものです。

li 要素に余白を作るため、デフォルトで余白の指定をしている ul 要素の余白は無くしておきます。画像の大きさや位置の調整は、各 background のプロパティで指定します。

またこの方法では、上記のサンプルのように background-position にcenterなどを指定したら、リストが複数段になったときにマーカーが真ん中にくる、といったカスタマイズもできる特徴があります。

疑似要素を使う

要素の先頭にアイコンといったものを入れる方法で思いつくのは、やはり before といった疑似要素を使った方法です。

リストマーカーでもこの方法は当然使えます。アイコンや画像といった選択肢の自由度も高いため、リストマーカーをカスタマイズする方法としては有力です。

マーカーを設置する方法も、多くの方法があります。その中でも position や margin（ネガティブマージン）を使った方法が簡単です。

ちなみに Flexbox で指定する方法も試してみましたが、リストの中にリストを入れる入れ子構造にしたときに上手く表示できないので採用しませんでした。

おまけ1：デフォルトのマーカーでの位置調整

わたしがどうしてマーカーのカスタマイズを調べたのかと言えば、デフォルトのマーカーは和文ではちょうど真ん中にマーカーがあるわけでは無いからです。

ためしにlist-style-position:insideでマーカーをli要素の内側に表示させ、マーカーの形を circle にしたものが、こちらです。

リストマーカーの位置を見えやすくした画像

画像はパソコン版Chromeのスクショで、見やすくするために表示を拡大し、背景色を真ん中から色を変えています。見てのとおり微妙に真ん中ではありません。

これはフォントがデフォルトの大きさ程度やそれ以下なら気にならないのですが、フォントを大きくすると意外と気になったりします。

ところで、この位置をデフォルトのままで調整するにはどうすればいいかと言えば、今のところ span や a といった何らかの要素でテキストを囲み、position:relativeなどで位置を調整するのが1番簡単です。

ほんと、わずかしか違いはないんですけどね（笑）

これで問題が解消すればまだ良いのですが、マーカーの位置はブラウザや環境によっても変わるので、結局のところそれらが変わることで位置がずれることがあります。

なので、元からあるマーカーの位置をCSSだけで真ん中などで統一させることは至難の技で、また先ほど記述したカスタマイズ方法など CSS で似たようなものを簡単に設置できるので、そちらを使うことが多いと思います。

おまけ2：このブログのスマホ版で使っていたリストマーカー

一応、当ブログのスマホ版で使っていた CSS も残しておきます。ご参考になれば幸いです。

ul {
    list-style: none;
    margin-left: 1em;
    padding-left: 1em;
}
ul > li::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 0.35em;
    margin: 0.425em 0.825em 0.225em -1.175em;
    width: 0.35em;
}
li ul {
    margin-left: 0;
}
li ul > li::before {
    background: transparent;
    border: 0.07em solid currentColor;
    box-sizing: border-box;
    margin: 0.425em 0.325em 0.225em -0.675em;
}

以上、リストマーカーのカスタマイズに関するまとめでした。

スポンサーリンク