設定画面やダークモード切り替えUIを作るとき、HTMLの <input type="checkbox"> をそのまま使うのに限界を感じたことはないですか。ブラウザデフォルトのチェックボックスは機能的だけど、デザインに馴染まない。かといってJavaScriptで見た目を完全制御するのも、フォームのアクセシビリティを崩したくない。そのジレンマを解決するのが、CSSのみで作るカスタムトグルスイッチです。
この記事では、<input type="checkbox"> を隠してラベル要素をスタイリングするCSS-only実装で、5種類のトグルスイッチを紹介します。:checked 疑似クラスと隣接兄弟セレクター（+）だけで完全なON/OFF切り替えを実現しており、JavaScriptは一行も不要。WordPress・SWELLのCSSエディタにコピペするだけで動作します。
Pill Classic（ピル・クラシック）
iOSのシステムUIに採用されているスタイルをそのままCSSで再現したのが、このPill Classicです。縦長の丸いトラック内を円形のつまみ（サム）が左右にスライドし、ON時にグリーンへ変色します。シンプルな見た目の裏に、cubic-bezier(0.4, 0, 0.2, 1) という、Googleの設計するアニメーション曲線が仕込まれています。直線的な動きより一瞬加速して減速するこの動き方は「物理的なスナップ感」をボタンに与えます。
input 要素は opacity: 0 で完全に非表示にしますが、width: 0; height: 0 と組み合わせることでDOM上には存在し続けるため、フォームとしての機能性とキーボードアクセシビリティを失いません。フォーム設定画面・管理画面・設定モーダルと、用途を選ばない汎用性があります。
See the Pen Pill Classic by BaseKENT (@basekent) on CodePen.
調整方法
- ON時の色:
.toggle input:checked + .trackのbackgroundを変更します。#0071e3（Apple Blue）や#007aff（iOS Blue）に変えるとより汎用的なUIトーンになります - サイズ:
.trackのwidth: 58px; height: 32pxをスケールアップすると大型トグルに。width: 44px; height: 24pxで小型版になります。つまみのwidth/heightはトラック高さ – 6px が目安です - アニメーション速度:
.track::beforeのtransition: transform 0.3sの秒数を変えます。0.15sでスナッピーに、0.5sでゆったりした切り替えになります
Neon Toggle（ネオン・トグル）
ダーク系UIに合わせたネオン発光トグルです。OFFの状態ではトラックがグレーのアウトラインだけの控えめな存在ですが、ONにすると box-shadow の複数指定でシアン色のネオングローが広がります。トラック全体と、つまみの両方が光る二段階の発光設計がポイントです。
box-shadow: 0 0 14px rgba(0,229,255,0.6), inset 0 0 8px rgba(0,229,255,0.15) という指定で「外に広がる柔らかなグロー」と「内側への淡いバックライト」を同時に作っています。ダークモード切り替えボタン・ゲームUI・AIツール系管理画面との相性が抜群で、「ON=何かが起動した」感覚を視覚的に強調したいCTAに最適です。
See the Pen Neon Toggle by BaseKENT (@basekent) on CodePen.
調整方法
- 発光色:
#00e5ff（シアン）を#ff6b6b（赤）・#a29bfe（パープル）・#00b894（グリーン）に変えると全体のトーンが変わります。複数のbox-shadow値を一括で置換するのがポイントです - 発光の強度:
box-shadowの第3引数（blur半径）を大きくするほど拡散します。30px以上にするとサイバーパンク調に - 背景色:
bodyのbackground: #0a0a1aをより明るい#1e1e2eにすると発光のコントラストが柔らかくなります
Material Switch（マテリアル・スイッチ）
GoogleのMaterial Design 3準拠のスイッチUIをCSSのみで再現しました。OFFの状態ではトラックがアウトラインのみの「中空」デザインで、ONにすると紫色の塗りつぶしに変化します。さらにつまみが 16px → 24px とサイズアップしながら右へ移動する動きがMD3の特徴です。
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) で width・height・top・left の4軸を同時補間することで、「膨らみながら移動する」有機的な動きを実現しています。Google系プロダクトのUIに揃えたいとき、Figmaで作ったMD3コンポーネントをそのままWebに落とし込みたいときに活用できます。既存のUIライブラリ依存ゼロで使える点が設計上のメリットです。
See the Pen Material Switch by BaseKENT (@basekent) on CodePen.
調整方法
- テーマカラー:
#6750a4（Material You のデフォルト紫）を変更します。#1976d2（Material Blue）・#388e3c（Material Green）など、Material Colorシステムに沿った色に合わせるとコンシステントなUIになります - ON時のつまみサイズ:
width: 24px; height: 24pxをトラック高さに合わせて調整します。height: 32pxのトラックなら24pxが標準値 - OFF状態のアウトライン:
border: 2px solid #79747eの太さと色を変えます。3pxにするとより主張の強いアウトラインになります
Day Night（デイ・ナイト）
太陽と月がトグルするビジュアルで昼/夜モードの切り替えを表現したデザインです。OFFは空色グラデーションの背景に太陽（☀）のつまみ、ONにすると宇宙の深い紺に変わり月（☽）のつまみが右に移動します。content プロパティの値変化は遷移中間点（0s 0.22s の遅延指定）で発火させているため、つまみが移動の中間地点を過ぎたタイミングで太陽が月に切り替わります。
transition: background 0s 0.22s の 0s 0.22s という指定は「継続時間ゼロで、0.22秒後に変化」という意味です。アニメーション全体が0.45sなので、ちょうど中間地点で絵柄が切り替わる設計になっています。実用的なダークモードトグルとしても機能しますが、ランディングページや個人ポートフォリオで「見せるUI部品」として置いても映えます。
See the Pen Day Night by BaseKENT (@basekent) on CodePen.
調整方法
- 昼の空の色:
.trackのbackground: linear-gradient(135deg, #87ceeb, #b0d8f5)を変えます。#fde68a → #fbbf24（夕焼け）や#bfdbfe → #93c5fd（曇り）など時間帯の演出ができます - つまみのアイコン:
content: '☀'とcontent: '☽'を他のUnicode記号に変えられます。'🌞''🌛'の絵文字にするとカラフルになりますが、OSによる見た目の差が出ます - 切り替えアニメーション:
.track::beforeのtransition: transform 0.45sを0.6sに伸ばすと、昼→夜の移行が映画的なゆったり感になります
3D Flip Toggle（スリーディ・フリップ・トグル）
つまみが360°スピンしながら右に移動し、着地後にカラーが変わる立体感トグルです。.track に perspective: 160px を設定し、::before の transform-style: preserve-3d で3D空間を開放。transform: translateX(26px) rotateY(360deg) というCSSの一行で「横方向の移動」と「Y軸1回転」を同時に記述しています。
transition: transform 0.5s, background 0s 0.25s の遅延指定で、スピン中間点（rotateY(180deg) ≒ 端が消える瞬間）にカラーが切り替わります。赤→紫への変化が「裏返したら別色の面が見えた」ように見えるのはこの設計のおかげです。カラースキームを変えて実装するとき、OFFの赤とONの色はできるだけ対照的な色にすると回転時のメリハリが増します。
See the Pen 3D Flip Toggle by BaseKENT (@basekent) on CodePen.
調整方法
- OFF/ONの色ペア:
.track::beforeのbackground: #ff6b6b（OFF赤）とinput:checked + .track::beforeのbackground: #6c5ce7（ON紫）を変えます。コントラストが強い色の組み合わせほどフリップ感が際立ちます - スピン速度:
transition: transform 0.5sを短くするほど素早いスピンに。0.3sでシャープ、0.8sでゆっくりした演出になります - perspective値:
perspective: 160pxを小さく（例:80px）するほど奥行きが誇張され、大きく（例:400px）するほど平坦な回転になります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
