分12今回は,動きそのものはあまり凝りようのないトグルスイッチがお題だ(サンプル1⁠)⁠。いえ,視覚的な表現に細かい工夫がある。「⁠switch」のデザインと表現スイッチとして表示するをもとに,HTMLとCSSの組み立てはわかりやすく改めた。コード行数も絞り込んである。アニメーションの動きより,陰影やグラデーションなどの組み合わせが鍵だ。Accordionインタラクションを加える前のトグルスイッチの表現インタラクションを加える前の静的な組み立てから確かめる。<body>要素はつぎのように簡素だ。チェックボックスの<input>要素(type属性"checkbox")で,スイッチをオン・オフする(class属性"switch"⁠)⁠。要素はCSSのdisplayプロパティで隠す(none⁠)⁠。スイッチとして表示する<label>要素(class属性"toggle")にfor属性でチェックボックスのid属性("toggle")を与えているので,クリックすればオン・オフが切り替わる。いつもどおり,-prefix-freeもCDNから読み込んでおく(第16回の「水平に並べた要素に静的なスタイルを割り当てる」参照⁠)⁠。for="toggle"></label></div>トグルスイッチの目に見える要素は3つだ(図1⁠)⁠。ひとつはスイッチが動く領域で,<label>要素(class属性"toggle")からつくられる。残るふたつのインジケータとつまみは,つぎのようにともに擬似要素(::beforeと::after)としてCSSで加えた。立体感はおもにグラデーション(linear-gradient()関数)の塗りと陰影(box-shadowプロパティ)で与えている。box-shadowは影を広げるだけでなく,内側(inset)に明暗を加えることで凹凸が表せる。トグルスイッチの3つの視覚的要素これでインタラクションを加える前のトグルスイッチのオフの表現ができた。ここまでのCSSの定めをつぎのコード1に掲げる。前掲の<body>要素の記述も,ご参考までにここにまとめておこう。<body>の要素については,このあと書き替えることはない。