CSS3：チェックボックスの状態で大きくデザインを変える

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/FAwcq

See the Pen Power button by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

サンプルではボタン一つで画面全体の色を変えるということをCSSだけで行っていますが、CSS3の「checked」と「~」セレクタの使い方次第でJavaScriptでやっていたようなデザインをCSSのみで行えます。

HTML

<input type="checkbox" id="light" />
<div class="contentBody">
  <div class="switch">
    <label for="light">
      <i class="fa fa-power-off"></i>
    </label>
  </div>
  <h1>Please turn on the light.</h1>
</div>

「contentBody」は画面全体を覆うレイヤーなのですが、その前の1行目にチェックボックスを置いておます。

このチェックボックスはCSSで表示させないようにさせており、これの「checked」状態によってスタイルを切り替えることになります。そのため、大きくデザイン変化を行うレイヤーの中には入れず、その前に隣接して置いておくことがキモになります。

CSS

#light:checked ~ .contentBody {
  background-color: #ffe;
  color: #333;
  text-shadow: none;
}

サンプルは色々装飾しているのでキモの部分のみ抜粋します。

キモは1行目のセレクタの記述です。
「#light」がチェック状態の時、それ以降にある「contentBody」に対するスタイル設定を行っています。

「~」セレクタは「その要素の後にある要素」に対するセレクタなので、チェックボックスの後にしか効きませんのでHTMLでも最初にチェックボックスを置く必要がありました。

チェックボックスは<label>タグでチェックできるのでどこに置いても問題ありませんが、文書構造としては不要なチェックボックスを置くことにもなるので、その辺りの考慮も必要かも知れません。