HTML、CSS学習にオススメのタイピング練習ゲーム！！

 

１．HTML、CSS学習にオススメのタイピング練習ゲーム！！

WEBデザインのコーディングを行う上で、重要なのが「タイピングスピード」です。

何故ならばタイピングスピードが早ければ、作業を素早くこなす事が出来るからです。同じ作業量でも作業スピードが早ければ、WEBコーディングの作業単価が上がる事になります。

会社員なら会社の売り上げアップにつながりますし、フリーランスなら自身の売り上げを上げる事になります。あと単純に２時間かかるモノが１時間で出来る様になれば、楽に仕事をこなす事が可能になります。

ではHTML、CSSのタイピングスピードを速くするには、どうしたらいいのでしょうか？

結論を言いますと、HTML/CSS練習用のタイピングゲームをやるという方法が一番です！

このあと、私がオススメするHTML/CSSタイピング練習ゲームの詳細をご紹介いたします。

２. HTML、CSSが打ちにくい理由

ここでは、HTML、CSSが打ちにくい理由を紹介したいと思います。

2-1 基本的なタイピングが出来ていない

まず、基本的なタッチタイピング（ブラインドタッチ）が出来ているが確認しましょう。

ちゃんと基本的なブラインドタッチが出来ていれば問題はありませんが、もし自己流の変わったタイピングをやってしまっていてタイピングスピードが遅い場合は、基本的なタイピングが出来る様になる練習をしましょう！

どうしても自己流でやってしまい、本来は打ちづらい方法で慣れてしまっていると、ある程度でどうしても頭打ちになってそれ以上早くならないという場合があります。

その場合は、下記の様なブラインドタッチ専用の練習ゲームが有効です。

2-2 ただ単に慣れていない

日本語の文章を打つ分には、普通に早く打てるのに「なぜかHTMLなどのコードが打つのが遅い！」と感じる方は多いのではないでしょうか？

プログラミングの経験が浅い方は、みんなそうなんじゃないと思います。なのでご安心ください。

ブラインドタッチは、そこそこ出来るのに、プログラミング言語を打つのが苦手だ！という方は…ズバリただ慣れていないだけです。

コードの元となっている言語は、英語です。日本語の文章だとほとんど使わないような、「V」とか「Q」とか「Ｌ」が出てきやがります…。

さらにプログラミングとなると「〈〉」やら「％」やら「/」やらが登場してしまいます。

あんまり使った事のないモノ、あまりやった事を早く出来ないは当たり前です。それでも早くしろというのは、ブラック企業のダメ上司みたいなのでやめましょう！

2-3 HTML、CSSタイピングゲームで練習あるのみ

HTML、CSSのタイピングスピードを速くするには「英字を打つのになれる事」が重要です！

これはズバリ「慣れる！触る！練習する！」に限ります！

そして、ここで大切なのは「楽しみながらやる！」これが、一番大切です。

実際にウェブサイトを作ってみてもいいでしょうし、自分でwebアプリを考えて作って見るのもいいでしょう！（経験者談）

いかに楽しく！かつ効率よく練習するか、を考えるのが上達への近道です！(共に頑張りましょう！)

３．HTML、CSSタイピングゲームがおすすめ！

実際にコードを書いてなれるのもいいですが、タイピング練習ゲームで練習するのがオススメです！

3-1 ブラインドタッチすらできませんでした・・・

そこでオススメなのが、タイピングゲームです！実は、一年程前まで私は「ブラインドタッチ」もできないヘナチョコでした(悲しい)

しかし、タイピングゲームのお陰で楽しく練習ができ、人並みにブラインドタッチが出来るようになりました。→ブラインドタッチ初心者におすすめ！無料タイピング練習ゲーム！

そして、数ヵ月前にHTML、CSSと言うものに出会いました。(遅い)

初めは、なんじゃこりゃ？レベルの遅いタイピングスピードでオロオロとしてました…

3-2 HTML・CSSに特化したタイピングゲーム作りました

１ヶ月位したら、まぁまぁ早くなってきたのですが、まだまだ感が否めないので、作っちゃいました。

基本的には、自分で練習する為に作った感じなんですが、なかなかいい感じなので公開します。不具合はご報告頂ければ対応致します。(ただ…気長にお待ち願います…)

４．自作WEBアプリ「 HTML/CSS自社ビル建設タイピングゲーム 」

実際のタイピングゲームのプレイ画面がコチラです。

タイピング速度、ビルの階数が変化するアニメーション付きで楽しくタイピングの練習が出来る！

ゲームの結果をデータ（ビルの階数、タイピングの速さ、総文字数、ミスタイプの回数）を表示します。

4-1 主な仕様

4-2 注意点、スペースに気を付けよう

若干わかりにくいですが、スペースも入力が必要です。文字があってるのに進まない！そんなときはスペースが未入力の可能性が大です！

4-3 無料WEBアプリ「HTML/CSSタイピングゲーム」のリンク

５．まとめ

■HTML、CSSのタイピングスピードが遅い理由

　英語と記号のタイピングに慣れていないから！

■HTML、CSSのタイピングスピードを上げる方法

　専用のタイピング練習ゲームで楽しみながら練習すべし！

5-1 おすすめタイピング練習ゲーム一覧

5-2 タイピング練習にオススメなキーボード

「タイピングの練習でキーボードを劣化させたく無い！」っていう方にお勧めなのがこちらのキーボードです。使い心地、コスパとも良好でオススメです！

私が実際に使用した感想を、過去記事「ロジクールK380 Bluetoothキーボード使用レビュー」で紹介していますので、よろしければご覧ください。

プログラミング独学は無理？私の体験談と初心者にお薦めな勉強法

この記事では「プログラミングって独学で出来る？」「プログラミング独学で出来る人、出来ない人の違いは？」「プログラミング学習は独学では無理？」と疑問をお持ちの方に、プログラミング初心者におすすめな「独学での勉強方法と手順」を詳しく解説します。プログラミング学習サイトを使った方法、本を利用する方法、プログラミングスクールで勉強する方法、YouTubeを使った勉強方法など、実際にプログラミング初心者だった私が独学でプログラミングを勉強した方法を詳しくご紹介します。

hirosyland.com

2020.07.20