CSSでチェックマークをリストに付ける方法【ファビコン版】

CSSでチェックマークをリストに付ける方法【ファビコン版】 HTML/CSS

こんにちは、mickです。

CSSの勉強でチェックマークをリストに付ける記事を紹介しました。

ここではコレを改造したファビコン版としてチェックマークをリストにつける方法を紹介します。

リスト(LI要素)の文頭にチェックマークを付ける

リスト(LI要素)の文頭にチェックマークを付けていきます。

前の記事で紹介したファビコンなし版プレビュー

前の記事で紹介したファビコンなし版プレビューはこちら。

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

今回の実装したファビコン版プレビュー

今回の記事で紹介するファビコン版プレビューはこちら。

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

具体的なCSSコーディング

リスト(LI要素)の文頭にファビコンのチェックマークを付けるCSSコードです。

.check-list {
	list-style: none;
}
.check-list li {
position: relative; /*ファビコンを動かす基準にする*/
}
.check-list li::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
position: absolute; /*上の基準からabsoluteで位置を調整*/
left: -1.4rem; /* アイコンのスタート位置 */
color: #4169e1;
}

解説:ポイントは2つ

  1. チェックマークのファビコンにはFont Awesomeを使う
  2. チェックマークのファビコンの位置調整にはrelativeとabsoluteを使う

実は前回の「CSSでチェックマークを文頭に付ける方法【ファビコン版】」のポイントと同じなんですね。
ここではそれをリストのLI要素で使えるように改変しただけになります。

説明は繰り返しになりますが、ここでも載せておきます。

ちなみに.check-listセレクタで「list-style: none;」を指定しているのは、このセレクタをUL要素やOL要素で指定して使うこと想定しているから。

チェックマークのファビコンにはFont Awesomeを使う

チェックマークのファビコンには有名な「Font Awesome」を使っています。

Font Awesomeは、使っているWordPressテーマがCocoonならデフォルトで利用できます。
Font Awesomeを使う方法はこちらの記事で紹介しています。

よければどうぞ。

チェックマークのファビコンの位置調整にはrelativeとabsoluteを使う

チェックマークのファビコンの位置調整にはrelativeとabsoluteを使います。

paddingやmarginなどを使って位置調整をすると、フォントによってチェックマークと文字が重なることがあるためです。

この位置調整については次のWebページを参考にさせてもらいました。

⇒ リストの二行目をインデントさせて揃える方法 | アップ生活 | 備忘録

まとめ。

ファビコンを使ってチェックマークをリストに付ける方法を紹介しました。

ファビコンを使うとコードはだいぶスッキリします。

これができれば、ファビコンのユニコードを変えれば、チェックマーク以外、たとえば○マークや×マークなども簡単に応用できて便利。

CSSの勉強の参考してもらえると嬉しいです。

初稿 2020/11/27

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