HTML/CSS

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

こんにちは、リバティエンジニア[?]の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」はとてもメジャーな言語であり、多くの入門書や参考書があります。その中でもおすすめな本を現役エンジニアの私が解説も入れてご紹介しています。

 

 

Kindle Unlimitedで無料で本が読める

 

Kindle Unlimitedを無料で試す

 

なら最初の30日間は無料でコーディング・デザイン・ブログ・英語・Youtubeの参考書・キャリア・副業・マーケティング・漫画・美容知識・雑誌などが読み放題です。

人気の本もあるので是非お試ししてみてください!30日以内に解約すればお金は全くかかりません。

 


最近の投稿

【今すぐ行動しよう】フリーランスエンジニアとブログの相性は抜群!

フリーランスエンジニアがスキルや経験から得たビジネスノウハウを共有する手段として「ブログ」は非常におすすめです。自身のスキルや知識のアウトプットや、実際に自分が経験したことを共有して同じような境遇の人の手助けになるような情報を公開することで自分に帰ってくるメリットは非常に多いです。今回はそのあたりについて紹介していきます。

【経験談】フリーランスのエンジニアは本当に大変なの?安定のコツやポイント

フリーランスのエンジニアは「大変だからやめとけ」という話をよく聞くので、そのことについて現役でフリーランスエンジニアとして生活している私が、その話の実態を解説しようと思います。フリーランスエンジニアの大変なところはもちろんありますが、それ以上にメリットが多いので私個人的には非常におすすめしています。

【幸福度UP】フリーランスエンジニアの「田舎暮らし」実現できます

フリーランスエンジニアとして田舎で暮らす人が増えてるって聞くけど、本当なのかな?どうやったら実現できるのか?今回はフリーランスエンジニアとして田舎で生活をしたいという方向けに、実現可能なのか、実現するにはどうすれば良いのかをご紹介します。

【単価交渉で収入アップ】フリーランスが単価交渉を成功させる4つのポイント

フリーランスが収入をアップさせるための重要な手段のひとつに「単価交渉」があります。今回は、現役でフリーランスとしてエンジニアをしている私が実践して効果のあった単価交渉の方法やコツをご紹介します。

【 今なら無料!】タスク管理ツール「Backlog」を無料で使う方法と手順

今回は、普段のタスク管理からプロジェクトの管理まで幅広く使えるツール「Backlog」を無料で使うための方法とその手段を画像つきで紹介しました。もし気に入らなければ、期間内に解約してしまえば費用はかかりません。また、以外と知られていない「フリープラン」も紹介しているので、是非参考にしてみてください。

Copyright© FUNA BLOG , 2021 All Rights Reserved.