「HTMLってどうやって勉強すればいいの？」
「初心者向けの学習方法などあれば教えてください！」
このような悩みをお持ちではないでしょうか？
HTMLの学習を始めようと思っても、どのようにして学習を進めればいいか悩んでしまう方も多いと思います。
そこで今回は、下記の内容を解説していきます。
- HTMLの基礎知識を紹介
- HTMLの初心者向け学習ロードマップ
- HTMLを学ぶ際の注意点
今回の記事では、Web系の開発会社を運営しつつもWeb系エンジニアへの転職を目指す人に向けてのプログラミングスクールを運営している弊社が、HTMLの効率的な学習方法について解説していきます。
この記事を最後まで読めば、プログラミングが初めての方でも、無理なく学べるHTMLの学習ロードマップや、挫折しないための注意点まで学べます。ぜひ最後まで読んでみてくださいね！
HTMLの基礎知識を紹介
HTMLはマークアップ言語
HTMLは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、ウェブページを作成するために開発されたマークアップ言語です。
HTMLを書くことで、コンピューターに文章の構造を定義して指示することができます。
- 見出しを作成するとき：<h2></h2>
- 段落を作成するとき：<p></p>
上記のように、文章の中で大見出しを作りたいときは<h2>タグを使ったり、小見出しを作りたいときは<h3>タグを使ったりと、目印をつけていきます。
この目印をつける行為がマークアップと言われて、そのための言語であるためHTMLはマークアップ言語と言われています。
HTMLとCSSの関係性とは
HTMLと親和性の高い言語としてCSS「Cascading Style Sheets（カスケーディングスタイルシート）」があります。
これは簡潔に言うと、HTMLを装飾するために使う言語です。
- 文字の色を変えるとき
- 文字の大きさを変えるとき
- 画像の大きさを変えるとき
HTMLで記述した文字に装飾を付ける際に使う言語のため、デザイン性をあげることができます。
HTMLだけでも簡単なホームページは作れますが、CSSと組み合わせることでデザイン性が高くなり、より見やすく分かりやすいページを作ることが出来ます。
HTMLを習得するまでに必要な時間
HTMLとCSSを合わせた学習時間としては、おおよそ20〜30時間ほどです。
マークアップ言語はプログラミングを学ぶなかでも、文法がシンプルで覚えやすいものが多いからです。
プログラミング初心者でも、毎日4−5時間ほど学習すれば1週間で全体像は掴めるでしょう。のちほど具体的な勉強法もご紹介するので、サクッと学んでいきましょう。
HTMLでできること
HTMLでできることはさまざまです。
- 簡単なホームページの作成
- HTMLメールの作成
- ブログパーツの編集
王道なもので言えば、ホームページの作成でしょう。HTMLファイルを作成してWebブラウザで開けば、自分が作ったサイトを簡単に表示することが出来ます。
一般的なテキストメールでもHTMLを使えば、画像や動画を入れて自分好みにカスタマイズしたメールを作成することが出来ます。
HTMLの初心者向け学習ロードマップ
1.Progateで全体像を学ぶ
HTMLを初めて学習する場合であれば、まずは全体像を掴むことが大事です。
学習する際には、無料で学べるProgateで学習することがおすすめです。
プロゲートは、プログラミングが始めての方でも学びやすいため、初学者に人気なプログラミング学習サイトの1つです。
またProgateではレベルに合わせた学習コースがあるので、始めたばかりの方でも安心です。
- スライド形式の授業を受けながら1単元ごとに手を動かす学習コース
- 仕様書を参考にほぼヒントなしでサイトを作る道場コース
プログラミングを学習する際には、アウトプットを重視しながら手を動かすのが大事です。その点では、Progateはインプットとアウトプットのバランスが取れているサイトのため、初心者にはおすすめです。
まずはProgateのHTMLコースを2〜3週しながら、全体像をつかんでいきましょう。
2.参考サイトを写経する
Progateで全体像を学んだあとは、実践的な学習方法になります。
具体的には、HTMLとCSSで作成されたサイトの写経をしていきましょう。
プログラミングの写経とは、実際にあるサイトのサンプルコードをテキストエディタに打ち込みながら、どのように表示されるかを確認していく作業のことです。
プログラミング学習時に、写経をするメリットは以下の通りです。
- 基礎的なことが身に付く
- 自信やモチベーションにつながる
- 言語ごとの記法に慣れる
最初は難しいと感じるため、必要最低限の機能だけで作られたWebサイトのコードを書き写していきましょう。
Google Chromeのブラウザを使っている方であれば、F12を押すことでGoogleデベロッパーツールが出てきます。ディベロッパツールにはHTMLのコードの記述が載っているので、その通りに真似しながらHTMLを書いていきましょう。
小さなサイトでも、実際に手を動かしながらサイトがどう動くか確認できるため、実践的なアウトプットの練習になります。
3.簡単なサイトを作ってみる
全体像の理解と写経によってコーディングの感覚をつかんだら、自分で簡単なサイトを1から作ってみましょう。
- メモ帳などのテキストエディタを用意する
- HTMLを書く
- HTMLファイルを作成する（メモアプリの拡張子を.htmlに変更する）
- ブラウザで確認する
今まで簡単に出来ていたものも、ゼロから自分で作るとなると想像以上に難しいと感じるでしょう。しかし、その状態で調べながらWebサイトを作成することで実力が付きます。
HTMLの勉強におすすめの初心者向け書籍3選
スラスラわかるHTML&CSSのきほん 第2版
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 [第2版]
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
HTMLの学習におすすめの無料サイト
Progate
Progateは、初心者でもとっつきやすいイラスト中心のスライドで学べるプログラミング学習サイトです。
現在ユーザーは260万人を超えていて、プログラミングに初めて触れる人でも楽しみながら学習できることがポイントです。
今ではブラウザ版に加えてスマートフォンなどのアプリ版もあるため、スキマ時間や移動時間などにサクッと学ぶことも可能です。
ドットインストール
ドットインストールは、たった3分で動画をマスターできるプログラミング学習サービスです。
474本のレッスンと7119本の動画を提供しているため、自分が学びたいプログラミングの分野に絞って、毎日コツコツと学習を進められます。
プレミアム会員になれば、レッスンでわからないところを先生に質問できたり、学べる講座の数を増やすことが出来ます。
より本格的に学習したい場合は、有料プランも検討してみるといいでしょう。
CODEPREP
CODEPREPは、プログラミングを自分で書きながら動かして学ぶ、実践型のプログラミン学習サービスです。
1日10分から学べて、穴埋め形式でプログラミング学習をしながら、直感的にプログラムの動きを理解することができます。
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以外にもプログラミング全般で使える効率の良い勉強方法を解説しています。ぜひ以下の記事もチェックしてみてください。
弊社では、開発現場が求めるエンジニアになるためのプログラミングスクール「RUNTEQ」を運営しております。この記事を読んで少しでもWebエンジニアに興味を持った方は、ぜひ無料のキャリア相談会へ足を運んでくださいね。
