この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
プログラミングを始めるなら、まずはHTMLから勉強するのがおすすめです。
HTMLはWebサイトを作成するための基本的な言語であり、理解しやすいことから初心者の方におすすめの言語です。
HTMLを学習後、JavaScriptなどの本格的なプログラミング言語へ勉強を深めることもできます。
勉強が進むと、コーダーやエンジニアへの転職・副業へ進むこともできます。
今回は、HTMLを無料で学べるサイトを紹介しますので、HTMLの勉強を始めてみましょう。
なぜHTMLを学ぶべきか？
まず、今一度HTMLをなぜ学ぶべきかを解説します。
この章の結論を書きます。
- HTMLはWebサイトの基本構造を作るための土台となる言語。
- 初心者でも学びやすく、他のプログラミング言語へのステップアップがしやすいから。
理由①
HTMLはWebサイトの基本構造を作るための土台となる言語です。
まずはHTMLを勉強してタグや属性を理解すると、簡単なWebサイトを作ることができるようになります。
始めてのWebサイトを作ることで達成感や自信を得ることができて、勉強に挫折することなく継続できるでしょう。
理由②
またもう一つの理由に、初心者でも学びやすく、他のプログラミング言語へのステップアップがしやすいことが挙げられます。
勉強を始めるにも、いきなり高度な勉強から始めても挫折する確率が高いです。
HTMLは初心者でも学びやすいと言われています。HTMLを習得したらJavaScriptやPHPなど他のプログラミング言語にステップアップするのもおすすめです。
プログラミングよりもWebデザイナーの方に興味がある方は、HTML・CSSなどの言語とPhotoshopなどデザインツールを勉強する方向性もおすすめします。
HTMLが無料で学べるおすすめサイト
では、HTMLが無料で学べるおすすめサイトを紹介します。
会員登録が必要なサイトもありますが、HTMLは無料で勉強することができます。
Progate
まずは、Progateを紹介します。
Progateの特徴は、実際にコードを書きながら勉強できることです。
Progateでの勉強は、イラストをふんだんに使用したスライドで概要をつかみ、ブラウザ上でコードを書いてアウトプットができます。
ブラウザでHTMLのコードを書く際には、自分の書いたコードが正しいコードなのかを判定してくれます。
課題に挑む際には、ちょっとしたヒントや、スライドで復習できるような仕組みになっていますので、挫折しにくくなっています。
HTMLを書くには、ブラウザとメモ帳（WindowsPCの付属アプリケーション）があれば書くことはできます。
ですが、これから勉強を進めていくと、HTML以外にもCSSを書いたり、WordPressサイトを作成する機会があります。
その際には環境構築が必要になってきます。
具体的には、エディタ（コードを効率的に書くアプリケーション）をインストールしたり、XAMPP（WordPressなどのWebアプリケーションの開発に必要）などをインストールする必要があります。
Progateで学習する際は、エディタをインストールしなくてもブラウザ上でコードを書くことができますので、学習の取っ掛かりにはピッタリなサイトです。
- テキストを読むだけではなく、すぐにコードを書いて試したい方
- 環境構築の前に、まずはブラウザだけで試したい方
paiza
続いて、paizaを紹介します。
paizaは、ITエンジニア向けの転職・就職・学習サービスです。
paizaの中にpaizaラーニングというページがあります。こちらはHTMLなどが動画で学べるようになっています。
文章で勉強するよりも動画で勉強したい方におすすめです。
スキルチェックというコンテンツがあります。
こちらはプログラミング言語を勉強が必要になりますが、アルゴリズムの問題を解いてランクアップを目指すというコンテンツです。
スキルチェックでランクがあがると、企業からスカウトがくることもあります。
HTMLを学習後、他のプログラミング言語の勉強を進めたら挑戦してみてください。
- 文章で勉強するよりも、まずは動画で勉強したい方。
- 転職も視野に入れている方。
おすすめの模写サイト
無料サイトでHTMLの概要を勉強したら、実際にWebサイトを作りたくなると思います。
デザインを一から作成するのもいいのですが、画像の素材を用意したり、デザインを全てしなければいけません。
コーディングの勉強を集中して進めたい場合は模写コーディングがおすすめです。
模写コーディングとは
模写コーディングとは、お手本とするサイトを再現するようにコーディングすることです。
画像などをダウンロードして、同じ見た目に再現します。
会社のサイト（例えば、ユニクロや無印良品のサイトなど）や実際に公開されているサイトを模写する際は、公の場所（サーバー）にアップするのは良くないとされています。
では模写コーディングするにはどうしたらいいかというと、
- 模写したサイトを自分のPCから出さない。
- ポートフォリオとして公開してもいいサイトを模写する。
おすすめのポートフォリオとして公開してもいいサイトがありますので、紹介します。
自分のポートフォリオとして公開することもできます。
模写をした後、サーバーへアップする練習にもなります。
模写コーディングを始めるのにおすすめです。
Codejump
Codejumpは「模写コーディング」や「デザインカンプからのコーディング」 でコーディングの練習ができるサイトです。
模写したサイトをポートフォリオとして使用できます。（有料教材のコンテンツは対象外）
ただ、模写したサイトを営業などで制作実績に使う場合は、マイナスイメージになる場合があるとのことです。
Adobe XDや、Figma デザインカンプをダウンロードできるので、デザインカンプからのコーディングができます。
実際のWebサイト制作では、デザインカンプとよばれる「完成見本」から画像を書き出したり、余白の幅などを読み取り、コーディングしないといけません。
Codejumpはデザインカンプをダウンロードし、コーディングする練習ができます。
質問ができるQ&Aサイト
HTMLの勉強を進めていくと、わからないことも出てくるかと思います。
質問をすると答えをくれるサイトがありますので、紹介します。
teratail
teratailは、ITエンジニア向けのQ&Aサイトです。
エンジニア向けのサイトですが、HTMLのことを聞いても答えてくれます。
ただ、まずGoogle検索をしてから質問するようにした方がいいと思います。
Google検索すると基本的なことはだいたい解決できます。
それでもわからないときにQ&Aサイトを活用するといいかと思います。
Q&Aサイトのメリット
Q＆Aサイトは、質問をすること自体が勉強になります。
Q&Aサイトに投稿するにあたり、わからないところを整理する必要があります。
わからないことがわからない状況で丸投げしても回答者から答えを得ることは難しいです。
わからない箇所のスクリーンショットやコードのコピー、質問文を考えることで、自分の情報の整理ができます。
YouTubeも勉強に使える
趣味の動画やお笑い動画もあるYouTubeですが、勉強に使えることをご存知ですか？
Youtubeの検索窓にHTMLやCSSといれると勉強になる動画がたくさん出てきます。
ぜひYouTubeを活用してみてください。
書籍
無料のサイトでHTMLの概要を勉強したら、書籍で勉強することをおすすめします。
無料ではありませんが書籍で勉強することで、広く深く学ぶことができます。
HTMLとCSSが勉強できる書籍を紹介しますので、チェックしてみてください。
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
こちらの本は、初心者の方にまずおすすめしたい本です。
とにかく親切でわかりやすく書かれています。
図・イラストが多用されていて、重要なところが大きな字やアンダーラインで強調されています。
私は小さい字が長文でびっしり書かれていると文字に圧倒されてしまいます。
その点、勉強に入りやすく、飽きずに続けることができます。
本のタイトル通り、1冊目としておすすめです。
HTML5&CSS3標準デザイン講座 30LESSONS【第2版】
こちらの本は、HTML・CSSの文法や、レイアウトの仕方などが詳しく解説されています。
私が読んだのは前の版の書籍でしたが、とても詳しく書かれていて何度も読み返し、辞書のように使っていました。
こちらはある程度HTMLの概要をつかんでから読むのがおすすめです。
まとめ
今回の記事をまとめると、
- プログラミングを勉強を始める際は、まずHTMLから勉強しよう。
- HTMLが無料で学べるおすすめサイトで勉強を始めよう。
- HTMLの勉強が進んだら、模写コーディングに挑戦しよう。
- わからないことがあったらQ&Aサイトで質問しよう。
- その他、Youtubeや書籍を活用して勉強を進めよう。
今回はHTMLが無料で学べるおすすめサイトについての記事を書きました。
皆さんもHTML勉強を始めてみましょう！
何よりプログラミングは本当に楽しいです。
ではまたノシ
