立体的なトグルスイッチを作る方法
立体的なトグルスイッチを作る方法を紹介します。このサンプルでは、HTMLのcheckboxとCSSを使用して、スイッチ本体やつまみに厚みと影を付けた立体的なトグルスイッチを作成します。通常の平面的なトグルスイッチとは異なり、グラデーションや影を組み合わせることで、スイッチが画面から浮き上がっているような見た目に仕上げています。
スイッチをクリックすると、つまみが左から右へ移動してOFFからONへ切り替わります。OFFの状態ではグレー系、ONの状態ではブルー系の色を使用し、現在の状態を見た目でも判別しやすくしています。また、スイッチ本体の下側に厚みを付け、つまみにもハイライトと影を加えることで、立体感のあるデザインを表現しています。
ラベルの文章はHTMLから変更でき、CSSではスイッチの大きさ、背景色、つまみの色、角丸、影、厚み、移動距離、切り替え速度などを調整できます。JavaScriptを使用せずHTMLとCSSだけで動作するため、シンプルな設定画面やON・OFFを切り替えるフォームなどへ利用できる立体トグルスイッチのサンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
くぼんだスイッチ本体と、少し浮き上がったつまみで立体感を表現しています。
スイッチをクリックすると、つまみが左右へ移動してOFFとONが切り替わります。
コードをコピーして使おう！
<!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="three-dimensional-toggle_wrap">
<!-- タイトル -->
<div class="three-dimensional-toggle_title">
立体的なトグルスイッチ
</div>
<!-- 説明文 -->
<p class="three-dimensional-toggle_text">
くぼんだスイッチ本体と、少し浮き上がったつまみで立体感を表現しています。
</p>
<!-- トグルスイッチ -->
<label class="three-dimensional-toggle_label">
<!-- チェックボックス -->
<input
type="checkbox"
class="three-dimensional-toggle_input">
<!-- スイッチ本体 -->
<span
class="three-dimensional-toggle_switch"
aria-hidden="true">
</span>
<!-- ラベル -->
<span>
設定を有効にする
</span>
</label>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではcheckboxを使ってON・OFFを切り替えるトグルスイッチを作成し、CSSではスイッチ本体のくぼみ、つまみの厚み、影、グラデーションを組み合わせて立体的な見た目にしています。JavaScriptは使用せず、チェック状態に応じてCSSだけでスイッチの色とつまみの位置を切り替えます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはトグルスイッチ全体を構成するファイルです。「立体的なトグルスイッチ」のタイトル、説明文、「設定を有効にする」のラベルを変更できます。checkboxを使用しているため、クリックするたびにチェック状態が切り替わり、ON・OFFを操作できます。
style.cssはトグルスイッチの見た目と切り替え動作を設定するファイルです。スイッチ本体の横幅、高さ、背景色、角丸、くぼみ、厚み、影、つまみの大きさ、色、移動距離、切り替え速度などを変更できます。OFF時はグレー系、ON時はブルー系の配色に切り替わります。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたスイッチをクリックすると、つまみが左右へ移動してOFFとONが切り替わります。ラベル部分をクリックしても同じように切り替えできます。
カスタマイズできる内容
index.htmlではタイトル、説明文、「設定を有効にする」のラベルを変更できます。用途に合わせて、通知を有効にする、表示を切り替える、設定を有効にするなどの文章へ変更できます。
style.cssではスイッチ本体の大きさ、背景色、枠線、角丸、内側の影、下側の厚み、外側の影を変更できます。つまみでは大きさ、位置、背景のグラデーション、厚み、影を調整できます。ON時の背景色や影も個別に変更できます。
数値調整
style.css
max-width:700px;
サンプル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:36px 32px 42px;
サンプル全体の内側余白です。上36px、左右32px、下42pxを指定しています。値を変更すると内容と外枠の間隔が変わります。
gap:18px;
トグルスイッチとラベル文字の間隔です。値を大きくすると離れ、小さくすると近づきます。
width:84px;
スイッチ本体の横幅です。値を大きくすると横長になり、小さくすると短くなります。
height:44px;
スイッチ本体の高さです。値を大きくするとスイッチ全体が高くなります。
border-radius:24px;
スイッチ本体の角丸です。値を大きくすると丸みが強くなります。
inset 0 5px 7px rgba(15,23,42,.28)
スイッチ本体の内側上部へ付けている影です。入力部分が少しくぼんで見える立体感を作っています。5pxを変更すると影の位置、7pxを変更するとぼかし具合が変わります。
0 6px 0 #64748b
OFF時のスイッチ本体の下側に付けている厚みです。6pxを大きくすると本体がより厚く見え、小さくすると薄く見えます。
0 10px 14px rgba(15,23,42,.18)
スイッチ本体の外側へ落ちる影です。10pxは下方向の位置、14pxはぼかしの大きさです。値を大きくすると背景から浮いている印象が強くなります。
width:32px;、height:32px;
つまみの大きさです。2つの値を同じに保つことで円形になります。値を大きくするとつまみが大きくなります。
top:5px;、left:5px;
OFF時のつまみの初期位置です。スイッチ本体の上端と左端から5px離して配置しています。
0 3px 0 #cbd5e1
つまみの下側に付けている厚みです。3pxを大きくすると、つまみがより手前へ浮いているように見えます。
0 5px 8px rgba(15,23,42,.2)
つまみの外側へ付けている影です。5pxは下方向への位置、8pxはぼかしです。値を大きくするとつまみの浮き上がりが強く見えます。
transform:translateX(42px);
ON時につまみを右へ移動する距離です。42pxを変更すると、ON時のつまみの停止位置が変わります。スイッチ本体やつまみの横幅を変更する場合は、この値も合わせて調整します。
transition:.3s;
背景色、影、つまみの移動が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
outline:3px solid rgba(37,99,235,.25);
キーボード操作でフォーカスしたときに表示する外枠です。3pxを大きくすると枠が太くなります。
立体感を強くする場合
スイッチ本体の0 6px 0 #64748bにある6pxを大きくすると、本体の厚みが強調されます。また、内側のinset影を濃くするとくぼみが深く見えます。つまみ側も0 3px 0 #cbd5e1の3pxを大きくすると、つまみがより浮き上がって見えます。
立体感を弱くする場合
本体とつまみの下側の厚みを小さくし、外側の影を弱くするとフラットな見た目へ近づきます。また、グラデーションの上下の色差を小さくすると立体感が控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせて全体が縮小されます。また、画面幅640px以下ではpadding:28px 18px 34px;へ変更し、スマートフォンでも左右の余白が広くなりすぎないようにしています。スマートフォン・タブレット・PCで利用できます。
コメント