デザインチームの勉強会でHTML5カルタをやりました！

こんにちは、まおです！私が所属するデザインチームは4人という少人数ながらも、毎週勉強会を開催しております。
内容はデザイン関連の本の内容を共有しあったり、気になるWebサイトの考察、情報収集法など、様々です。ハンズオンだとJavaScriptで課題に取り組んだり、Code in the darkや、自由に自分の名刺を作ったりもしています。
講師は毎週ローテーションとなっており先日は私の番でHTML5カルタをやりました！

HTML5カルタって？

HTML5カルタとはその名の通り、日本の古くからの遊びかるたを通してHTML5のタグを覚えられるというものです。読み札にはHTML5の各タグの説明、絵札にはタグの名前が書かれています。
初級、中級、上級と分けられていますが、現在手に入るのは公式サイトで配布されている初級と中級がミックスされたPDF版のみとなっています。

ルール

ルールは従来のかるたとは違う、公式サイトでも紹介されていた得点制を導入しました。
初級のタグ（28種類）は1点、中級のタグ（8種類）は2点とし、終了後に採点して一番点数が高かった人が優勝者です。

どうする読み手問題

冒頭でもお伝えしたとおりデザインチームは4人！かるたは少しでも人数が多い方が楽しいし読み手に一人とられるのは勿体無い！というわけで以下のランダムツールを急遽作りました。是非ご参考ください。

See the Pen HTML5カルタ 読み札ランダム表示ツール by mao (@maopage) on CodePen.

Slider-Pro.jsを使ってランダムで読み札を表示させ、キーボードの矢印キーで次の読み札に送ります。「答え：」以降をカーソルで選択すると文字が反転されて答えが確認できます。自動読み上げ機能はないので、画面が表示された時点でどの絵札かわかった人はバシッといっちゃいます。

いざ勝負!

普段使い慣れているタグでも、パッと答えが出てこないものがいくつかありました。たとえばasideタグの場合だと「本筋から逸れる解説などのセクションのタグ」と書かれています。自分の中でどのようなタグかなんとなく分かっていても、いざ言葉にされると一瞬では判断できませんでした。
途中、ランダムツールが誤動作して次の読み札が表示されたり、pタグとbタグの上下がわからず混乱が起きたり、絵札が余ったりとトラブルはありましたがそれもひっくるめて楽しかったです！
優勝者は、12点の同率1位でさいとう（黒）とTAKのお2人でした。おめでとうございます！

やってみて

HTML5のタグは全部で108個あります。コーディングするにあたって全種類を覚える必要性は必ずしもありません。ですが、せっかく普段HTMLを使っているならやはりタグはしっかり一通り頭に入れておきたいなと改めて感じました。

まとめ

今回はメジャーなタグが中心でしたが是非上級版をやってみたいですね。またお正月にでも！次回はルールなどもっと工夫してやりたいと思います。読み札と絵札で神経衰弱もできるそうですよ。
みなさんも興味ありましたら是非やってみてください。それではまた！