【簡単】CSSでチェックマークを作る方法【コピペOK】

2023年2月6日2023年5月2日

記事内に広告を含みます

パソ君

・CSSのみでチェックマーク作れる？

こんな疑問にお答えします。

デザインによっては✔チェックマークをコーディングすることがありますよね。

単純な形ならCSSで作ることが可能です。

それも簡単に！

ジト

すぐにできるよ！

ということで、この記事では「CSSでチェックマークを作る方法」について解説していきます！

この記事でわかること

・CSSでチェックマークを作る方法

【簡単】CSSでチェックマークを作る方法【コピペOK】
【簡単】CSSでチェックマークを作る方法【疑似要素で作成】
- 要素にpaddingをつけておき、位置調整しやすくしよう
【簡単】CSSでチェックマークを作る方法【コピペOK】：まとめ

【簡単】CSSでチェックマークを作る方法【コピペOK】

CSSのみでチェックマークを作成したサンプルがこちらになります。

See the Pen ➀チェックマーク by jito-coder (@jito-coder) on CodePen.

✔の形で表示されていますよね。

<div class="check-mark"></div>

.check-mark {
    width: 20px;
    height: 10px;
    border-left: 3px solid #000066;
    border-bottom: 3px solid #000066;
    transform: rotate(-45deg);
}

チェックマークの作成方法の手順がこちら↓

コンテンツの縦横幅をとる
ボーダーを引く
ボーダーの位置を左＋下のみにする
コンテンツの角度をー45度傾ける

順に見ていきましょう！

➀：コンテンツの縦横幅をとる

まずコンテンツの縦横幅をとりましょう。

比率的に横幅を長くしておきます。

.check-mark {
    width: 20px;
    height: 10px;
}

➁：ボーダーを引く

次にボーダーを引きます。

.check-mark {
    width: 20px;
    height: 10px;
    border: 3px solid #000066;
}

➂：ボーダーの位置を左＋下のみにする

➁で入れたボーダーの位置を、左＋下のみに指定しましょう。

.check-mark {
    width: 20px;
    height: 10px;
    border-left: 3px solid #000066;
    border-bottom: 3px solid #000066;
}

➃：コンテンツの角度をー45度傾ける

あとはボーダーの位置を傾けるだけ。チェックマークのデザインになります。

.check-mark {
    width: 20px;
    height: 10px;
    border-left: 3px solid #000066;
    border-bottom: 3px solid #000066;
    transform: rotate(-45deg);
}

これで完成！簡単にできますよね！

【簡単】CSSでチェックマークを作る方法【疑似要素で作成】

場合によっては文書の手前にチェックマークがありますよね。
その時は、疑似要素で作成したほうが都合が良いです。

そんなサンプルがこちら↓

See the Pen ➀チェックマーク by jito-coder (@jito-coder) on CodePen.

<p class="check-mark">この文章の手前にチェックマークがつきます</p>

.check-mark {
    padding-left: 25px;
    position: relative;
}

.check-mark::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 10px;
    border-left: 3px solid #000066;
    border-bottom: 3px solid #000066;
    transform: rotate(-45deg);
}