チェックマークをフェードしながら表示するチェックボックスの作り方
チェックマークをフェードしながら表示するチェックボックスの作り方を、HTMLとCSSのサンプルコードを使って紹介します。通常のチェックボックスとは異なり、チェックした瞬間にチェックマークをそのまま表示するのではなく、透明な状態から徐々に表示しながら小さい状態から拡大させることで、選択したことが視覚的に分かりやすい動きを加えます。
サンプルでは大きめのチェックボックスを1つ配置し、チェックするとCSSのopacityを0から1へ、scale()を0から1へ変化させます。2つの変化をtransitionでアニメーションさせることで、チェックマークがフェードしながら拡大して表示されます。JavaScriptは使用せず、HTMLのチェック状態を表す:checkedとCSSだけで動作を実装しています。
お問い合わせ画面の同意確認、会員登録画面の確認項目、ECサイトのオプション選択、設定画面のON・OFF項目など、チェックした状態を分かりやすく見せたい場面で利用できます。チェックボックスの大きさや枠線、チェックマークの色、フェードと拡大の速度などはCSSから変更できます。また、画面幅が狭い場合には外側の余白や文字サイズを調整するため、PCだけでなくスマートフォンでも利用しやすい構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
チェックボックスをクリックして動きを確認してください。
チェックすると、チェックマークがフェードしながら拡大して表示されます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>フェードするチェックマーク</title>
<link
rel="stylesheet"
href="style.css"
>
</head>
<body>
<!-- チェックボックス全体 -->
<div class="fade-checkmark-checkbox_wrap">
<!-- チェックボックス配置エリア -->
<div class="fade-checkmark-checkbox_area">
<label class="fade-checkmark-checkbox_label">
<!-- 実際のチェックボックス -->
<input
class="fade-checkmark-checkbox_input"
type="checkbox"
name="agreement"
value="yes"
>
<!-- CSSでチェックマークを描画するボックス -->
<span
class="fade-checkmark-checkbox_box"
aria-hidden="true"
></span>
<!-- 項目名 -->
<span class="fade-checkmark-checkbox_name">
チェックする
</span>
</label>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLにはチェックボックス本体と表示用のチェックボックス、項目名を記述し、CSSでチェックマークの形やフェードアニメーション、全体のデザインを設定しています。
JavaScriptは使用していません。HTMLのチェックボックスが持つチェック状態とCSSの:checkedを組み合わせ、チェックされた場合だけチェックマークを表示します。さらにopacityとscale()を変化させることで、フェードと拡大を組み合わせた表示を実現しています。
外部ライブラリ、画像、外部サービスなども使用していないため、必要なのはindex.htmlとstyle.cssだけです。2つのファイルを同じフォルダへ配置すれば、そのままブラウザで動作を確認できます。
sample/
├── index.html
└── style.css
index.htmlには、実際のinput type="checkbox"、画面上に表示するチェックボックス、項目名を記述しています。標準のチェックボックスは視覚的に隠していますが、チェック状態そのものはHTMLのチェックボックスで管理しています。
style.cssでは、チェックボックスのサイズや枠線、チェックマークの形、フェードと拡大のアニメーションを設定しています。チェックマークは画像ではなく、疑似要素の右線と下線を回転させてCSSで描画しています。
sampleフォルダ内にindex.htmlとstyle.cssを配置します。index.htmlから同じ階層にあるstyle.cssを読み込む構成になっているため、基本的にはファイル構成を変更する必要はありません。
設置後にsample/index.htmlをブラウザで開くと、中央に大きめのチェックボックスが表示されます。「チェックする」の項目をクリックまたはタップするとチェック状態になり、チェックマークがフェードしながら拡大して表示されます。もう一度操作するとチェック状態が解除されます。
チェックボックスの大きさは.fade-checkmark-checkbox_boxのwidthとheight、枠線はborder、角丸はborder-radiusから変更できます。
チェックマークの大きさは疑似要素のwidthとheight、線の太さや色はborder-rightとborder-bottomで調整できます。チェックボックスとチェックマークの色を変更すれば、サイトのデザインに合わせた配色にできます。
フェードと拡大の速度はtransitionに指定している.25sで調整できます。数値を小さくすると素早く、大きくするとゆっくりとチェックマークが表示されます。
全体の最大横幅は620px、内側の余白は48px 32pxです。チェック項目の内側には20px 26pxの余白を設定し、チェックボックスと文字の間隔は18pxにしています。
表示用チェックボックスは40px × 40px、枠線は3px、角丸は8pxです。チェックマークは横幅10px、高さ20px、線の太さ4pxで作成しています。
アニメーション時間はフェードと拡大の両方を.25sにしています。opacity:0からopacity:1へ変化することで透明な状態から表示され、同時にscale(0)からscale(1)へ変化することでチェックマークが拡大します。
画面幅が640px以下になると、ページ全体の余白を24px 12px、チェックボックス全体の内側余白を36px 18pxへ変更します。
チェック項目の内側余白は18px 20px、チェックボックスと項目名の間隔は14px、文字サイズは18pxへ調整します。チェックボックス自体の大きさは維持するため、スマートフォンでもフェードするチェックマークの動きを確認しやすい構成です。
コメント