:in-rangeと:out-of-rangeを使ってニムゲームを作る
UI開発者 板垣突然ですが、みなさんはCSS疑似クラスの種類をいくつくらいご存じですか？
:hoverや:activeは、ある程度CSSに触れたことある方は、使用された経験があるのではないでしょうか。
では、:in-rangeと:out-of-rangeはどうでしょうか？おそらくあまりなじみのないものだと思います。
今回の記事では、:in-rangeと:out-of-rangeの概要、そしてこれらを使った簡単なゲームをご紹介します。
:in-rangeと:out-of-rangeとは
:in-rangeはmin属性およびmax属性を持つHTML要素の現在のvalue値が、それぞれの値の範囲内である場合に有効となる疑似クラスです。
以下の例では、min値は1でmax値が10、そしてvalue値が10なので、min <= value <= maxが成り立ち.example:in-rangeを適用できます。
<input class="example" type="number" min="1" max="10" value="10">
:out-of-rangeはin-rangeの逆で、value値がmin値とmax値の範囲外である場合に有効となります。
以下の例ではmin値は1でmax値が10、そしてvalue値が11なので、min <= value <= maxが成り立たなくなり、.example:out-of-rangeを適用できるようになります。
<input class="example" type="number" min="1" max="10" value="11">
使い道
これらの疑似クラスの使い道としては、formバリデートが一般的でしょう。
例えば、特定の範囲の年齢を入力してほしいときなどに、範囲外の年齢を入力された場合はCSSで見た目を変更してユーザーに視覚的な気づきを与えることができます。
form以外で使ってみる
もちろん、考え方次第ではformバリデート以外でもこれらの疑似クラスを活用できます。
今回はCSSのみで、ニムゲーム（数トリゲーム）を作るためにout-of-rangeを使用してみました。
See the Pen zYvVJdr by sho itagaki (@sho_itagaki) on CodePen.
このゲームは2人から遊ぶことができます。以下の流れで遊んでみてください。
- 1ターンで最大いくつまで数値を引くことができるか決める
- 先攻後攻を決めて、先行になったプレイヤーから自分のプレイヤー名が書かれたラジオボタンを押す
- 制限時間内にinputエリアから特定の数値を引き、次のプレイヤー名が書かれたラジオボタンを押して自分のターンを終了する
- 3を互いに繰り返していき、制限時間内に数値を引くことができなくなるか、数値を0にしてしまったらその時点で操作していたプレイヤーが負けとなる
※キーボードを使ってinput内の数値を操作する場合はmin値未満にはできないので注意してください（このゲームの場合は1）。
ちなみにout-of-rangeは結果の判定に使用しています。
当該のコードを確認してみましょう。
<input class="input" type="number" min="1" max="10" value="10">
<p class="out">Game Over!</p>
.input:out-of-range {
border: 2px solid rgba(230, 0, 0, .6);
}
.input:out-of-range ~ .out {
display: block;
position: absolute;
top: 50%;
left: 50%;
font-size: 4rem;
font-weight: bold;
color: rgba(230, 0, 0, .6);
transform: translate(-50%, -50%) rotate(-15deg);
margin: 0;
}
.out {
display: none;
}
.input:out-of-range適用時には要素の枠線の色変更と、間接セレクターを用いて.outクラスを持つ要素を表示させています。
ちなみに、間接セレクターも用いたinputの状態変化に合わせて兄弟要素および子要素のスタイルを変化させる手法は、独自デザインのフォーム要素を作成する際によく使われています。
おわりに
今回ご紹介した:in-rangeと:out-of-rangeの使いどころはまだまだ未知数ですので、みなさんもいろいろな使い方を試してみてくださいね。