サンプルコードで学ぶ CSS プログラミングの基本テクニック

この記事について

NSEG Advent Calendar 2015 の 8 日目の記事です。
2日目の CSS Bird に続いて、CSS プログラミングの基本テクニックを紹介します。

INPUT[type=radio] ~ LABEL

最も基本的なテクニックの一つです。

まず先頭にラジオボタンを並べ、その後ろに各ボタンに対応したLABEL を「position: absolute」で重ねておきます。

そこからタップのアクションに対する変化として、ラジオボタンの checked に応じて LABEL の z-index を変化させることで、同じ場所のタップで次々に隣のラジオボタンの状態を変化させていくことができます。

以下がサンプルコードです。

ラジオボタンの場合は、LABELの1クリックで「対応するラジオボタンへの checked 属性の有効化と、他のラジオボタンの checked 属性の無効化」の2つの状態変化を起こすことができます。これを利用すると、「ゴールの状態になるまでぐるぐる状態変化させる」パズルのようなゲームを作りやすいです。CSS 8puzzle はほぼこのテクニックだけで作られています。

INPUT[type=checkbox] ~ LABEL

これもラジオボタンに並ぶ最も基本的なテクニックです。

ラジオボタンの場合と同じく先頭にチェックボックスを並べ、その後ろに各ボタンに対応したLABEL を「position: absolute」で重ねておきます。

タップのアクションに対する変化のさせ方もラジオボタンと同様です。

以下がサンプルコードです。

チェックボックスは「状態を保存して次々に分岐していく」タイプのゲームを作りやすいです。選択によってエンディングが変わるようなアドベンチャーゲームなどが作れると思います。

CSS Noughts and Crosses はほぼこのテクニックだけで作られています。このゲームではコンピューター側の手順(シナリオ)は最初に計算されていて、ユーザーの選択によって分岐が発生して次の手が変化するという流れになっています。つまり、選択によってハッピーエンド(win)かバッドエンド(lose)の結末になるアドベンチャーゲームとも言えるものになっています。

:hover

:hover 擬似クラスを使うと、デスクトップのような環境であればマウスの動きに追従しているかのように見せることができます。(モバイルのブラウザだと、BUTTON要素をタップするとその後 :hover 扱いになるようなので、今回は :hover を受ける要素を BUTTON にしています)

先頭に :hover を受ける要素を敷き詰めて、その後ろに変化させる要素を置きます。

以下がサンプルコードです。

:hover では、この例のようにマウスに追従しているかのように見せる他にも、「障害物の要素を用意しておいて、その要素が :hover になった瞬間にゲームオーバーの画面を最前面にもってくる」のようにすれば、当たり判定にも利用することができます。

animation

animation を使うと要素を動かすことができます。animation は、 animation-play-state プロパティを running にすると動き始め、 paused にすると動きがその場で止まります。

これを利用すると、前述の「INPUT[type=radio] ~ LABEL」のパターンを使いつつラジオボタンの状態によって animation-play-state 切り替えることで、ユーザーがタップした時点での要素の位置を確定させることができます。

以下がサンプルコードです。

animation による要素の位置の変化は、CSS から利用できる形の状態の変化として残らないのですが、前述の :hover と組み合わせて利用すると「ユーザーのタップのタイミングで障害物の当たり判定を確定させつつ、:hover が発生したらゲームオーバーにする」という形で、「状態を保存する方法」としてゲームに利用できるようになります。

まとめ

以上の4つが CSS プログラミングでよく使われるテクニックです (「私に馴染みのある限りの」ですが) 。基本的にはこれらのテクニックを組み合わせて、その上で兄弟関係や入れ子関係を調整することにより CSS Bird も作られているので、この記事を読んだ後に使われているテクニックに思いを馳せつつもう一度遊んでみると、また違った見方で楽しむことができる、かもしれません。