2列レイアウトのトグルスイッチを作る方法
2列レイアウトのトグルスイッチを作る方法を紹介します。このサンプルでは、HTMLのチェックボックスとCSSを使用し、6個の設定項目を2列3行のレイアウトで表示します。各項目は項目名とトグルスイッチを横並びに配置し、クリックするだけでオン・オフを切り替えられます。JavaScriptを使用せず、HTMLとCSSだけで動作するシンプルな構成です。
会員サイトの通知設定、管理画面の機能設定、アプリ風のオプション画面、ECサイトのユーザー設定など、複数の項目を限られたスペースへ整理して表示したい場面に適しています。6個のスイッチを2列で並べることで、縦に長くなりすぎず、一覧性の高い設定画面を作成できます。オン・オフの状態は背景色と丸いボタンの位置で分かりやすく確認できます。
HTMLでは各項目名や初期状態を変更でき、CSSでは列数、横幅、余白、背景色、枠線、角丸、スイッチの大きさ、切り替え速度などを調整できます。画面幅が狭い場合は1列表示へ切り替わるため、スマートフォン・タブレット・PCで利用しやすく、初心者でも導入しやすい2列レイアウトのトグルスイッチとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
利用する項目をオンまたはオフに切り替えてください。
6個のトグルスイッチが2列3行で表示され、各項目を個別にオン・オフできます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>2列レイアウトのトグルスイッチ</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- トグルスイッチ全体 -->
<div class="two-column-toggle-switch_wrap">
<!-- タイトル -->
<div class="two-column-toggle-switch_title">
通知設定
</div>
<!-- 説明文 -->
<p class="two-column-toggle-switch_text">
利用する項目をオンまたはオフに切り替えてください。
</p>
<!-- トグルスイッチ一覧 -->
<div class="two-column-toggle-switch_list">
<!-- メール通知 -->
<label class="two-column-toggle-switch_item">
<span class="two-column-toggle-switch_label">メール通知</span>
<input class="two-column-toggle-switch_input" type="checkbox" checked>
<span class="two-column-toggle-switch_switch" aria-hidden="true"></span>
</label>
<!-- プッシュ通知 -->
<label class="two-column-toggle-switch_item">
<span class="two-column-toggle-switch_label">プッシュ通知</span>
<input class="two-column-toggle-switch_input" type="checkbox">
<span class="two-column-toggle-switch_switch" aria-hidden="true"></span>
</label>
<!-- 通知音 -->
<label class="two-column-toggle-switch_item">
<span class="two-column-toggle-switch_label">通知音</span>
<input class="two-column-toggle-switch_input" type="checkbox" checked>
<span class="two-column-toggle-switch_switch" aria-hidden="true"></span>
</label>
<!-- お知らせ表示 -->
<label class="two-column-toggle-switch_item">
<span class="two-column-toggle-switch_label">お知らせ表示</span>
<input class="two-column-toggle-switch_input" type="checkbox" checked>
<span class="two-column-toggle-switch_switch" aria-hidden="true"></span>
</label>
<!-- 更新通知 -->
<label class="two-column-toggle-switch_item">
<span class="two-column-toggle-switch_label">更新通知</span>
<input class="two-column-toggle-switch_input" type="checkbox">
<span class="two-column-toggle-switch_switch" aria-hidden="true"></span>
</label>
<!-- キャンペーン通知 -->
<label class="two-column-toggle-switch_item">
<span class="two-column-toggle-switch_label">キャンペーン通知</span>
<input class="two-column-toggle-switch_input" type="checkbox" checked>
<span class="two-column-toggle-switch_switch" aria-hidden="true"></span>
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは6個のトグルスイッチを配置し、CSS Gridを使用して2列レイアウトで表示します。各項目はチェックボックスを利用してオン・オフを切り替える仕組みになっており、JavaScriptを使用せずHTMLとCSSのみで動作します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはトグルスイッチ全体を構成するファイルです。タイトル、説明文、各項目名、表示する項目数、初期状態（オン・オフ）を変更できます。チェックボックスへchecked属性を追加または削除すると、ページ表示時の初期状態を変更できます。
style.cssは2列レイアウトやトグルスイッチのデザインを設定するファイルです。背景色、文字サイズ、余白、枠線、角丸、列数、スイッチのサイズ、アニメーション速度などを用途に合わせて調整できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示された6個のトグルスイッチはそれぞれ独立しており、クリックするだけでオン・オフを切り替えられます。
カスタマイズできる内容
index.htmlではタイトル、説明文、各項目名、表示する項目数、初期状態を変更できます。通知設定以外にも、システム設定、公開設定、各種オプション設定など、用途に合わせて自由に利用できます。
style.cssでは全体の横幅、背景色、余白、角丸、各項目のサイズ、列数、項目同士の間隔、スイッチのサイズ、オン・オフ時の配色、文字サイズなどを変更できます。
数値調整
style.css
max-width:800px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
grid-template-columns:repeat(2,1fr);
列数を設定しています。2を変更すると表示する列数を変更できます。
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:800pxにより画面幅に応じて全体が縮小されます。また、640px以下ではgrid-template-columns:1fr;へ切り替わるため、スマートフォンでは1列表示となり、タブレット・PCを含めたさまざまな画面サイズで快適に利用できます。
コメント