基本のトグルスイッチを作る方法
基本のトグルスイッチを作る方法を紹介します。このサンプルでは、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の2ファイルで構成されています。HTMLではタイトル、説明文、設定項目、トグルスイッチを配置し、クリックするとON・OFFを切り替えられる基本的なトグルスイッチを実装しています。CSSではレイアウトや配色、丸いノブの移動、ON・OFF時の背景色、フォーカス表示などを設定しており、シンプルで見やすい設定画面を作成できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはトグルスイッチ全体を構成するファイルです。タイトル、説明文、設定項目名、トグルスイッチを編集できます。項目名を変更することで、メール通知やダークモード、位置情報などさまざまな設定項目として利用できます。
style.cssはトグルスイッチ全体のデザインを設定するファイルです。背景色、余白、文字サイズ、スイッチのサイズ、ON・OFF時の色、ノブのサイズ、角丸、影などを自由に変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたトグルスイッチをクリックするとON・OFFを切り替えられます。
カスタマイズできる内容
index.htmlではタイトル、説明文、設定項目名、初期状態を変更できます。チェックボックスへchecked属性を追加すると、ページ表示時からONの状態で表示できます。
style.cssでは全体の横幅、背景色、余白、文字サイズ、スイッチの横幅・高さ、ノブの大きさ、ON・OFF時の背景色、角丸、影、フォーカス時の強調表示などを自由に調整できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を変更すると内容と外枠の間隔が変わります。
width:58px;
トグルスイッチの横幅です。値を大きくするとスイッチが横長になります。
height:32px;
トグルスイッチの高さです。値を大きくするとスイッチ全体が高くなります。
width:24px;・height:24px;
丸いノブの大きさです。値を大きくするとノブも大きく表示されます。
transform:translateX(26px);
ONになったときのノブの移動距離です。値を変更すると右へ移動する距離が変わります。
transition:background-color 0.3s ease;
背景色が切り替わる時間です。0.3秒でアニメーションします。値を大きくするとゆっくり、小さくすると速く切り替わります。
transition:transform 0.3s ease;
ノブが移動する時間です。0.3秒で移動します。値を大きくするとゆっくり、小さくすると速く移動します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に応じて縮小表示されます。また、640px以下では余白を調整しているため、スマートフォン・タブレット・PCでも操作しやすいレイアウトで利用できます。
コメント