【HTML/CSS】コピペでOK！チェックマークを簡単に実装する方法

こんにちは、リバティエンジニア[?]のFUNA（フナ）です。

現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回は、HTML/CSSでコピペで簡単に実装することができるチェックマークのご紹介をします。

リストなどを作る際に様々なデザインを適用したい場合のひとつとして、是非ご活用ください。

【HTML/CSS】コピペOK！チェックマークのソースコード

早速ソースコードをみてみましょう。

今回はul,liタグを使ったリストで実装しています。

See the Pen 【HTML/CSS】チェックマーク by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

【HTML/CSS】チェックマークのソースコード解説

まず知っておいて欲しいのでが、チェックマークは「枠線」を利用しているということです。

枠線を使うときは通常「border」というプロパティを使います。

まずはborderプロパティで四角形を作る

下記のように、記述すると四角形を作ることができます。

See the Pen 【HTML/CSS】チェックマーク解説① by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

borderプロパティの「left,bottom」のみでチェックマークの形を作る

css5行目の「border: 3px solid #9c9c9c;」ですが、詳細に見ると「top,right,bottom,left」と分かれています。

それを利用して、チェックマークを作りたいときには「left,bottom」のみを使って実現します。

See the Pen 【HTML/CSS】チェックマーク解説② by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

【完成】仕上げに角度を調整

最後に上で作ったチェックマークの角度を、正しい角度にしていきましょう。

角度を変えるには「transform: rotate(-45deg);」の数字部分で角度を指定します。

See the Pen 【HTML/CSS】チェックマーク解説③（完成） by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

【HTML/CSS】リストのチェックマークに枠をつける

では次にリストのチェックマークに枠をつけてみましょう。

方法はシンプルで、liに擬似要素「:after」をつけて枠線をつけています。

See the Pen 【HTML/CSS】枠付きチェックマークリスト by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

【HTML/CSS】チェックマークのまとめ

今回はHTML/CSSで簡単に作れるチェックマークをご紹介しました。

ここではul,li要素に対して作りましたが、div要素だけを使ってもできますので用途によって使い分けてくださいね。

 ul,li要素で作ったチェックマーク

See the Pen 【HTML/CSS】チェックマーク by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 div要素で作ったチェックマーク

See the Pen 【HTML/CSS】チェックマーク解説③（完成） by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

HTML/CSSの学習におすすめの参考書

HTML/CSSの学習は実際に手を動かすことが非常に大切です。

ここでは、実際に手を動かしながら学習を進めることができる参考書をご紹介しますので、気になる方はぜひ試してみてください！

学習が思うように進まない場合はスクールなども検討しましょう

HTMLやCSSを独学で学習している方も多くいらっしゃいます。

このようなプログラミングでは挫折する方も多く、その理由の多くに「問題が解決できない」ということがあります。

プログラミングスクールに通うことで、わからないことはすぐにプロのエンジニアに相談でき、モチベーションの維持につながるのです。

気になる方は下の記事を見てみてください。

>> 【2021年最新版】初心者におすすめ！プログラミングスクールの選び方【無料体験もあり！】

関連記事