基本のトグルスイッチを作る方法
基本のトグルスイッチを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、クリックするたびにON・OFFを切り替えられるシンプルなトグルスイッチを作成します。チェックボックスを利用して実装しているため、JavaScriptを使わずに状態を切り替えられ、設定画面や入力フォームなど幅広い場面で利用できます。
会員サイトの通知設定、お問い合わせフォームの同意項目、管理画面の機能切り替え、ダークモード設定など、ON・OFFを選択するUIとして活用できます。スイッチをクリックするとノブが左右へ移動し、背景色も切り替わるため、現在の状態を直感的に確認できます。シンプルなデザインなので、さまざまなWebサイトへ導入しやすいのも特徴です。
タイトルや説明文、ラベルはHTMLから変更でき、CSSではスイッチの横幅や高さ、色、角丸、アニメーション速度などを用途に合わせて調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも扱いやすく、基本的なトグルスイッチの実装例として利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
スイッチをクリックするとON・OFFを切り替えられます。
トグルスイッチをクリックするとON・OFFを切り替える動作を確認できます。
コードをコピーして使おう！
<!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="basic-toggle-switch_wrap">
<!-- タイトル -->
<div class="basic-toggle-switch_title">
通知設定
</div>
<!-- 説明文 -->
<p class="basic-toggle-switch_text">
スイッチをクリックするとON・OFFを切り替えられます。
</p>
<!-- 設定項目 -->
<div class="basic-toggle-switch_row">
<!-- 項目名 -->
<span class="basic-toggle-switch_label-text">
メール通知
</span>
<!-- トグルスイッチ -->
<label class="basic-toggle-switch_switch">
<!-- ON・OFFを管理するチェックボックス -->
<input
class="basic-toggle-switch_checkbox"
type="checkbox"
aria-label="メール通知を切り替える">
<!-- スイッチの背景と丸いノブ -->
<span class="basic-toggle-switch_slider"></span>
</label>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではチェックボックスを利用した基本的なトグルスイッチを配置し、クリックするたびにON・OFFを切り替えられるようにしています。CSSではスイッチ本体の形状や色、つまみの移動、アニメーションなどを設定しており、JavaScriptを使用せずに動作するシンプルな構成です。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはトグルスイッチ全体を構成するファイルです。タイトル、説明文、ラベル名を変更でき、チェックボックスを利用してON・OFFを切り替える仕組みを実装しています。
style.cssはスイッチの見た目を設定するファイルです。横幅、高さ、背景色、角丸、つまみのサイズ、ON・OFF時の色、アニメーション速度などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたトグルスイッチをクリックすると、ON・OFFを切り替える動作を確認できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル名を自由に変更できます。通知設定や公開設定、利用規約への同意など、用途に合わせた表示へ変更できます。
style.cssではスイッチ全体の横幅、高さ、背景色、角丸、つまみのサイズ、余白、文字色、ON・OFF時の色、アニメーション速度などを変更できます。デザインを調整することで、サイト全体のデザインに合わせたトグルスイッチへ変更できます。
数値調整
style.css
width:60px;
スイッチ全体の横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。
height:34px;
スイッチ全体の高さです。値を大きくするとスイッチが大きく表示されます。
border-radius:999px;
スイッチ全体を丸く表示するための角丸です。値を小さくすると角が残ります。
width:26px;・height:26px;
スイッチ内の丸いつまみの大きさです。値を大きくするとつまみも大きく表示されます。
transform:translateX(26px);
ONになったときのつまみの移動量です。値を変更すると移動距離が変わります。
transition:0.3s;
スイッチが切り替わる時間です。0.3秒でアニメーションします。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより、画面幅に応じてレイアウトが自動調整されます。また、メディアクエリでスマートフォン向けの余白を調整しているため、スマートフォン・タブレット・PCのいずれでも快適に利用できます。
コメント