チェックマークをアニメーション表示するチェックボックスの作り方
チェックマークをアニメーション表示するチェックボックスの作り方を紹介します。HTMLとCSSだけを使い、チェックした瞬間にチェックマークがアニメーションしながら表示されるサンプルです。シンプルなチェックボックスよりも視覚的に分かりやすく、操作感を向上させたい場合に利用できます。
このサンプルでは、標準のチェックボックスをCSSでカスタマイズし、チェック状態に応じてチェックマークをアニメーション表示します。JavaScriptを使用しないため導入しやすく、アニメーション時間や色、サイズなどもCSSを書き換えるだけで簡単に変更できます。
お問い合わせフォームや会員登録画面、設定画面、アンケートフォームなど、チェックボックスを利用するさまざまなWebページで活用できます。見た目を少し華やかにしたい場合や、チェック状態を分かりやすく表現したい場合にもおすすめです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
チェックするとチェックマークがアニメーション表示されます。
チェックボックスをクリックすると、チェックマークが拡大しながら表示されるアニメーションを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォンやタブレットの表示幅へ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ブラウザのタブへ表示するページタイトル -->
<title>チェックマークをアニメーション表示するチェックボックス</title>
<!-- チェックボックスのデザインを設定するCSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- チェックボックス全体を囲む表示エリア -->
<div class="animated-checkmark-checkbox_wrap">
<!-- チェックボックスエリアのタイトル -->
<div class="animated-checkmark-checkbox_title">
チェックマークアニメーション
</div>
<!-- チェックボックスの動作を案内する説明文 -->
<p class="animated-checkmark-checkbox_text">
チェックするとチェックマークがアニメーション表示されます。
</p>
<!-- 複数のチェックボックスをまとめる一覧 -->
<div class="animated-checkmark-checkbox_list">
<!-- HTMLのチェックボックス項目 -->
<label class="animated-checkmark-checkbox_label">
<!-- HTMLの選択状態を管理するチェックボックス -->
<input
class="animated-checkmark-checkbox_input"
type="checkbox"
name="interest[]"
value="html">
<!-- HTML用のチェックマーク表示エリア -->
<span
class="animated-checkmark-checkbox_box"
aria-hidden="true">
</span>
<!-- HTMLの項目名 -->
<span class="animated-checkmark-checkbox_name">
HTML
</span>
</label>
<!-- CSSのチェックボックス項目 -->
<label class="animated-checkmark-checkbox_label">
<!-- CSSの選択状態を管理するチェックボックス -->
<input
class="animated-checkmark-checkbox_input"
type="checkbox"
name="interest[]"
value="css">
<!-- CSS用のチェックマーク表示エリア -->
<span
class="animated-checkmark-checkbox_box"
aria-hidden="true">
</span>
<!-- CSSの項目名 -->
<span class="animated-checkmark-checkbox_name">
CSS
</span>
</label>
<!-- JavaScriptのチェックボックス項目 -->
<label class="animated-checkmark-checkbox_label">
<!-- JavaScriptの選択状態を管理するチェックボックス -->
<input
class="animated-checkmark-checkbox_input"
type="checkbox"
name="interest[]"
value="javascript">
<!-- JavaScript用のチェックマーク表示エリア -->
<span
class="animated-checkmark-checkbox_box"
aria-hidden="true">
</span>
<!-- JavaScriptの項目名 -->
<span class="animated-checkmark-checkbox_name">
JavaScript
</span>
</label>
<!-- PHPのチェックボックス項目 -->
<label class="animated-checkmark-checkbox_label">
<!-- PHPの選択状態を管理するチェックボックス -->
<input
class="animated-checkmark-checkbox_input"
type="checkbox"
name="interest[]"
value="php">
<!-- PHP用のチェックマーク表示エリア -->
<span
class="animated-checkmark-checkbox_box"
aria-hidden="true">
</span>
<!-- PHPの項目名 -->
<span class="animated-checkmark-checkbox_name">
PHP
</span>
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは、HTMLとCSSだけで動作するチェックボックスです。使用ファイルは2つだけなので、JavaScriptを使わずにそのまま利用できます。HTMLでチェックボックスの構造を作成し、CSSでチェックマークがアニメーション表示されるデザインを設定しています。
ファイル数が少ないため導入しやすく、HTMLやCSSの学習用としても利用できます。チェック時の見た目やアニメーション速度などはCSSを編集するだけで簡単に変更できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html はチェックボックスの構造や表示する項目を管理します。項目の追加・削除や表示する文字を変更できます。
style.css はレイアウト・色・サイズ・角丸・チェックマーク・アニメーションなど見た目全体を管理します。
設置方法・使い方
sampleフォルダへ index.html と style.css を配置します。
その後、sample/index.html をブラウザで開くと利用できます。追加のライブラリやJavaScriptは必要ありません。
カスタマイズできる内容
index.htmlではチェックボックスの項目や表示する文字を変更できます。
style.cssでは文字色、背景色、枠線、チェックマークの色、大きさ、角丸、余白、フォントサイズ、アニメーションなどを自由に変更できます。
数値調整
style.css の max-width は全体の横幅を変更できます。
padding は全体や各項目の余白を調整できます。
font-size はタイトル・説明文・項目名の文字サイズを変更できます。
width・height はチェックボックスの大きさを変更できます。
border-radius はチェックボックスや全体の角丸を調整できます。
transition: transform 0.25s ease; の 0.25s はチェックマークのアニメーション時間です。値を大きくするとゆっくり、小さくすると速く表示されます。
レスポンシブ対応
レスポンシブ対応済みです。style.css の media query により、画面幅768px以下では余白や文字サイズを自動調整します。
また、width:100% と max-width を使用しているため、スマートフォン・タブレット・PCでも画面幅に合わせて表示されます。
コメント