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

HTML/CSS

こんにちは、mickです。

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

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

段落(P要素)の文頭にチェックマークを付ける

段落(P要素)の文頭にチェックマークを付けていきます。

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

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

チェックマークを文頭に付けてみた

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

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

チェックマークを文頭に付けてみた

具体的なCSSコーディング

.check-mark {
	font-size: 1.1rem;
	font-weight: bold;
	position: relative; /*ファビコンを動かす基準にする*/
	padding-left: 1.1rem; /*font-sizeと同じにするとバランスがいい*/
}
.check-mark::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
position: absolute; /*上の基準からabsoluteで位置を調整*/
left: -0.4rem; /* アイコンのスタート位置 */
color: #4169e1;
}

解説:ポイントは2つ

CSSのコーディングのポイントは2つです。

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

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

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

Cocoonならデフォルトで入っています。
Font Awesomeを使う方法はこちらの記事で紹介しています。

よければどうぞ。

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

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

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

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

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

まとめ。

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

CSSの擬似クラスやabsoluteを使って位置調整、ファビコンを使うなど、短いコードながら内容は濃いと思います。

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

初稿 2020/11/27

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