このブログで度々言及させていただいているＬＳＳさんの記事を利用して遊んでみました。
紹介されている例文
このように、文章の一部に時々アンダーラインがつきます。
例文や問題を見てもらえば一目瞭然ですが、下の図のような流れで現れたり消えたりするアンダーラインを使ってのパズルです。
まずは、ちかちかのリズムが違うものが並ぶ中で同じの探しから。
※ ＜ 注意 ＞
ちかちかをあんまり見つめ過ぎると、不快な気分や頭痛、吐き気の原因になることがあります。見過ぎにはご注意ください。（俗称「ポケモンショック」等）
＜問題１．同じの探し＞
下の８つのちかちかアンダーラインで、同じリズムの文章は何番と何番？
1.このように、文章の一部に時々アンダーラインがつきます。
2.このよらに、又章の一部に時々アンダーラインがつきます。
3.こよのうに、文章の一部に時々アングーラインがつさます。
4.このように、文章の一部に時々アンターラインがうきます。
5.このうよに、文章の一部に時々アンダーラインがつきます。
6.このよにう、文章の一郎に時々アンダーラインがつきます。
7.こゆまうに、文章の一部に時々テンダーラインがつきます。
8.このようこ、文章の一部に時々アンダーテインがつきます。
答えはこちら
＜問題２．間違い探し＞
問題１の８つの文章と下の８つの文章で違いが５か所あります。どこでしょう。
1.このように、文章の一部に時々アンダーラインがつきます。
2.このよらに、又章の一部に時々アンダーラインがつまきす。
3.こよのうに、文章の一部に時々アングーラインがつさます。
4.このように、文章の一部に時々アンターラインがうきます。
5.このうよに、文章の一部に時々アンダーラインがつきます。
6.このよにう、文章の一郎に侍々アンダーラインがつきます。
7.こゆまうに、文章の一部に時々テンダーラインがつきます。
9.このようこ、文章の一部に時々アンダーテインがつきます。
答えはこちら
あとがき
ＬＳＳさんのちかちかアンダーラインを使い、勢いでパズル（同じの探し・間違いさがし）にしてみました。
私がもっとCSSに詳しければ、さらに難度の高い問題も作成できたのでしょうが、今の私には点滅の速さや色を変えるくらいが精一杯。点滅も、「ちかちか」じゃなくて、「ちかっ！」や「ちかちかちか」とかの変化ができればまた味の違う問題ができたように思います。
でも、動きのあるパズルが作成できたのが嬉しいです。
紙に描いた問題では作れない世界。
また機会があれば新しいパズル作成にチャレンジしたいです。
コードについて
ＬＳＳさんのちかちかアンダーラインのコードがこれです。
<style><!--
@keyframes uwavea{
0%{text-decoration-line:none;}
69%{text-decoration-line:none;}
70%{text-decoration-line:underline;}
79%{text-decoration-line:underline;}
80%{text-decoration-line:none;}
89%{text-decoration-line:none;}
90%{text-decoration-line:underline;}
99%{text-decoration-line:underline;}
100%{text-decoration-line:none;}
}
.uwave{
animation:uwavea 3s linear 0s infinite;
text-decoration-style:double;
text-decoration-color:red;
}
--></style>
<p>このように、<span class="uwave">文章の一部</span>に時々アンダーラインがつきます。</p>
上の赤太字の部分4か所を下の例では青太字に変えています。
<style><!--
@keyframes uwavea{
0%{text-decoration-line:none;}
69%{text-decoration-line:none;}
70%{text-decoration-line:underline;}
79%{text-decoration-line:underline;}
80%{text-decoration-line:none;}
89%{text-decoration-line:none;}
90%{text-decoration-line:underline;}
99%{text-decoration-line:underline;}
100%{text-decoration-line:none;}
}
.uwave5b{
animation:uwavea 5s linear 0s infinite;
text-decoration-style:double;
text-decoration-color:blue;
}
--></style>
<p>3.こよのうに、<span class="uwave5b">文章の一部</span>に時々アングーラインがつさます。</p>
class名（uwave→uwave5b）、時間のsecond（3s→5s）、色（red→blue）と予想のついた部分だけ手を加えました。「@keyframes」 、「linear 0s infinite」、線の数や太さ等気になる部分は多々ありますが、その辺は今回そのまま使わせてもらいました。
@keyframes uwavea の定義は最初の１回だけでいいのではと思いつつ、 ＬＳＳさんのちかちかアンダーラインのコードを8個分コピペしてます。
何しろ、まだまだ初心者、素人です。変に手を付けて失敗するより、まずは成功体験を増やしていきたいと考えてる段階。初心者マークを外すのはまだまだ先のようです。
