テックキャンプ無料カウンセリング テックキャンプ無料カウンセリング
資料請求はこちら

HTML勉強法おすすめ10選!無料サイト・アプリ・本を紹介

更新: 2021.07.09

>>No1エンジニア養成プログラム テックキャンプ

初めてのIT転職で読むべき!お役立ちebook3点セット

ウェブページの作成に使われるHTML。CSSと合わせて学習すれば、自分でホームページなどのWebサイトを作成することができるようになります。

HTMLはプログラミング初心者が最初に学習するのに適している技術で、無料のオンライン学習サイトや本などを使って独学も可能です。この記事では、おすすめのHTML勉強法や、HTML学習のポイントについて解説します。

HTMLとは

未経験からPythonエンジニアに転職するコツHTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で「エイチティーエムエル」と読みます。


HTMLはウェブページ作成のために開発された言語ですが、プログラミング言語ではなくマークアップ言語の1つです。

HTMLを用いて見出し、本文、段落、表などの各要素に目印をつける(マークアップ)することで、ウェブページ全体の構成を定義します。

HTMLとCSSの関係

HTMLと同じくウェブページを構成するために必要なのが、CSS(Cascading Style Sheets:カスケーディングスタイルシート)。これは、ウェブページの中にある要素(文字、ボタン、画像など)の色、大きさ、配置などを制御する技術です。

ウェブページはHTMLだけでも作ることはできますが、それでは色などがない無機質なものになってしまいます。

そのため、HTMLでWebサイトの全体的な構成を決めた後で、CSSでデザインを仕上げることで、デザイン性があり、かつ読みやすい・見やすいウェブページを作ることができるのです。

HTMLやCSSについては、こちらの記事で詳しく解説しています。

【イラスト付き】HTML/CSSコーディングとは?プログラミングとの違いなど基礎知識を解説

必要な勉強時間の目安

HTML習得に必要な勉強時間は最終的な学習目標にもよりますが、2週間~1ヶ月程度学習すれば、HTMLとCSSを使って自分で簡単なWebサイト制作が可能になるでしょう。

また、HTMLはこれから紹介する無料サイトや本などを使って独学も可能ですが、実は奥深いもの。プログラミングには「良いコード」と「悪いコード」があり、ただ表示されれば良いというわけでもないのです。

独学ではどうしても自分が書いたコードのフィードバックが得られないため、実践スキルが身につきづらいというデメリットがあります。

IT業界への転職などを目的として学習をする場合には、講師のフィードバックやサポートが受けられるスクールなどでの学習もおすすめです。

無料カウンセリング!本日も予約受付中

テックキャンプは、未経験からのエンジニア・WEBデザイナー転職を実現するスクール。

プログラミングが難しくて挫折しそう」「効率的に学ぶ方法を知りたい」という方は、プログラミング学習の悩みを解決できる無料カウンセリングに参加してみませんか?満足度93%!

プログラミングを知り尽くしたプロのカウンセラーが、中立な立場であなたの悩み解決をサポートします。

ブログ読者特典でAmazonギフト券3000円分もプレゼント中!無理な勧誘は一切行いませんので、お気軽にどうぞ。※2018年10月24日〜11月16日(N=106)

初心者におすすめのHTML勉強法

プログラミングソフトで独学するコツHTMLはウェブページ開発の最も基本となる技術。


これからプログラミングやWeb制作について学んでいく人が手始めに学習するものの1つなので、無料・有料を問わず学習コンテンツが充実しています。

ここからは、初心者におすすめのHTML勉強法を紹介しましょう。

無料・有料サイトで学ぶ

まず1つのおすすめ勉強法が、オンラインの無料コンテンツを活用した学習です。

テーマごとに動画や解説ページが用意されており、1つ1つのコンテンツは5~15分と短時間で完了できるものがほとんど。そのため、休憩時間や仕事終わりなどのスキマ時間を使った学習も可能です。

Progate

画像出典:https://prog-8.com/

「Progate」は、わかりやすいイラストと解説で「初心者でもわかりやすい」と評判の無料学習サイト

難易度によってレベル分けされているため、自分のペースやレベルに合わせてステップアップさせていくことができます。

基礎知識を身に着けた後には、実際にプログラムを書く実践練習も行えるため、プログラミング学習にありがちな「わかったつもり」のまま学習が進む心配もないでしょう。

月額1,078円(税込み・2021年6月時点)のプラス会員になれば、応用と実践レベルを含めた公開中の全てのコンテンツにアクセスが可能。

ドットインストール

画像出典:https://dotinstall.com/

Progateと並んで知名度・人気が高い学習サイトが「ドットインストール」。

動画形式の講義なので、オンラインスクールにいるような感覚で学べるのが特徴。HTML・CSSだけでなく、JavaScriptやPHPなどのプログラミング言語の学習コンテンツも充実しているため、Web制作に関する総合的なスキルを身に着けていく予定の人におすすめ。

全てのコンテンツが3分以内で提供されているため、スキマ時間で学習したい人にピッタリです。

月額1,080円(税込み・2021年6月時点)のプレミアム会員になれば、中上級向けのプレミアムコンテンツへのアクセスや、ソースコードの比較・閲覧などが可能になります。

CODEPREP

画像出典:https://codeprep.jp/

「CODEPREP」ではブックと呼ばれるコンテンツを使い、実際に手を動かしてプログラムを書きながら、学習を進めていきます。

最初は穴埋め形式の問題で、プログラムの概要や全体的な動きを理解していきます。ヒントや解説もあるので、初心者でも安心。ブックは1冊10分で完了できるようになっているため、1日1ブックといったルールを決めて進めていくと良いでしょう。

無料の会員登録では、一部のブックでのみ学習が可能です。

1時間で作るホームページ

画像出典:http://www.shoshinsha.com/hp/index.html

とりあえず最短でお店や個人用のホームページを作りたい!という人におすすめなのが「1時間で作るホームページ」。

ホームページを作るためにはどうすればよいか、何が必要かなど、ホームページ作成に焦点をあててコンテンツが構成されています。

可愛らしいイラストと会話形式のコンテンツで、初心者でも楽しく学習が進められるはず。1つのコンテンツのボリュームが大きくないので、スキマ時間に少しずつ学習することも可能です。

動画はないもののHTMLとCSSの基本はしっかりと学べるので、他の学習ツールと合わせて活用するのも良いでしょう。

本で学ぶ

気軽に持ち歩けて、インターネットがない環境でも学習ができるのが、本の大きなメリット。メモを書き込んだり、読み返したいところに付箋をつけたり、自分なりにアレンジができるのも本ならではです。

今回は、おすすめ本を3冊紹介しましょう。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

タイトルの通り、この1冊でWeb制作に必要なスキルが全て身につくと評判の本書。

ブログ「Webクリエイターボックス」の管理人が、HTMLとCSSの基本を優しく、わかりやすく解説しています。基本知識も丁寧に解説されているので「これなんだったっけ?」となった時の辞書代わりにも重宝しそう。

スラスラわかるHTML&CSSのきほん 第2版

スラスラわかるHTML&CSSのきほん 第2版

累計4万部を突破した前作の改訂版。HTMLとは?の基礎から、作成したサイトを公開するところまでを学べます。第2版では、現在のWeb制作には欠かせないレスポンシブデザイン(スマホ・タブレット対応)についての解説が追加されています。

わかりやすい解説でスラスラ読み進めることができるので、まずは1回読み通した後に、学習の進捗に合わせて何度も読み返すのがおすすめ。

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTMLやCSSの基本だけでなく、実際のWeb制作に欠かせないレスポンシブデザインとレイアウト手法も学べる本書。

用語や技術を解説するただの参考書ではなく、現場で使える実践的なテクニックも多く紹介されているため、まるでスクールや会社でトレーニングを受けているような感覚で学習が進められます。

Web制作をしたい方だけでなく、Webデザイナーを目指す人におすすめ。

アプリで学ぶ

ちょっとしたスキマ時間も無駄にしたくない!という人は、スマホアプリを使った学習はいかがでしょうか。

気軽にささっと学習ができるので、オンライン講座や本と合わせて活用するのも良いでしょう。

ShareWis

画像出典:ShareWis – Google Play

90秒の無料動画で賢くなれる、社会人向けのオンライン学習プラットフォーム。「プログラミング/Web開発ツール」コースでは、次のようなコンテンツが用意されています。

・90秒で分かる超初心者のためのHTMLって何?
・90秒で分かるJavaScriptってどんなプログラミング言語?

有料のプロコースでは、さらに豊富なコンテンツにアクセス可能。プログラミング以外にも外国語やビジネススキルなども学べます。

Programming Hub

画像出典:Programming Hub – Google Play

HTML・CSS、Javascript、Javaなど様々な技術・言語の学習が1つでできる有能アプリ。

Googleの専門家との共同研究によって開発されたこのアプリでは、ゲーム感覚で楽しみながら知識・スキルを身につけることができます。

英語のみですが、解説がわかりやすく日本人のユーザーも多くいます。Apple、Androidの両方のアプリストアで高評価を獲得している人気アプリです。

勉強会に参加する

ある程度の基礎知識を身に着けたら、勉強会に参加してさらに深い知識を習得したり、他の学習者と情報交換したりするのもおすすめです。

IT技術は日々進化するため、勉強会などで最新の技術やトレンドをチェックすることも大切。同じ趣味を持った仲間に出会えるかもしれません。

勉強会やセミナーの開催は都市部が多いですが、最近ではオンラインでの開催も増えています。

例えばTECH PLAYというサイトでは、キーワードやエリアで絞ったセミナー検索ができます。無料で参加できるものもあるので、興味があるものがないか定期的にチェックすると良いでしょう。

HTML学習のポイント

HTML学習は無料で、1人で気軽に始められるところが魅力ですが、三日坊主や挫折してしまう人も多いのも事実。


最後に、HTML学習のポイントを3つ解説しましょう。

目標を持つ

まず、なぜHTMLを学習するのか、学習して何がしたいのか、といった目標を設定することが重要です。

本記事の冒頭で解説した通り、簡単なホームページ作成であれば1ヶ月程度の学習でできるようになるでしょう。

しかし、転職やフリーランスでWeb制作の仕事に就きたい、という場合には、JavaScriptなどWeb関連の他の技術や、実際の開発現場で通用する実践的な技術を身に着ける必要があります。

趣味で学ぶ程度であれば無料コンテンツでも十分ですが、実際の仕事となると有料コンテンツの購入やスクールの利用も選択肢の1つになります。

より効率的に学習を進めるためにも、最初に目標を明確に設定しておくようにしましょう。

自分にあう勉強法を選ぶ

学習スタイルは人それぞれです。スクールなどで他の生徒と切磋琢磨しながら学ぶスタイルが合っている人もいれば、1人で黙々と取り組むスタイルを好む人もいます。

学習コンテンツや本の評判・口コミはもちろん参考にするべきですが、そういった他人の声だけで判断するのではなく、気になったものは色々と試してみるのがおすすめ。

その中で、自分のレベルや学習スタイルにあった手段を選ぶと良いでしょう。

また、例えば家ではオンラインで学び、移動中などは本を読む、といったように複数の勉強法を組み合わせるのも効果的です。

実際に手を動かす

プログラミング学習で最も重要なのは、実際に手を動かすこと。頭では理解したつもりであっても、いざ自分でコードを書こうとしたらどうすればよいか分からないことも多いためです。

最初はサンプルコードを書き写すだけでも、プログラムの全体の流れや構造を学ぶことに繋がります。実際に手を動かして繰り返しコードを入力することで、タイピングの練習にもなるでしょう。

まとめ

HTMLとCSSを学ぶことで、普段何気なく見ているウェブページがどのように作られているのかを知ることができます。

充実した無料コンテンツで気軽に始められる学習ツールも多いので、気になるものがあればまずは試してみると良いでしょう。

↑目次へ戻る

プログラミング学習の悩みを解決する無料カウンセリング

こんな不安や疑問はありませんか?
・プログラミングは難しくて挫折しそう
・独学でちゃんとスキルが身につくのか不安
・効率的にプログラミングスキルを習得する方法を知りたい


カウンセリングでは、プログラミング学習を知り尽くしたプロのカウンセラーが、中立な立場であなたの悩み解決をサポートします。満足度93%※1、累計利用者数は40,000人以上!※2

ブログ読者特典としてAmazonギフト券3000円分もプレゼント中!無理な勧誘は一切致しませんので、気軽にご参加ください。【テックキャンプは給付金活用で受講料最大70%オフ※3
※1.2018年10月24日〜11月16日(N=106) 2.2016年9月1日から2020年12月31日の累計実績 3.テックキャンプ エンジニア転職は経済産業省の第四次産業革命スキル習得講座の認定も受けており、条件を満たすことで支払った受講料の最大70%(最大56万円)が給付金として支給されます

無料カウンセリングの詳細はこちら

何でも相談できる無料カウンセリング【テックキャンプは給付金活用で受講料最大70%オフ※1

こんな不安や疑問はありませんか?
・自分のキャリアでエンジニア転職できるか
・自分はエンジニアに向いているのか
・どうしたら効率良くプログラミングを習得できるか


カウンセリングでは、IT転職・プログラミング学習に特化したプロのカウンセラーが、中立な立場であなたの悩み解決をサポートします。満足度93%※2、累計利用者数は40,000人以上!※3

ブログ読者特典でAmazonギフト券3000円分もプレゼント中!無理な勧誘は一切致しませんので、気軽にご参加ください。
※1.テックキャンプ エンジニア転職は経済産業省の第四次産業革命スキル習得講座の認定も受けており、条件を満たすことで支払った受講料の最大70%が給付金として支給されます 2.2018年10月24日〜11月16日(N=106) 3.2016年9月1日から2020年12月31日の累計実績

無料カウンセリングの詳細はこちら

この記事を書いた人

石田ゆり
元システムエンジニア・コンサルタント。ERPパッケージソフトウェア会社にて設計から開発、品質保証、導入、保守までシステム開発の一通りの業務を経験し、その面白さと大変さを学ぶ。働く人々を支援するバックオフィス系システム・業務効率化ツール等に特に興味あり。趣味は旅行、ヨガ、読書など。

あなたの理想のキャリアに合わせた、テックキャンプの3つのサービス

Advertisement