こんにちは、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つ
- チェックマークのファビコンにはFont Awesomeを使う
- チェックマークのファビコンの位置調整には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
