HTML・CSSの基礎を勉強し終えた後のコーディング練習方法について
はじめに
HTMLやCSSを一通り基礎を勉強し終えて、コーディングの技術をこれからどう伸ばしていけば良いかわからないという方が少なからずいるのではないでしょうか。もう1度復習をしようか、それともJavaScriptなどを勉強してみようか今後の学習の進め方に迷ってしまいます。この記事では、そういう方のために、HTML・CSSの基本を一通り学んだ後のコーディングの練習方法について紹介していきます。
コーディングとは
コーディングとは、コンピューターにして欲しい表示や処理をコンピューターが理解できる言葉で記述することです。コンピューターは、0と1しか理解できません。0と1をいくつも組み合わせて、「A」や「B」などの文字を理解しています。ですが、私たち人間には、この0と1のみを組み合わせた機械語を理解するのは不可能と言われています。この機械語を人間にもわかるようにしたものがプログラミング言語です。通常、コンピューターは、「この処理の後はこの処理」などと命令を記述してあげなければ動きません。そこで、JavaやPHPなどのプログラミング言語やHTML・CSSなどのマークアップ言語を使い、コンピューターに指示を書いていきます。JavaやPHPのようなプログラミング言語を使ってコードを書いていくこともコーディングと言われることがありますが、基本的には、HTMLやCSSを使ってコードを書いていくことをコーディングと呼びます。デザイナーから渡されたデザインを基に見出しを付けたり、テキストや画像を配置したり、背景や文字に色を付けたりなど、要するに「ここにこれをこんな風に表示して欲しいとコンピューターに命令すること」で、ブラウザで見える形にしていくのがコーディングです。
コーディングの練習方法
ここでは、HTMLやCSSの基本を一通り学び終えた方向けに、さらにHTMLやCSSの理解を深めるためにコーディングの練習方法を解説していきます。HTMLやCSSの基礎は勉強し終えたけど、この後どういう風に学習を進めればいいかわからないという方やHTMLやCSSについて、より理解を深めたいという方はこちらを参考にしてみてください。
他サイトのページを模写する
コーディングの技術を上げたいのであれば、他サイトのページを模写するという練習方法がオススメです。実際にホームページやサイトのコーディングをしているコーダーさんなどもこの方法をよくオススメしています。 練習方法は簡単です。WEB上に公開されているサイトやホームページを見て、同じようにコードを書いていけば良いだけです。コーディングをしていて分からないところなどは、検索して調べて進めていきます。それでも、調べたけれどどうしても分からないという場合があると思います。そういう場合はHTMLやCSSのコードを見られる開発ツールというものがブラウザにあります。以下に開発で使われる主なブラウザの開発ツールの開き方をまとめました。
| Firefox | 「開発ツール」→「開発ツールを表示」→「コンソールを開く」 |
| Chrome | 「その他ツール」→「デベロッパーツール」→「Console」 |
| Edge/IE | 「ツール」→「F12」→「コンソール」 |
| Safari | 「環境設定」→「詳細」→「メニュバー"開発"メニューを表示」→「開発」→「Webインスペクタを表示」→「コンソール」 |
開発ツールを使い、自分の書いたコードと他の人が書いたコードを見比べてみると、ここはこう書くのだなといろいろ勉強になります。ぜひ、コーディングを練習する際は、この開発ツールを活用してみてください。
自分でサイトを作ってみる
HTMLやCSSの基本を学んだのであれば、十分1つのサイトを作れるくらいになっています。 自分で実際にサイトを作ってみるというのは、技術力をあげる良い練習方法です。自分でデザインを考えるので、他のサイトの模写よりも簡単です。模写が難しいと感じた方は、先に自分でサイトを作ってみると良いでしょう。その後、他サイトの模写に挑戦するというのもコーディングの良い練習方法です。自分でサイトを作るときのポイントとしては、実際に公開するサイトということを意識して作ることです。画像などもできるだけ良いものを用意し、どんなページを作るか、ナビゲーションには何を置くか、より検索されやすいページにするにはどうしたら良いかなどを考えながら、制作を進めると良いでしょう。その方が適当な画像や文章を置くよりも、モチベーションも上がりますし、人に見せられるようなサイトを作ることによって、他人が自分の作ったサイトを評価しやすいので、仕事にも繋がります。
まとめ
いかがでしたでしょうか。この記事では、コーディングの練習方法について解説しました。HTML・CSSの基礎を勉強し終えたら、コーディングの腕を上げるには、実際にサイトを作ったり、他サイトの模写をしたりするのが一番の近道です。コーディングスキルを上げたいと思っている方は、是非この記事の内容を参考に練習してみてください。