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.

関連記事

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

こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。   この記事はこんな方におすすめ HTM ...

【2020年最新】HTML/CSSの学習で初心者におすすめしたい本

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。   今回は、 Webサイトを作りたい人やエンジニ ...

【HTML/CSS】 縦方向・横方向で中央揃えしてみよう!

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。   私は現役でフリーランスエンジニアとしてWebサービスや ...

[HTML5] タグ全部紹介します!

目次 はじめにHTML5タグ一覧まとめはじめに 今回はHTML5におけるHTMLタグをすべて公開し、解説していこうと思います。意外と結構多いんですが、わかりやすく簡単に解説していきます! 各タグを詳し ...

【HTML/CSS】コピペでOK!パンくずリストの作り方や基礎を解説

こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。   今回はHTML/CSSでサイトを制作 ...

 

最近の投稿

レバテックキャリアは未経験でも転職できるのか?リアルな口コミで検証します

  こんにちは、リバティエンジニア[?]のFUNAです。 フリーランスの現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ...

レバテックキャリアの悪い評判は本当なのか?利用者から聞く実態と噂の真偽

  こんにちは、リバティエンジニア[?]のFUNAです。 フリーランスの現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ...

その会社は大丈夫?知っておきたいブラック企業の特徴

就職先がブラック企業ではないか不安… 転職を考えているけど、ブラックな会社だったらどうしよう… こういった悩みや不安を抱えている方も多くいると思います。 就職や転職をした際に「この会社、ブラックだった ...

【2020年最新保存版】副業と複業の違いやそれぞれの意味について徹底解説!

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今、話題になっている「テレワーク」という働き方を利用して「 ...

テレワークのセキュリティーについて、注意と対策方法とは!?

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 テレワークを始められる方にとって、気をつけなければいけない ...

Copyright© FUNA BLOG , 2020 All Rights Reserved.