カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-1

HTMLを構成する

HTMLを構成する

はじめにHTMLのコーディングをしていきましょう。

以下の完成形をイメージして、HTMLを組み立てます。

タイピングゲーム

▼コーディング完成 (codepenでは <body> 以下を書けばOK)

html
12345678910111213
Copied!
<body> <div id="main"> <div><h2>タイピングゲーム<h2></div> <div id="content"> <p id="yomi">よみ</p> <div id="mondai"> <p id="char-1" class="text default">a</p> <p id="char-2" class="text default">b</p> <p id="char-3" class="text default">c</p> </div> </div> </div> </body>

以下のようになっていればOKです。

2019-02-27 15 57 20

div id="content"が枠にあたる部分です。
読みとローマ字を表示する部分は別々に作ります。
仮で適当に文字をそれぞれ入れておきます。
div id="mondai"以下に <p>タグで一文字ずつ入れるのは判定と文字色を変えるためです。
詳しくはjavascriptの実装部分で説明します。

classは後ほどスタイルの調整で利用するので上記の通り入れておいてください。

1章はここまで。次の章で見た目を整えましょう。

現在のパート (0)
全パート (6)
みんなで助け合おう!
現在のパートのディスカッション 全0件