横並びで表示するトグルスイッチを作る方法
横並びで表示するトグルスイッチを作る方法を紹介します。このサンプルでは、HTMLのチェックボックスとCSSを使用し、複数の設定項目を横方向へ並べて表示します。各項目はスイッチ部分とラベルをひとまとまりにして配置し、クリックするとオン・オフの状態が切り替わります。JavaScriptを使用せず、HTMLとCSSだけで動作するシンプルな構成です。
通知設定、メール配信、位置情報、ダークモードなど、複数の設定をまとめて表示したい画面に利用できます。会員サイトの設定画面、管理画面、アプリ風の操作パネル、ECサイトのユーザー設定など、限られたスペースへ複数の選択項目を並べたい場合に適しています。オンの状態では背景色と丸いボタンの位置が変化するため、現在の設定を視覚的に確認できます。
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="horizontal-toggle-switch_wrap">
<!-- タイトル -->
<div class="horizontal-toggle-switch_title">
通知設定
</div>
<!-- 説明文 -->
<p class="horizontal-toggle-switch_text">
利用する項目をオンまたはオフに切り替えてください。
</p>
<!-- トグルスイッチ一覧 -->
<div class="horizontal-toggle-switch_list">
<!-- メール通知 -->
<label class="horizontal-toggle-switch_item">
<input
class="horizontal-toggle-switch_input"
type="checkbox"
name="email-notification"
checked>
<span
class="horizontal-toggle-switch_switch"
aria-hidden="true"></span>
<span class="horizontal-toggle-switch_label">
メール通知
</span>
</label>
<!-- プッシュ通知 -->
<label class="horizontal-toggle-switch_item">
<input
class="horizontal-toggle-switch_input"
type="checkbox"
name="push-notification">
<span
class="horizontal-toggle-switch_switch"
aria-hidden="true"></span>
<span class="horizontal-toggle-switch_label">
プッシュ通知
</span>
</label>
<!-- 通知音 -->
<label class="horizontal-toggle-switch_item">
<input
class="horizontal-toggle-switch_input"
type="checkbox"
name="sound-notification"
checked>
<span
class="horizontal-toggle-switch_switch"
aria-hidden="true"></span>
<span class="horizontal-toggle-switch_label">
通知音
</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:900px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
gap:16px;
各トグルスイッチ同士の間隔です。値を大きくすると広がり、小さくすると密に配置されます。
min-width:180px;
各トグルスイッチの最小横幅です。値を大きくすると項目が広くなり、小さくすると多くの項目を横並びに表示できます。
width:52px;
スイッチ本体の横幅です。値を大きくするとスイッチ全体が大きく表示されます。
height:28px;
スイッチ本体の高さです。値を大きくすると縦方向に大きく表示されます。
width:22px;
丸いボタンの大きさです。値を大きくするとつまみが大きく表示されます。
transform:translateX(24px);
オンになったときの丸いボタンの移動距離です。値を変更すると移動位置が変わります。
transition:0.3s;
スイッチが切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると素早く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:900pxにより、画面幅に応じてレイアウトが自動で縮小されます。また、640px以下ではflex-direction:column;へ切り替わるため、トグルスイッチが縦方向へ並び、スマートフォン・タブレット・PCでも操作しやすく利用できます。
コメント