プログラミング言語

HTMLの勉強法や学習するための注意点を解説!未経験者向けの学習ロードマップも紹介します!

htmlの勉強法

「HTMLってどうやって勉強すればいいの?」
「初心者向けの学習方法などあれば教えてください!」

このような悩みをお持ちではないでしょうか?

HTMLの学習を始めようと思っても、どのようにして学習を進めればいいか悩んでしまう方も多いと思います。

そこで今回は、下記の内容を解説していきます。

  • HTMLの基礎知識を紹介
  • HTMLの初心者向け学習ロードマップ
  • HTMLを学ぶ際の注意点

今回の記事では、Web系の開発会社を運営しつつもWeb系エンジニアへの転職を目指す人に向けてのプログラミングスクールを運営している弊社が、HTMLの効率的な学習方法について解説していきます。

この記事を最後まで読めば、プログラミングが初めての方でも、無理なく学べるHTMLの学習ロードマップや、挫折しないための注意点まで学べます。ぜひ最後まで読んでみてくださいね!

HTMLの基礎知識を紹介

HTMLはマークアップ言語

HTMLは「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略で、ウェブページを作成するために開発されたマークアップ言語です。

HTMLを書くことで、コンピューターに文章の構造を定義して指示することができます。

HTMLを使う場面
  • 見出しを作成するとき:<h2></h2>
  • 段落を作成するとき:<p></p>

上記のように、文章の中で大見出しを作りたいときは<h2>タグを使ったり、小見出しを作りたいときは<h3>タグを使ったりと、目印をつけていきます。

この目印をつける行為がマークアップと言われて、そのための言語であるためHTMLはマークアップ言語と言われています。

HTMLとCSSの関係性とは

HTMLと親和性の高い言語としてCSS「Cascading Style Sheets(カスケーディングスタイルシート)」があります。

これは簡潔に言うと、HTMLを装飾するために使う言語です。

CSSを使う場面
  • 文字の色を変えるとき
  • 文字の大きさを変えるとき
  • 画像の大きさを変えるとき

HTMLで記述した文字に装飾を付ける際に使う言語のため、デザイン性をあげることができます。

HTMLだけでも簡単なホームページは作れますが、CSSと組み合わせることでデザイン性が高くなり、より見やすく分かりやすいページを作ることが出来ます。

HTMLを習得するまでに必要な時間

HTMLとCSSを合わせた学習時間としては、おおよそ20〜30時間ほどです。

マークアップ言語はプログラミングを学ぶなかでも、文法がシンプルで覚えやすいものが多いからです。

プログラミング初心者でも、毎日4−5時間ほど学習すれば1週間で全体像は掴めるでしょう。のちほど具体的な勉強法もご紹介するので、サクッと学んでいきましょう。

HTMLでできること

HTMLでできることはさまざまです。

HTMLでできること
  • 簡単なホームページの作成
  • HTMLメールの作成
  • ブログパーツの編集

王道なもので言えば、ホームページの作成でしょう。HTMLファイルを作成してWebブラウザで開けば、自分が作ったサイトを簡単に表示することが出来ます。

一般的なテキストメールでもHTMLを使えば、画像や動画を入れて自分好みにカスタマイズしたメールを作成することが出来ます。

HTMLの初心者向け学習ロードマップ

1.Progateで全体像を学ぶ

HTMLを初めて学習する場合であれば、まずは全体像を掴むことが大事です。

学習する際には、無料で学べるProgateで学習することがおすすめです。

プロゲートは、プログラミングが始めての方でも学びやすいため、初学者に人気なプログラミング学習サイトの1つです。

またProgateではレベルに合わせた学習コースがあるので、始めたばかりの方でも安心です。

Progateのコース
  • スライド形式の授業を受けながら1単元ごとに手を動かす学習コース
  • 仕様書を参考にほぼヒントなしでサイトを作る道場コース

プログラミングを学習する際には、アウトプットを重視しながら手を動かすのが大事です。その点では、Progateはインプットとアウトプットのバランスが取れているサイトのため、初心者にはおすすめです。

まずはProgateのHTMLコースを2〜3週しながら、全体像をつかんでいきましょう。

2.参考サイトを写経する

Progateで全体像を学んだあとは、実践的な学習方法になります。

具体的には、HTMLとCSSで作成されたサイトの写経をしていきましょう。

プログラミングの写経とは、実際にあるサイトのサンプルコードをテキストエディタに打ち込みながら、どのように表示されるかを確認していく作業のことです。

プログラミング学習時に、写経をするメリットは以下の通りです。

写経をするメリット
  1. 基礎的なことが身に付く
  2. 自信やモチベーションにつながる
  3. 言語ごとの記法に慣れる

最初は難しいと感じるため、必要最低限の機能だけで作られたWebサイトのコードを書き写していきましょう。

Google Chromeのブラウザを使っている方であれば、F12を押すことでGoogleデベロッパーツールが出てきます。ディベロッパツールにはHTMLのコードの記述が載っているので、その通りに真似しながらHTMLを書いていきましょう。

小さなサイトでも、実際に手を動かしながらサイトがどう動くか確認できるため、実践的なアウトプットの練習になります。

3.簡単なサイトを作ってみる

全体像の理解と写経によってコーディングの感覚をつかんだら、自分で簡単なサイトを1から作ってみましょう。

簡単なサイトを作成する手順
  1. メモ帳などのテキストエディタを用意する
  2. HTMLを書く
  3. HTMLファイルを作成する(メモアプリの拡張子を.htmlに変更する)
  4. ブラウザで確認する

今まで簡単に出来ていたものも、ゼロから自分で作るとなると想像以上に難しいと感じるでしょう。しかし、その状態で調べながらWebサイトを作成することで実力が付きます。

HTMLの勉強におすすめの初心者向け書籍3選

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

HTMLとCSSの基礎が学べる入門書
パソコンとスマートフォンに対応したWebサイトが作れる
サイト公開まで徹底解説

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

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

HTMLとCSSが体系的に学べる
Webデザインの基本を学べる
レスポンシブデザインについて理解を深められる

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

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

HTMLとCSSの基礎を学べる
Web制作を視野に入れている人におすすめ
4つのWebサイトを実際に作成する実践的な内容

➡︎これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

HTMLの学習におすすめの無料サイト

Progate

Progateは、初心者でもとっつきやすいイラスト中心のスライドで学べるプログラミング学習サイトです。

現在ユーザーは260万人を超えていて、プログラミングに初めて触れる人でも楽しみながら学習できることがポイントです。

今ではブラウザ版に加えてスマートフォンなどのアプリ版もあるため、スキマ時間や移動時間などにサクッと学ぶことも可能です。

ドットインストール

ドットインストールは、たった3分で動画をマスターできるプログラミング学習サービスです。

474本のレッスンと7119本の動画を提供しているため、自分が学びたいプログラミングの分野に絞って、毎日コツコツと学習を進められます。

プレミアム会員になれば、レッスンでわからないところを先生に質問できたり、学べる講座の数を増やすことが出来ます。

より本格的に学習したい場合は、有料プランも検討してみるといいでしょう。

CODEPREP

CODEPREPは、プログラミングを自分で書きながら動かして学ぶ、実践型のプログラミン学習サービスです。

1日10分から学べて、穴埋め形式でプログラミング学習をしながら、直感的にプログラムの動きを理解することができます。

HTMLの場合であれば以下のような講座があります。

CODEPREPのHTML講座
  • HTML基礎や仕組みを学ぼう
  • 動画を全画面に使ったWebページ作成
  • HTMLとCSSで作成するアニメーションボタン
  • HTMLとCSSで作成するサイドメニュー

HTMLだけでも基礎的な仕組みから、Webページ作成まで幅広く学べることが出来ます。

Schoo

Schooは学校の授業を受けているような形で学習ができる双方向liveコミュニティーです。

受講生がその場で質問したことに対して、先生が授業内容を変えていくユニークなスタイルの授業のため、他のサイトとは一味違うサービス内容になっています。

先生からの問いかけに対して、ユーザが考えて答えることもあるため、思考力が身に付いたりとリアルな学習ができます。

19個ものカテゴリと7000本以上の授業をいつでも受講することが可能です。

HTMLを学ぶ際の注意点

学習する目的を明確にしておく

HTMLを学ぶことで将来的に何をやりたいのかなど目的を明確にしておくといいでしょう。

学習する目的の一例
  • 趣味で簡単なホームページを作成したい
  • Web制作の仕事を獲得して副業を始めたい

このように学習の目的を明確にしておけば、途中で挫折した時もモチベーションを保ち続けることが出来ます。

そのため、何のためにHTMLを学習して何を作りたいかなどを明確にしておきましょう。

自分に合う勉強方法を模索する

これまで書籍や学習サイトなどを紹介してきましたが、自分に合うような勉強方法は人それぞれです。

もちろんおすすめのサービスを選べば外れにくいですが、一番いいのは自分の肌に合う勉強法を選ぶことが大事です。

  • 独学が向いているのでプログラミング学習サイトを利用する
  • 人に教えてもらう方が学びやすいならプログラミングスクールに通う
  • 移動時間は書籍で学びたい

どのような勉強方法が向いているかは人それぞれです。自分に合うベストな方法を模索していきましょう。

基礎固めが終わったらコードをたくさん書く

プログラミング学習全てにおいて言えることですが、基礎固めなどのインプットが終わった後は、ひたすら手を動かしコードをたくさん書く意識を持ちましょう。

なぜなら、コードや文法を理解したと思っていても、実際は手を動かしてみると難しく、うまく書けないことが多いからです。

そのため、基礎固めは最小限にしつつ身体が覚えるほどたくさんコードを書くことが大事です。

アウトプットを重視してコーディングすれば、より理解度が上がっていきます。基礎固めが終わった後は、実際に手を動かしていきましょう。

サンプルコードを使って練習する

いきなりコードを書くことに対してハードルが高いと感じる方は、サンプルコードを使いながら練習していくこともおすすめです。

サンプルコードとは誰かによって書かれたコードのこと。サンプルコードを使って、自分の好きなようにコーディングしてみると、思わぬ発見があります。

サンプルコードを使って練習する具体例
  • CSSの装飾を変えてみる
  • 文字列を変えてみる

サンプルコードを手を動かしながら変更することで、コーディングの楽しさを感じつつ、実験感覚でアウトプット量を増やすことができます。

HTMLやCSSのコードサンプルは、検索すればたくさん出てきますので、ぜひ参考にしてみてください。

サンプルコードを使って練習するHTMLの独学で挫折した場合にやるべきこと

初心者でも学びやすいと言われるHTMLですが、初めてプログラミングを学習する際には挫折することもあります。その時にやるべきこととしては以下の2つになります。

独学で挫折したときにやるべきこと
  • メンターをつけて学習効率をあげる
  • プログラミングスクールなどに通う

共通点としては、人から教えてもらう環境に身を置くことです。プログラミングは初心者であればあるほど、自分の初歩的なミスに気づきづらく、考えているだけであっという間に時間が過ぎてしまいます。

効率的に学習を進めていきたいのであれば、いざと言うときにはプロのエンジニアの目線で解決してもらう手段も検討してみてください。一人では解決できない問題も、すぐに理解できれば気持ちを切り替えて学習を効率的に進めることが出来ます。

どうしても独学で挫折してしまった場合は、このような選択肢も考えてみてもいいでしょう。

おわりに

今回の記事ではHTMLの学習法について解説しました。

今回の記事のまとめ
  • HTMLとCSSは20〜30時間ほどで学べる
  • 基礎固めが終わった後は写経やサイト作成などアウトプットを中心にしよう
  • 挫折しないためには目標を明確にして誰かに頼る選択肢も持とう

HTMLは初心者にもおすすめの言語です。明確な目標を最初に決めておくことで、効率的に学習を進めることもできます。どうしても難しいと思った場合は、プログラミングスクールなどの手段も検討してみてくださいね。

HTML以外にもプログラミング全般で使える効率の良い勉強方法を解説しています。ぜひ以下の記事もチェックしてみてください。

効率の良いプログラミング勉強法 (1)
【初心者向けプログラミング勉強法】開発会社が教える効率的な学習方法とはプログラミングの勉強は受験勉強とは種類が少し違います。普通の座学の勉強と違って、体育のような実技に近いです。この違いを理解せずに勉強を始めると非効率な勉強を続けてしまいます。本記事ではプログラミング初心者の方に、最も効率の良いプログラミング勉強法を解説しています。...

弊社では、開発現場が求めるエンジニアになるためのプログラミングスクール「RUNTEQ」を運営しております。この記事を読んで少しでもWebエンジニアに興味を持った方は、ぜひ無料のキャリア相談会へ足を運んでくださいね。

この記事を読んだ方にオススメ