CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけでチェックマークを作成する方法【サンプルコード付き】

CSSを使えば、画像ファイルやアイコンフォントに頼ることなく、独自デザインのチェックマークを作成できます。この記事では、::before／::after の疑似要素を活用する方法と、border＋transform を使うシンプルな方法の2つの実装例を、サンプルコードと実行結果あわせて紹介します。

方法1：疑似要素（::before / ::after）を使う方法

1つ目の例では、正方形のボックスに対して ::before と ::after の2つの疑似要素を配置し、それぞれを回転させることで、チェックマークを構成する「短い線」と「長い線」を描画しています。

<!DOCTYPE html>
<html>
<style>
div {
   margin: 2%;
   position: relative;
   width: 40px;
   height: 40px;
   box-shadow: inset 0 0 12px lightblue;
}
div::before {
   content: "";
   position: absolute;
   width: 8px;
   top: 50%;
   height: 50%;
   border-radius: 2px;
   background-color: rgb(123,45,20);
   transform: translateX(12px) rotate(-45deg);
   transform-origin: left bottom;
   z-index: +1;
}
div::after {
   content: "";
   position: absolute;
   bottom: 0;
   height: 8px;
   width: 100%;
   border-radius: 2px;
   background-color: rgb(200,52,120);
   transform: translateX(12px) rotate(-45deg);
   transform-origin: left bottom;
}
</style>
<body>
Custom mark!
<div></div>
</body>
</html>

実行結果

このコードを実行すると、次のように表示されます。

CSSだけでチェックマークを作成する方法【サンプルコード付き】

ポイント解説

  • transform: rotate(-45deg) によって、各バーを斜めに傾けています。
  • transform-origin: left bottom を指定することで回転の基準点が左下になり、2本の線がきれいにつながります。
  • box-shadow: inset ... でボックス内側に淡い影を付けることで、チェックマークが視覚的に際立ちます。
  • background-color を変えれば、2本の線にそれぞれ別の色を適用できるのもこの方法の利点です。

方法2：border と rotate を使うシンプルな方法

2つ目の例はさらにシンプルです。空のdiv要素に border-bottom と border-right を設定し、45度回転させるだけでチェックマークを表現できます。「L字を45度回転させた形」がチェックマークになる、という発想です。

<!DOCTYPE html>
<html>
<style>
body {
   padding: 2%;
   text-align: center;
}
div {
   display: inline-block;
   height: 100px;
   width: 35px;
   border-bottom: 10px solid chartreuse;
   border-right: 10px solid chartreuse;
   transform: rotate(45deg);
}
</style>
<body>
<div></div>
</body>
</html>

実行結果

このコードを実行すると、次のように表示されます。

CSSだけでチェックマークを作成する方法【サンプルコード付き】

ポイント解説

  • width と height の比率を変えることで、チェックマークの縦横比を自由に調整できます。
  • border の太さや色を変更すれば、好みのデザインへ簡単にカスタマイズ可能です。
  • 記述量が非常に少なく、リストのチェック表示など手軽な用途に向いています。

まとめ

どちらの方法も外部リソースが不要で軽量な点が魅力です。疑似要素を使う方法は細かいデザイン調整に柔軟に対応でき、border＋rotate の方法はコードが短く実装の手間が少ないのが特徴です。用途やデザイン要件に応じて使い分けるとよいでしょう。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSで4列のレイアウトグリッドを作成する方法

    CSSで4列のレイアウトグリッドを作成するには、各カラムとなる要素に float: left; を指定し、幅を 25% に設定するのが基本的な手法です。これにより、4つの要素が横一列に均等に並びます。以下に具体的なコード例を示します。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {