Webデザインにおいて、チェックマークは頻繁に使用される要素の一つです。例えば、項目が完了したことを示す際や、選択肢が選ばれていることをユーザーに知らせる場合などがあります。しかし、HTMLとCSSの初心者にとっては、このようなシンボルを作成するのは少し難しそうに感じられるかもしれません。この記事では、CSSだけで簡単にチェックマークを作成する方法を詳細に解説します。
HTMLの構造
まずはHTMLの構造を簡単に作ります。チェックマークを表示するためのdiv要素を作成し、そのdiv要素にクラス名として .checkmark を指定します。
<div class="checkmark"></div>CSSでデザイン
次に、CSSを使ってこのdiv要素をスタイリングします。以下のコードは .checkmark クラスを持つdiv要素に対して、チェックマークを描画する一例です。
.checkmark {
width: 20px;
height: 20px;
position: relative;
}
.checkmark::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border: solid blue;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
background-color: transparent;
}- position: relative;: .checkmark divに対する基準点を設定します。
- ::after: 擬似要素を用いて、チェックマークを描画します。
- content: “”;: 擬似要素の内容を空に設定します。
- border: solid white;: 枠線を白で描きます。
- border-width: 0 2px 2px 0;: 右と下に2pxの枠線を描きます。
- transform: rotate(45deg);: 擬似要素を45度回転させます。
サンプル
まとめ
この方法は非常にシンプルで、多くのケースで十分な機能を提供します。ただし、より複雑なデザインやアニメーションを求める場合は、SVGやJavaScriptを使う方法もあります。しかし、基本的な用途にはこのCSSだけの方法で十分対応可能です。
以上が、CSSで簡単にチェックマークを作成する方法です。コードは自由にカスタマイズして、自分のプロジェクトに合わせて使用できます。ぜひお試しください。
