このブログで度々言及させていただいているLSSさんの記事を利用して遊んでみました。
little-strange.hatenablog.com
紹介されている例文
このように、文章の一部に時々アンダーラインがつきます。
例文や問題を見てもらえば一目瞭然ですが、下の図のような流れで現れたり消えたりするアンダーラインを使ってのパズルです。
まずは、ちかちかのリズムが違うものが並ぶ中で同じの探しから。
※ < 注意 >
ちかちかをあんまり見つめ過ぎると、不快な気分や頭痛、吐き気の原因になることがあります。見過ぎにはご注意ください。(俗称「ポケモンショック」等)
<問題1.同じの探し>
下の8つのちかちかアンダーラインで、同じリズムの文章は何番と何番?
1.このように、文章の一部に時々アンダーラインがつきます。
2.このよらに、又章の一部に時々アンダーラインがつきます。
3.こよのうに、文章の一部に時々アングーラインがつさます。
4.このように、文章の一部に時々アンターラインがうきます。
5.このうよに、文章の一部に時々アンダーラインがつきます。
6.このよにう、文章の一郎に時々アンダーラインがつきます。
7.こゆまうに、文章の一部に時々テンダーラインがつきます。
8.このようこ、文章の一部に時々アンダーテインがつきます。
ヒントが欲しい人は、ここをクリック
点滅を見続けるのがつらい人は、文章の一部の違いでも見つけることができます。
さらにヒントが欲しい人は、ここもクリック
「文章の一部」の字が間違っている二つの文が同じ点滅です。
答えはこちら
<問題2.間違い探し>
問題1の8つの文章と下の8つの文章で違いが5か所あります。どこでしょう。
1.このように、文章の一部に時々アンダーラインがつきます。
2.このよらに、又章の一部に時々アンダーラインがつまきす。
3.こよのうに、文章の一部に時々アングーラインがつさます。
4.このように、文章の一部に時々アンターラインがうきます。
5.このうよに、文章の一部に時々アンダーラインがつきます。
6.このよにう、文章の一郎に侍々アンダーラインがつきます。
7.こゆまうに、文章の一部に時々テンダーラインがつきます。
9.このようこ、文章の一部に時々アンダーテインがつきます。
答えはこちら
あとがき
LSSさんのちかちかアンダーラインを使い、勢いでパズル(同じの探し・間違いさがし)にしてみました。
私がもっとCSSに詳しければ、さらに難度の高い問題も作成できたのでしょうが、今の私には点滅の速さや色を変えるくらいが精一杯。点滅も、「ちかちか」じゃなくて、「ちかっ!」や「ちかちかちか」とかの変化ができればまた味の違う問題ができたように思います。
でも、動きのあるパズルが作成できたのが嬉しいです。
紙に描いた問題では作れない世界。
また機会があれば新しいパズル作成にチャレンジしたいです。
LSSさん、面白いCSSアイデアをありがとうございました。
コードについて
LSSさんのちかちかアンダーラインのコードがこれです。
<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 の定義は最初の1回だけでいいのではと思いつつ、 LSSさんのちかちかアンダーラインのコードを8個分コピペしてます。
何しろ、まだまだ初心者、素人です。変に手を付けて失敗するより、まずは成功体験を増やしていきたいと考えてる段階。初心者マークを外すのはまだまだ先のようです。