CSSでチェックマークをリストに付ける【ポイントは4つ+2】

CSSでチェックマークをリストに付ける【ポイントは4つ+2】 HTML/CSS

こんにちは、mickです。

プログラマ系SEとしてIT企業で11年勤務。

HTMLではリストで表現できる中にチェックマークがありません。

CSSを使うことでチェックマークをつけることができます。

2020/11/28追記
ファビコンを使ってチェックマークをリストに付ける記事を書きました。
⇒ CSSでチェックマークをリストに付ける方法【ファビコン版】

リストにチェックマークをつける

リストにチェックマークを付けてみたいと思います。

サンプルプレビュー

  • リストのチェックマーク
  • リストのチェックマーク
  • リストのチェックマーク

コーディング

HTML部分

<ul class="check-list">
   <li>リストのチェックマーク</li>
   <li>リストのチェックマーク</li>
   <li>リストのチェックマーク</li>
</ul>

CSS部分

.check-list {
	list-style: none;
	padding: 0;
}

.check-list li{
	position: relative;
	padding-left: 3em;
}

.check-list li::before{
	content:'';
	width: 1em;
	height: 0.6em;
	border-top-width: 0;
	border-right-width: 0;
	border-left: 3px solid #4169e1;
	border-bottom: 3px solid #4169e1;
	position: absolute;
	top: 50%;
	left: 0.8em;
	-webkit-transform: translateY(-80%) rotate(-45deg);
	transform: translateY(-80%) rotate(-45deg);
}

ポイントは6つ

  1. list-styleであらかじめリストのマークを消す
  2. CSSが箇条書きLI要素にかかるように記述する
  3. padding-leftでチェックマークのスペースを空ける
  4. ::beforeの指定で文頭より前に作用させる
  5. borderで疑似チェック作成
  6. transformでの回転

.check-listのlist-styleでnoneを指定することでリストのマークを消します。

「.check-list li」と「.check-list li::before」としてCSSが箇条書きLI要素にかかるように記述します。

.check-listのpadding-leftでチェックマークを描くスペースを空けます。

.check-list::beforeの::beforeで文頭よりも前に作用するようにします。

.check-list::beforeのborderを使って擬似的にL字を作ります。
そしてtransformでこのL字を回転させてチェックマークが完成します。

まとめ。順を追ってコーディングする

ポイントの3から6は前回記事のポイント4つと同じです。

前回の記事を踏まえてやると、非常にやりやすいと思います。

このようにコーディングは一気に書くよりも順を追って書く方が、コーディングがしやすい場合があります。

コーディングに詰まったら、試してみてもいいと思います。

以上、みなさまの助けなれば幸いです。

初稿 2020/07/19

タイトルとURLをコピーしました