記事中には先行実装の仕様を取り扱ったものがあります。仕様策定が続いていますので、最新仕様については、仕様書もご確認ください。(2017.07.14) はじめに このシリーズでは、HTML+CSSの技術を使った、さまざまな実装アイデアを解説します。JavaScriptを使わずとも、いろいろな表現が可能です。HTMLとCSSを力をどれだけ引き出せるかに重点をおきます。 第1回目はJavaScriptを使わずに、HTMLとCSSのみで実装したタイピングゲームの解説をします。 今回紹介するサンプルは以下のリポジトリからダウンロードまたはクローンできます。 サンプル codegrid / 2014-01-derive-html-css まずはサンプルを見てみましょう。NEW GAMEボタンをクリックすると、ゲームが始まります。画面上に表示されたワードを制限時間内にタイピングしていきます。問題をクリア
![ここまでできる!HTML+CSS | 第1回 タイピングゲームを作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae8c6addf914c364ec293b69ccc0b97fdce953b0/height=288;version=1;width=512/https%3A%2F%2Fcodegrid.imgix.net%2Fimage.png%3Fixlib%3Djs-3.8.0%26w%3D1200%26h%3D630%26mark%3Dhttps%253A%252F%252Fcodegrid.imgix.net%252F~text%253Fixlib%253Djs-3.8.0%2526w%253D1000%2526txt%253D%2525E3%252582%2525BF%2525E3%252582%2525A4%2525E3%252583%252594%2525E3%252583%2525B3%2525E3%252582%2525B0%2525E3%252582%2525B2%2525E3%252583%2525BC%2525E3%252583%2525A0%2525E3%252582%252592%2525E4%2525BD%25259C%2525E3%252582%25258B%2526txt-fit%253Dmax%2526txt-size%253D57%2526txt-font%253DHiragino%252520Sans%252520W5%2526txt-color%253Dfff%26mark-x%3D90%26mark-y%3D195%26blend%3D%2523BD1818%26blend-mode%3Doverlay%26txt%3D%25E3%2581%2593%25E3%2581%2593%25E3%2581%25BE%25E3%2581%25A7%25E3%2581%25A7%25E3%2581%258D%25E3%2582%258B%25EF%25BC%2581HTML%25EF%25BC%258BCSS%2520%257C%2520%25E7%25AC%25AC1%25E5%259B%259E%26txt-align%3Dtop%252Cleft%26txt-font%3DHiragino%2520Sans%2520W5%26txt-size%3D30%26txt-pad%3D100%26txt-color%3Dfff)