はじめに

2022年9月現在、当サイトで一番アクセスが多いページが「<ul><li>の見出しに画像を使う方法　4パターン」です。

リストタグに画像を使いたい人が検索しているのだと思いますが、そんな中「チェックマーク（四角の中にチェックを入れたアレ）を画像じゃなくてCSSで作れるんじゃないかな？」と思って実際に試してみましたので、作り方を紹介します。

仕上がりイメージ

作り方としては、疑似要素beforeとafterを使います。

beforeで四角の枠の部分を作り、afterでチェック部分を作ります。

afterの方がbeforeより上に配置されるので、この記述が逆になると「チェックマークの上に四角が配置される」ようになってしまいます（下のリストのようになります）。

目次

チェック部分のもとを作る

チェックマークと四角はどちらから作っても良いのですが、今回は疑似要素after内のチェックマークから作っていきます。

まずはチェックマークは疑似要素で長方形を作り、それに左と下にborderを設定します。

ulはlist-style:none;を設定してデフォルトのリストが表示されないようにします。

また、liはpadding-leftであらかじめテキストを右に寄せておきます（テキストとチェックが重なるため）。

HTML

<ul class="sample01">
　<li>リスト</li>
　<li>リスト</li>
　<li>リスト</li>
</ul>

CSS

.sample01 {
　list-style:none;
}
.sample01 li {
　position: relative;
　padding-left: 40px;
　box-sizing:border-box;
}
.sample01 li:after {
　position: absolute;
　content: '';
　width: 14px;
　height: 6px;
　top: 0;
　left: 0;
　border-left: 2px solid #40477e;
　border-bottom:  2px solid #40477e;
}

できあがったもの

ここでできたborderを回転させるとチェックマークになります。

チェック部分を回転させる

作成したborderを回転させてチェックマークを作ります。

要素を回転させるにはtransform: rotate();を使います。

-45度回転させるとチェックマークになるのでransform: rotate(-45deg);という記述になるので、上記のCSSにこれを追記します。

CSS

.sample01 {
　list-style:none;
}
.sample01 li {
　position: relative;
　padding-left: 40px;
　box-sizing:border-box;
}
.sample01 li:after {
　position: absolute;
　content: '';
　width: 14px;
　height: 6px;
　top: 0;
　left: 0;
　border-left: 2px solid #40477e;
　border-bottom:  2px solid #40477e;
　transform: rotate(-45deg); /*これを追記*/
}

できあがったもの

after部分はこれで完成です。次にbeforeで四角を作っていきます。

四角部分を作る

四角部分は疑似要素beforeで作っていくのですが、これはafterよりも簡単で、要は正方形のborder作ってしまえば良いです。

CSS（追記のみ）

.sample01 li:before {
　position: absolute;
　content: '';
　top: 0;
　left: 0;
　width: 12px;
　height: 12px;
　border: 2px solid #ccc;
}

できあがったもの

これでチェックマークと四角は完成ですので、あとはレイアウトに合わせて位置を調整すると見栄えが良くなります。

位置を調整する

チェックや四角の位置を調整して、見た目を整えます。疑似要素内のtopやleft、liにmargin-bottomを追記したりpadding-leftの値を変更していきます。

CSS

それぞれの数値は実際の環境に合わせて変更してみてください。

.sample01 {
　list-style:none;
}
.sample01 li {
　position: relative;
　padding-left: 22px;
　margin-bottom: 10px;
　box-sizing:border-box;
}
.sample01 li:before {
　position: absolute;
　content: '';
　top: 2px;
　left: 0;
　width: 12px;
　height: 12px;
　border: 2px solid #ccc;
}
.sample01 li:after {
　position: absolute;
　content: '';
　width: 14px;
　height: 6px;
　top: 0;
　left: 2px;
　border-left: 2px solid #40477e;
　border-bottom:  2px solid #40477e;
　transform: rotate(-45deg); /*これを追記*/
}

できあがったもの

これで完成です。

チェックマークについては別に無理してCSSを使わず、画像で表示させても良いかなと思います。

レスポンシブ対応時に画像サイズを縮小させると表示が少々おかしくなる、という場合だとCSSでチェックマーク作っても良さそうですね。