ズンドコとかいうもの凄いキャッチーな名前のブームが面白そうだったのでROM専だったけど便乗してみます。
先に書いておくと、先人の方々同様に仕様を完璧には満たしていません。
（やっぱHTMLとCSSじゃ無理だよなぁ…）
やってること
「ズン」と「ドコ」を表示するラジオボタンをpositionで重ね合わせて、そのz-indexをanimationで切り替えることで「ズン」と「ドコ」を交互に表示させます。
こうすることで、ユーザが押したタイミングで「ズン」か「ドコ」のどちらかが選択されるので、一応ランダム的なことはできます。
あとは、ラジオボタンを使ったタブの要領で「ズン」と「ドコ」を表示させて、「キ・ヨ・シ！」表示のためにセレクタを捏ねくり回せば完成！
HTML
<input class="r1" name="g1" type="radio"> <!-- ズン -->
<input class="r1" name="g1" type="radio"> <!-- ドコ-->
<input class="r2" name="g2" type="radio">
<input class="r2" name="g2" type="radio">
<input class="r3" name="g3" type="radio">
<input class="r3" name="g3" type="radio">
<input class="r4" name="g4" type="radio">
<input class="r4" name="g4" type="radio">
<input class="r5" name="g5" type="radio">
<input class="r5" name="g5" type="radio">
「ズン」と「ドコ」を判定するためのチェックボックスを、ズンドコ判定したい数の2倍用意します。
<span class="r1">ズン</span>
<span class="r1">ドコ</span>
<span class="r2">ズン</span>
<span class="r2">ドコ</span>
<span class="r3">ズン</span>
<span class="r3">ドコ</span>
<span class="r4">ズン</span>
<span class="r4">ドコ</span>
<span class="r5">ズン</span>
<span class="r5">ドコ</span>
<span class="kiyoshi">キ・ヨ・シ！</span>
「ズン」と「ドコ」を表示する要素と、「キ・ヨ・シ！」を表示するための要素を用意します。
CSS
* {
padding: 0;
margin: 0;
font-size: 0;
}
span {
display: none;
font-size: 10px;
}
input {
-webkit-appearance: none;
height: 30px;
width: 30px;
margin: 10px;
border: 1px solid #999;
background-color: #ccc;
}
とりあえず、初期化して、ラジオボタンを押しボタン風に。
font-sizeを0にするのはラジオボタンを重ねるときのズレを消すため。
input:nth-child(even) {
position: relative;
margin-left: -40px;
animation: anime .5s steps(2) infinite;
}
@keyframes anime {
0% { z-index: 1; }
50% { z-index: -1;}
100% { z-index: 1; }
}
nth-child(even)で「ドコ」表示用のラジオボタンを、「ズン」表示用のラジオボタンに重ね合わせて、animationでz-indexを-1〜1に交互に切り替えます。
input.r1:nth-child(odd):checked ~ span.r1:nth-child(odd) { display: inline; }
input.r1:nth-child(even):checked ~ span.r1:nth-child(even) { display: inline; }
input.r2:nth-child(odd):checked ~ span.r2:nth-child(odd) { display: inline; }
input.r2:nth-child(even):checked ~ span.r2:nth-child(even) { display: inline; }
input.r3:nth-child(odd):checked ~ span.r3:nth-child(odd) { display: inline; }
input.r3:nth-child(even):checked ~ span.r3:nth-child(even) { display: inline; }
input.r4:nth-child(odd):checked ~ span.r4:nth-child(odd) { display: inline; }
input.r4:nth-child(even):checked ~ span.r4:nth-child(even) { display: inline; }
input.r5:nth-child(odd):checked ~ span.r5:nth-child(odd) { display: inline; }
input.r5:nth-child(even):checked ~ span.r5:nth-child(even) { display: inline; }
見づらいですが、ラジオボタンで作るタブの要領で、偶数のラジオボタンがチェックされているときは、偶数の<span>を表示、奇数の場合はその逆を表示します。
これで、「ズン」と「ドコ」の表示が完成。
input:nth-child(odd):checked
+ :not(:checked)
+ :checked
+ :not(:checked)
+ :checked
+ :not(:checked)
+ :checked
+ :not(:checked)
+ :not(:checked)
+ :checked
~ .kiyoshi {
display: inline;
}
最後にキモの「キ・ヨ・シ！」判定部分。
5つの「ズン」と「ドコ」が規則に沿って並んでいるかを見れば良いので、
- 「ズン」のラジオボタンは偶数
- 「ドコ」のラジオボタンは奇数
であることを利用して、奇数のラジオボタンが選択されていて、その弟要素が規則に沿ってチェックされているかを判定し、最後に隣接セレクタで「キ・ヨ・シ！」要素を表示させています。
作って思ったこと
- 無理ゲー
-
<input>のindeterminateプロパティがHTML側で指定できればチェックボックスで3値チェックできるので、もっと楽に書けるはず。 - セレクタを捏ねくり回せば結構いろいろできる。
-
animationも使い方次第でいろいろとできる。 - Javascriptはやっぱり偉大だった
というわけで、どこかの天才がHTMLとCSSだけで仕様を満たしたズンドコを完成させるのを願いつつギブアップです！