入力するとデモ・コード・AIプロンプトが全て即座に書き換わります。
.switch {
position: relative;
display: inline-block;
width: 96px;
height: 48px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
position: absolute;
cursor: pointer;
inset: 0;
background: #E5E5E5;
border: 1px solid #1A1A1A;
transition: background 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.switch .slider::before {
content: '';
position: absolute;
height: 36px; width: 36px;
left: 4px; bottom: 4px;
background: #1A1A1A;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.switch input:checked + .slider {
background: #E91B89;
border-color: #E91B89;
}
.switch input:checked + .slider::before {
transform: translateX(48px);
background: #FAFAFA;
}
.switch input:focus-visible + .slider {
outline: 2px solid #E91B89;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.switch .slider,
.switch .slider::before { transition: none; }
}※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
オン・オフが滑らかに切り替わるトグル。状態の二項対立に物理的な手応えを与える、最小のマイクロインタラクション。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
フォーム入力・トグル・ボタン・お気に入りなど、小さな操作に対する手応え（マイクロインタラクション）に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。