こんにちは、リバティエンジニア[?]の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.
HTML/CSSの学習におすすめの参考書
HTML/CSSの学習は実際に手を動かすことが非常に大切です。
ここでは、実際に手を動かしながら学習を進めることができる参考書をご紹介しますので、気になる方はぜひ試してみてください！
学習が思うように進まない場合はスクールなども検討しましょう
HTMLやCSSを独学で学習している方も多くいらっしゃいます。
このようなプログラミングでは挫折する方も多く、その理由の多くに「問題が解決できない」ということがあります。
プログラミングスクールに通うことで、わからないことはすぐにプロのエンジニアに相談でき、モチベーションの維持につながるのです。
気になる方は下の記事を見てみてください。
>> 【2021年最新版】初心者におすすめ！プログラミングスクールの選び方【無料体験もあり！】
関連記事
-
【コピペOK！】ブロックの中のブロック要素を上下左右中央に揃える方法【HTML/CSS】
FUNAこんにちは、リバティエンジニアのFUNA（フナ）です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ブロ ...
-
【CSS】たった1行のコピペで簡単！object fitで画像をトリミングする方法
CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。
-
【コピペOK】CSSでcounterを利用して自動ナンバリングする方法
今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。
-
【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】
今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。
-
【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法
今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。