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

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

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

この記事はこんな方におすすめ

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

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

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

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

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

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

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

ポイント

borderプロパティのleftとbottomだけを使ってチェックマークの形を作り、角度を変えるだけで完成！

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

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

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

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

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

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

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

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

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

: 【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】
今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。

: 【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法
今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。