縦並びで表示するトグルスイッチを作る方法
縦並びで表示するトグルスイッチを作る方法を紹介します。このサンプルでは、HTMLのチェックボックスとCSSを使用し、複数の設定項目を縦方向へ並べて表示します。各項目はラベルとトグルスイッチを左右に配置し、クリックするだけでオン・オフを切り替えられます。JavaScriptを使用せず、HTMLとCSSのみで動作するシンプルな構成です。
スマートフォン向けの設定画面、会員サイトの各種設定、管理画面、アプリ風のオプション画面など、設定項目を見やすく一覧表示したい場面に適しています。項目ごとに横一列で表示されるため、どの設定を変更するスイッチなのかが分かりやすく、複数の設定をまとめて管理しやすくなります。オン・オフの状態も色とスイッチの位置で直感的に確認できます。
HTMLでは項目名や初期状態を変更でき、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>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- トグルスイッチ全体 -->
<div class="vertical-toggle-switch_wrap">
<!-- タイトル -->
<div class="vertical-toggle-switch_title">
通知設定
</div>
<!-- 説明文 -->
<p class="vertical-toggle-switch_text">
利用する項目をオンまたはオフに切り替えてください。
</p>
<!-- トグルスイッチ一覧 -->
<div class="vertical-toggle-switch_list">
<!-- メール通知 -->
<label class="vertical-toggle-switch_item">
<span class="vertical-toggle-switch_left">
メール通知
</span>
<span>
<input
class="vertical-toggle-switch_input"
type="checkbox"
name="email-notification"
checked>
<span
class="vertical-toggle-switch_switch"
aria-hidden="true"></span>
</span>
</label>
<!-- プッシュ通知 -->
<label class="vertical-toggle-switch_item">
<span class="vertical-toggle-switch_left">
プッシュ通知
</span>
<span>
<input
class="vertical-toggle-switch_input"
type="checkbox"
name="push-notification">
<span
class="vertical-toggle-switch_switch"
aria-hidden="true"></span>
</span>
</label>
<!-- 通知音 -->
<label class="vertical-toggle-switch_item">
<span class="vertical-toggle-switch_left">
通知音
</span>
<span>
<input
class="vertical-toggle-switch_input"
type="checkbox"
name="sound-notification"
checked>
<span
class="vertical-toggle-switch_switch"
aria-hidden="true"></span>
</span>
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは複数のトグルスイッチを縦方向へ一覧表示し、チェックボックスを利用してオン・オフを切り替えます。CSSではスイッチのデザインやレイアウト、アニメーション、レスポンシブ表示を設定しており、JavaScriptを使用せずに動作するシンプルな構成です。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはトグルスイッチ全体を構成するファイルです。タイトル、説明文、各項目名、初期状態（オン・オフ）を変更できます。チェックボックスのchecked属性を追加または削除することで、初期表示時の状態を設定できます。
style.cssは縦並びレイアウトやスイッチのデザインを設定するファイルです。背景色、枠線、角丸、余白、文字サイズ、スイッチの色、アニメーション速度などを用途に合わせて変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示された各トグルスイッチをクリックすると、それぞれ独立してオン・オフを切り替えられます。
カスタマイズできる内容
index.htmlではタイトル、説明文、各トグルスイッチの名称、表示する項目数、初期状態を変更できます。通知設定以外にも、公開設定やアプリ設定、機能の有効・無効切り替えなど、さまざまな用途へ利用できます。
style.cssではフォーム全体の横幅、背景色、余白、角丸、各項目の高さ、文字サイズ、スイッチのサイズ、オン・オフ時の色、項目同士の間隔などを自由に調整できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
gap:14px;
各トグルスイッチ同士の間隔です。値を大きくすると広がり、小さくすると詰まったレイアウトになります。
padding:16px 18px;
各項目の内側余白です。値を大きくすると項目全体が大きくなり、小さくするとコンパクトになります。
width:52px;
スイッチ本体の横幅です。値を大きくするとスイッチ全体が大きく表示されます。
height:28px;
スイッチ本体の高さです。値を大きくすると縦方向に大きく表示されます。
width:22px;
丸いボタンの大きさです。値を大きくするとつまみが大きく表示されます。
transform:translateX(24px);
オンになったときの丸いボタンの移動距離です。値を変更すると移動位置が変わります。
transition:0.3s;
スイッチが切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると素早く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせてフォーム全体が縮小されます。また、640px以下では内側余白を調整しているため、スマートフォン・タブレット・PCでも見やすく操作しやすいレイアウトで利用できます。
コメント