プログラミング

【初心者必見】無料でHTMLを学習する方法

HTMLの学習法が知りたいと思っている方
プログラミングを始めた初心者の方。

「まずはHTMLから学習しよう」と思ったけど、具体的にどうすればいいのかわからない
できるなら手始めとしては、お金をかけずに無料でできるサイトで学習したい。

この記事を書いている私は、
・今回ご紹介する学習法によりたった約2週間でHTMLを理解した
・有料サイトではなく、すべて無料サイトで学習した
ので、HTMLの学習をこれから始めたい方々の参考になると思います。

本記事では、こちらの内容で解説しています。

無料でHTMLを学習する方法

HTMLを無料で学べる良い学習方法、あります!!

しかし、今回ご紹介するサイトを単に眺めるだけではHTMLのコーディング力は身に付きません。

学習サイトと合わせて、私のご紹介する方法で学ぶことで実際のコーディング力も身につけてください!

 

そもそもHTMLとは

HTMLとは、HyperText Markup Languageの略です。

ハイパーテキスト
 文書同士をリンクのように関連付けて、結びつける仕組みのこと
マークアップ
 文書内のどこに何が書かれているのか、文書構造を表すための印をつけること

HTMLとは、その名の通り、文書同士を関連付け、文書内で何がどこに書かれているか構造を記すための言語なのです。

つまり、HTMLを使うことで、写真や見出し、説明文など、何がどこにあるのかを示すことができます。
また、サイト内のリンクをクリックすると、こちらのサイトにつながるよといった、文書同士を結び付けることができます。

難しそうな説明をしましたが、HTMLがどんなものなのかについては、そこまで深く理解しておく必要はないです。
それよりも、次に説明する学習ステップに沿ってしっかりと学んでいくことが何より大事になります!

では、早速、学習ステップについて、解説していきます。

 

HTMLの学習3ステップ

HTMLの学習法としては、動画サイトでの3ステップ学習をお勧めします。

百聞は一見に如かずです。

動画は本などの文字情報としてインプットするよりも、実際のコーディングを見ながら学習することができるのでオススメです。

今回、HTMLの学習法としてオススメする動画サイトは、TechAcademyさんの

という、上記の動画になります。全部で24動画です!
こちらの動画を見れば十分に学ぶことができます!

しかし、冒頭でも説明したように、動画を眺めるだけではHTMLのコーディング力は身に付きません!

より効果的に身につけるために、こちらの動画を使ったゆうちゃん独自の学習の3ステップを合わせてご紹介します!

 

ステップ①:タグの使い方を理解する

動画の構成はすべて、

  1. 概要の説明
  2. 実際のコーディングの実例

という構成になっています。
まずは、各動画の前半パートである概要部分を見て、用語やタグについて理解しましょう!

 

初心者向けの解説で安心

いきなりコーディングの実例を見てしまうと、「難しい」と感じて諦めてしまいたくなるかもしれません。

しかし、動画前半の概要部分で、用語やタブの意味や役割を自分に一度落とし込んでからコーディングすれば、理解しやすいです。

解説自体も、これからHTMLを始めようという人向けに丁寧にされているので、とてもわかりやすくなっています。

また、概要を理解しておくと、自分の力でコーディングを始めたときにタブの意味や役割などを踏まえて、コーディングすることができます。

講義っぽくて堅苦しいと感じるかもしれませんが、5分程度の解説です。
サイトを作っていくときに役立つ知識にもなりますよ!

 

ステップ②:コーディングの実例をCheck

続いて、各動画の後半部分に当たる、コーディングの実例をチェックしましょう。

概要だけでは、どのように使うものなのか理解するのは難しいです。
コーディングの実例もチェックして、使い方を理解しましょう!

 

動画サイトで学習することのメリット

プログラミング学習には、ノウハウ本や学習教材など、書籍での学習法もあります。

しかし、動画サイトで学習することで、「実際にどんなふうにコーディングするのか」動きを伴って理解できます
解説本なども後々使うようになるかもしれませんが、はじめのうちは動画での学習をオススメします!

無料ですので、基礎部分は動画サイトで学んでしまいましょう!

 

ステップ③:コーディングの実践

動画を1本見終わったら、

次の動画に行く前に、一度手を止め、実際にコーディングするという実践をしましょう!

 

実践のメリット①【「わかった」が「できた」になる】

実践してみるとわかりますが、動画で見たときは簡単そうでわかった気になっていても、実際にコーディングしてみるとうまくいかず苦戦します

動画を見て、「わかった」と喜ぶことで満足せず、
動画の内容を実際に手元でやってみて、「できた」にしていきましょう!

自分のコーディングがウェブ上で表示されるまでできるようにしておくと、自分の能力としてのプログラミング力が身についたことになりますよ。

 

実践のメリット②【効率的に上達していける】

動画の通りやってみても、うまく表示されなかったり、そもそもどのようにコーディングすればよいのかわからないなんてことも出てきます。
実際に手を動かしてみると、行き詰ってわかっていないところも明らかになるのです。

でもこれは良いこと!
わかっているところばかり何往復しても上達しません。

行き詰ったところが、今自分が理解できていないところなので、
わからないところを解決するために時間を割きましょう!

そうすることで、効率的に上達していくことができますよ。

 

動画を見ると同時にすべきこと

HTMLの学習ノートを作る

動画を1本見終わるごとに、ノートを取りましょう!

なぜなら、動画を1回見ただけでは完全に理解することはできないからです。
悩んだときや行き詰ったとき、振り返る用のノートを残しておきましょう。

ノートは紙ではなく、デジタル版で!

ノートの取り方を後ほど、具体的に解説しますが、ノートは紙ではなくデジタル形式で取ることをおすすめします!具体的には、WordとかGoogle Docとかですね。

なぜなら、2つのメリットがあるからです

 

メリット①:画面キャプチャが保存できる

インプットするときに、より記憶に残すためには、読みor聞きすること+手元を動かして書き留めることで長期記憶につながりやすくなります。

「じゃあ、紙でもいいんじゃないの?」

という声が聞こえそうですが、HTMLの学習においては、入力したコードやそのコードで画面上でどう表現されるのかキャプチャを取って残しておく方がより便利です。

動画を一度見ただけで、完全に理解することはできません。必ず、どう入力していいのかわからない場面や行き詰るといった場面に出くわします。

そのときに、振り返るためにキャプチャ写真を合わせた自分だけの教科書を作っておく!
それがこのノートの役割です!!

 

メリット②:検索できる

画面キャプチャが残せることに加えて、デジタル版のノートであれば、検索することもできます。

例えば、

「このタブってどうやって使うんだっけ?」

って悩んだとき、Wordであれば、右上の検索機能を利用して

 

使い方や自分で記録した解説を確認することができます。

 

先ほども言ったように、学習を進めていくと、必ずどう入力していいのかわからない場面や行き詰るといった場面に出くわします。時には、本当にしょーもないことで何時間も悩んだりします。(結局、解決するときには凡ミスだったり、すごく細かなミスなんですが…。)

そのとき、検索してすぐに探せるというメリットは、効率的に学習を進める手助けになります!活用していきましょう!

続いて、実際にどんなふうにノートを取るのか解説していきます!

HTMLの学習ノート:取り方のポイントは3つ

ノートは下記の3点で取ります。

  1. 概要
  2. コードと画面表示のキャプチャ
  3. 自分の気づきやポイント

1つずつ、詳しく説明していきます!

 

①概要

この「概要」というのは、動画の前半部分で5分程度である解説のこと
解説してくれている人が、実際にパソコン上で概要を板書(実際には、テキストをタイピング)しながら話してくれます。その内容を概要として書き留めておけばOK!

自分で理解した概要を書き留めてもいいですが、時間が経って振り返ったときにきちんとした概要説明があった方が、ノートとして機能すると思います。
概要部分は、動画を聞きながら、または、コーディングの説明に入る前に一時停止をして書き留めるようにしましょう。

 

②コードと画面表示のキャプチャ

コードのキャプチャとは、こちら↓

画面表示のキャプチャとは、こちら↓

こんな感じのやつです。

概要だけでは、振り返ったときにわかりにくいですが、写真や図版があればよりわかりやすくなります。

キャプチャを取るときには

Snipping Tool

が使えます。

※Snipping ToolはWindowsをお使いの方ならはじめから搭載されているソフトです!

 

Snipping Toolの使い方

  1. 新規作成を押す

  2. 切り取りたい範囲をドラッグで選択するだけです。
    そのまま画像を貼り付けておけばOK。

 

強調や注目させたい部分にはマーカや書き込みを!

Snipping Toolでは、切り取った画像にマーカや書き込みをすることができます。
下の画像↓でいうと、青い丸囲みの部分ですね。

これをつけておくことで、ノートを振り返ったときに、どこに注目して見直せばいいかわかりやすいです。

そのときに取り扱っているタグの部分や、この表示がこう変わるみたいに注目したいところにマークをつけておきましょう!

 

③自分の気づきやポイント

最後に1番大事なところ!実際にコーディングしてみて自身の気づきなどを書き留めておきましょう。

実践してみると、初めて理解できることや発見することがあります。
ぜひ、そのときの気づきや自分の中でのポイントをノートに残しておいてください。
後日、同じタブでつまづいたり、ノートを見返したりする際に記憶がよみがえって深い学びにつながります!

私のノートを例にすると、「↑placeholderとは、テキストを打ち込むところに文字を表示させる」という部分がそのときの気づきですね。

また、動画学習が終わって模写を始めたりするときにもつまずきは出てきます。
行き詰ったときやわからなくて悩んだ部分については、その都度書き込みを更新することで自分だけのHTMLの教科書ができますよ。

ノートを取ることに勢力を注ぐことはないですが、振り返るための教材のようなものになるので、必要な範囲で取っておきましょう。

 

まとめ

本記事のまとめ
  1. まずは、動画サイトで学習しましょう!
    概要実例を見る実践の3ステップで!
  1. 自分だけのノートを取りましょう!

皆さんのHTML学習に少しでも力になれば幸いです。

最後までお読みいただきありがとうございました。