こんにちは、リバティエンジニア[?]のFUNA(フナ)です。
現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。
この記事はこんな方におすすめ
- HTML/CSSでチェックマークの実装方法が知りたい方
- コピペでチェックマークを実装したい方
今回は、HTML/CSSでコピペで簡単に実装することができるチェックマークのご紹介をします。
リストなどを作る際に様々なデザインを適用したい場合のひとつとして、是非ご活用ください。
目次
【HTML/CSS】コピペOK!チェックマークのソースコード
早速ソースコードをみてみましょう。
今回はul,liタグを使ったリストで実装しています。
See the Pen 【HTML/CSS】チェックマーク by TAKUYA FUNABIKI (@takuya20180216) on CodePen.
【HTML/CSS】チェックマークのソースコード解説
まず知っておいて欲しいのでが、チェックマークは「枠線」を利用しているということです。
枠線を使うときは通常「border」というプロパティを使います。
ポイント
borderプロパティのleftとbottomだけを使ってチェックマークの形を作り、角度を変えるだけで完成!
まずは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要素だけを使ってもできますので用途によって使い分けてくださいね。
See the Pen 【HTML/CSS】チェックマーク by TAKUYA FUNABIKI (@takuya20180216) on CodePen.
See the Pen 【HTML/CSS】チェックマーク解説③(完成) by TAKUYA FUNABIKI (@takuya20180216) on CodePen.
関連記事
-
CSSアニメーションを簡単に実装!コピペOKのサンプルコード付き【HTML/CSS】
CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。
-
【HTML/CSS】z-indexで重なり順を指定。効かない時の対処法はコレ!
今回はHTML/CSSで要素の重なり順を指定する方法として、CSSプロパティz-indexについて初心者の方でも分かりやすく解説します。設定しても上手く効かない時の対処法も紹介しています。
-
【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介
HTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。初心者の方でもわかりやすいようにコピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。
-
【HTML/CSS】コピペでOK!チェックマークを作る簡単な方法
こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ HTM ...
-
【2021年最新】HTML/CSSの学習で初心者におすすめしたい本【ベスト5!】
2021年最新版のHTML/CSSの勉強でおすすめの本を紹介します。「HTML/CSS」はとてもメジャーな言語であり、多くの入門書や参考書があります。その中でもおすすめな本を現役エンジニアの私が解説も入れてご紹介しています。