初期状態がONのトグルスイッチを作る方法
初期状態がONのトグルスイッチを作る方法を紹介します。ページを開いた時点でトグルスイッチがONになっているシンプルなサンプルで、HTMLとCSSだけで実装できます。JavaScriptを使用しないため、設定画面やフォームへ手軽に導入でき、基本的なトグルスイッチの作り方を学びたい方にもおすすめです。
このサンプルでは、ページの初期表示時にONの状態で表示され、ユーザーは必要に応じてOFFへ切り替えられます。メール通知や新着情報の受信設定、利用機能の初期有効化など、標準ではONにしておきたい設定項目に適しています。お問い合わせ画面や会員サイト、管理画面、ECサイトなど、さまざまなWebサイトで利用しやすい構成です。
タイトルや説明文はHTMLから変更でき、色やサイズ、余白、角丸、ON・OFF時のデザインはCSSで自由にカスタマイズできます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでもレイアウトを崩さず表示できます。初期状態がONのトグルスイッチを作成したい場合のベースとして、そのまま利用しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを開くとトグルスイッチは最初からONの状態で表示されます。
このデモでは、ページを開いた時点でトグルスイッチがONの状態になっていることを確認できます。トグルを切り替えるとON・OFFが切り替わります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>初期状態がONのトグルスイッチ</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 通知設定全体 -->
<div class="toggle-switch-default-on_wrap">
<!-- タイトル -->
<div class="toggle-switch-default-on_title">
通知設定
</div>
<!-- 説明文 -->
<p class="toggle-switch-default-on_text">
ページを開くとトグルスイッチは最初からONの状態で表示されます。
</p>
<!-- トグルスイッチの設定項目 -->
<div class="toggle-switch-default-on_row">
<!-- 項目名 -->
<span class="toggle-switch-default-on_label-text">
メール通知を有効にする
</span>
<!-- トグルスイッチ -->
<label class="toggle-switch-default-on_switch">
<!-- checked属性によって初期状態をONにする -->
<input
class="toggle-switch-default-on_checkbox"
type="checkbox"
checked
aria-label="メール通知のONとOFFを切り替える">
<!-- スイッチの背景と丸いノブ -->
<span class="toggle-switch-default-on_slider"></span>
</label>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではトグルスイッチを配置し、チェックボックスへchecked属性を指定することで、ページを開いた時点からONの状態にします。CSSではスイッチ全体のサイズ、ON・OFF時の配色、丸いノブの位置、余白や角丸などを設定します。JavaScriptを使用せず、HTMLとCSSだけで初期状態がONのトグルスイッチを実装できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは通知設定全体を構成するファイルです。タイトル、説明文、項目名を変更できます。チェックボックスへ指定しているchecked属性によって、ページの初期表示時からトグルスイッチがONになります。
style.cssは通知設定エリアとトグルスイッチのデザインを設定するファイルです。全体の横幅、背景色、余白、文字サイズ、枠線、角丸、スイッチの大きさ、ON・OFF時の色、ノブの影や移動時間を変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くとトグルスイッチが最初からONの状態で表示されます。スイッチをクリックするとOFFへ切り替わり、再度クリックするとONへ戻ります。
カスタマイズできる内容
index.htmlでは「通知設定」のタイトル、説明文、「メール通知を有効にする」の項目名を変更できます。初期状態をOFFにしたい場合は、チェックボックスのchecked属性を削除します。
style.cssでは通知設定全体の横幅、背景色、余白、角丸、タイトルや項目名の文字サイズ、トグルスイッチの横幅と高さ、ON・OFF時の背景色、ノブの大きさ、影、移動時間を変更できます。
数値調整
style.css
max-width:700px;
通知設定全体の最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
通知設定全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
通知設定全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
通知設定全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
gap:20px;
項目名とトグルスイッチの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
width:88px;
トグルスイッチの横幅です。値を大きくすると横長になり、小さくすると短くなります。
height:46px;
トグルスイッチの高さです。値を大きくするとスイッチ全体が高くなります。
width:36px;・height:36px;
スイッチ内の丸いノブのサイズです。値を大きくするとノブが大きくなります。
transform:translateX(42px);
ON時にノブが右へ移動する距離です。スイッチの横幅やノブの大きさを変更した場合は、この値も合わせて調整します。
transition:0.3s;
スイッチの背景色とノブが切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
キーボード操作でスイッチへフォーカスしたときの強調範囲です。4pxを大きくすると表示範囲が広がり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせて通知設定全体が縮小されます。また、640px以下ではページと設定エリアの余白を小さくし、項目名とトグルスイッチを縦並びへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント