今回のお題は、スイッチで電灯をつけたり消したりする(サンプル1)。デザインとアニメーション表現は「lamp」を参考にさせてもらった。この連載の主題である「インターフェイス」としては、応用の幅が少し狭いかもしれない。けれど、おもしろい素材なので、採り上げることにした。ただ、スイッチがさびしいので、「CSS3 Checkbox Styles」からひとつ使わせてもらった。複数のCSSを組み合わせる場合は、設定がかぶらないようにできるだけクラスを用いるのがよい。そこで、構成は大幅に手直しした。もちろん、コードは絞り込み、わかりやすく組み立て直している。
見える要素がない<body>要素の記述
今回、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>
要素(class
属性"lamp")で、つぎのように電灯が下がる線を描く(図1)。background-image
プロパティには、linear-gradient()
関数を3つ定めた。ところが、色(rgba(0, 0, 0, 0.7))はすべて同じだ。これは3つにそれぞれ異なる大きさ(background-size
プロパティ)と位置(background-position
)を与えることで、3つのパーツを表示している。
消えている電灯は<div>
要素(class
属性"lamp")に、つぎのような::before
擬似要素で加える(図2)。円形にして、box-shadow
プロパティで内側(inset
)に縁を与えた。
電極の細長い部分は、つぎのように別の<div>
要素(class
属性"light")でつくる。もうひとつの丸いパーツは、::before
擬似要素で加えた(図3)。消えている電灯のCSSの定めは、以下のコード2にまとめた。
スイッチを静的に表現する
つぎに、ボタンスイッチを描く。オフのスタイルから決めよう。オンとオフに共通の台座は、つぎのように<div>
要素(class
属性"button")の::before
擬似要素として加える。円形の背景をlinear-gradient()
関数により明るいグレーのグラデーションで塗り、box-shadow
プロパティで立体的に見せている。オフの暗い円形の内側は、子の<div>
に描いた(図4)。
ボタンスイッチのオンの内側は、子の<div>
要素に::after
擬似要素でつぎのように加える。box-shadow
プロパティで出っ張りを表現した(図5)。アニメーションさせる前の電灯とスイッチは整ったので、以下のコード3にまとめた。
スイッチと点灯のアニメーションを加える
今回のお題では、見えるものがない<body>
要素に、CSSで電灯とスイッチを描くのがもっとも手間のかかる作業だった。これから加えるアニメーションは、それと比べれば簡単だ。ボタンスイッチのアニメーションから先につくろう。ボタンスイッチのオンの::after
擬似要素は、つぎのようにopacity
プロパティではじめは透明(0)にしておく。そして、スイッチの<label>
要素(class
属性"button")のクリックでオンとオフが切り替わるチェックボックスの<input>
要素(class
属性"check")に、:checked
擬似クラスでプロパティを不透明(1)に戻す。ついでに、スイッチにマウスポインタを重ねたとき(:hover
擬似クラス)は半透明にした。
チェックボックスの<input>
要素(class
属性"check")がチェックされたら(:checked
擬似クラス)灯りをつける。電灯の::before
擬似要素は、背景色を白く変え、box-shadow
プロパティで半透明の白い光彩を重ねた。そして、transition
プロパティでアニメーションさせればよい。これで、スイッチをクリックすれば、電灯がついたり消えたりする。書き上がったCSSの定めは、以下のコード4にまとめた。