分12今回のお題は,スイッチで電灯をつけたり消したりする(サンプル1⁠)⁠。デザインとアニメーション表現は「lamp」を参考にさせてもらった。この連載の主題である「インターフェイス」としては,応用の幅が少し狭いかもしれない。おもしろい素材なので,採り上げることにした。Styles」からひとつ使わせてもらった。複数のCSSを組み合わせる場合は,設定がかぶらないようにできるだけクラスを用いるのがよい。そこで,構成は大幅に手直しした。コードは絞り込み,わかりやすく組み立て直している。今回,HTMLドキュメントの<body>要素には,見える要素がない(コード1⁠)⁠。細かくいえば,type属性が"checkbox"の<input>要素(class属性"check")はある。CSSでvisibilityプロパティをhiddenにして隠す(コード1参照⁠)⁠。電灯もスイッチもすべてCSSでつくるということだ。,<label>要素のfor属性に<input>要素のid属性値("status")を与えたので,この要素のクリックでチェックボックスのオンとオフが切り替えられる。例によって,ベンダープレフィックスを省くため,<script>要素で-prefix-freeを読み込んである(第1回の「ベンダープレフィックスと-prefix-free」の項参照⁠)⁠。</div></div>消えている電灯を静的に表現するまず,<div>要素(class属性"lamp")で,つぎのように電灯が下がる線を描く(図1⁠)⁠。background-imageプロパティには,linear-gradient()関数を3つ定めた。0.7))はすべて同じだ。これは3つにそれぞれ異なる大きさ(background-sizeプロパティ)と位置(background-position)を与えることで,3つのパーツを表示している。消えている電灯は<div>要素(class属性"lamp")に,つぎのような::before擬似要素で加える(図2⁠)⁠。円形にして,box-shadowプロパティで内側(inset)に縁を与えた。電極の細長い部分は,つぎのように別の<div>要素(class属性"light")でつくる。ひとつの丸いパーツは,::before擬似要素で加えた(図3⁠)⁠。消えている電灯のCSSの定めは,以下のコード2にまとめた。