HTML入門者に！おすすめの学習サイト・本・アプリ全18選

公開日：2017/09/13　更新日：2019/09/18　

※本ページにはプロモーション(広告)が含まれています

HTML（ハイパー・テキスト・マークアップ・ランゲージ）とは、ウェブページを作成するために研究開発されたプログラミング言語です。パソコンやスマートフォンから普段から何気なく見ているインターネット上のウェブサイトの多くはこのHTMLで構築されています。

では、このHTMLとはどのようなものなのでしょうか。また、ウェブページを作りたい人はどのように学べばよいのでしょうか。

そこでこの記事では HTMLを解説し、それを学ぶために役立つおすすめのウェブサイトやアプリ、書籍をご紹介します。

普段何気なく見ているウェブサイトの裏側を知り、自分でもウェブページを作ってみましょう！

HTMLを理解する
- HTMLとは？
タグとは
- これだけは覚えておきたいタグ7選
- HTMLを始める理由
HTML初心者に！おすすめ学習サイト6選
おすすめHTML学習アプリ2選
- Trico-Hello world without PC
- ShareWis
HTML初心者が読むべき書籍10選
まとめ

HTMLを理解する

HTMLを勉強する前に、これがどのようなものかをきちんと理解しておきましょう。きちんと理解することで、勉強する必要があるか判断することができるはずです。

ここでは、そもそもHTMLとは何なのか、というところから解説していきます。

HTMLとは？

HTMLとは ウェブページを構築する際のプログラミング言語の一つ です。現在ウェブページを作成する際には「HTML」「CSS」「Java script」という3つのプログラミング言語が必要とされていますが、これらはそれぞれ違った役割を持ちます。

この中でもHTMLは、基礎となるテキストをウェブページに表示する際に使われるプログラミング言語です。つまり、ウェブページの見た目を作る際のテキストに特化したものとなります。普段何気なく見ているウェブページの文字は、ほとんどHTMLで作成されていると考えて頂いて良いでしょう。

タグを使うことでその文字の大きさや色を指定することができ、テキストに役割を与えることができます。

タグとは

よくホームページを作る場面では、「タグ」という言葉が聞かれます。このタグは正式には「htmlタグ」と呼ばれ、テキストに役割を与えることができます。

これだけは覚えておきたいタグ7選

ここでは、Webページを作るために最低限必要なタグをご紹介します。極端に言えば、これらを知っておくだけでもWebページをつくることは可能です。

pタグ

pタグは「ピータグ」と呼ばれます。これは、段落を指定するためのタグで、ｐは「パラグラフ」の略です。

と

で囲まれたテキストが1つの段落であることを示しています。htmlで「p」を打つと、改行されてスペースが表示されます。

h1～h6タグ

Webページに見出しを作る時に用いるタグには「h1」から「h6」までがあります。h1が一番大きな字の見出しで、数字が大きくなるほど小さな見出しになります。

imgタグ

imgはimage（イメージ）の略で、img src=などのように、html内に画像を挿入する時に使います。

aタグ

aタグは、anchor（アンカー）の略で、リンクの出発点および到達点を指定することができます。aタグは、a href=(URL)のようにWebページのURLを入れることで、ページの中に他ページへのリンクを挿入することが可能です。

このリンクにより、完成したWebページ上ではリンクが指のマークで表示され、そこをクリックするだけで、目的のページに飛ぶことができます。

ul/ol/liタグ

ul/ol/liタグはこれらを打つことで「箇条書き」（リスト）を作ることができます。

ulとliを組み合わせると「・」つき箇条書き、また、olとliを組み合わせることによって数字付きの箇条書きが表示されます。
なお、これらはulやolが大きな器、liはその中に入るコンテンツといったイメージで使用すると良いでしょう。

brタグ

brタグは、改行用のタグです。このタグを使うことによって、改行してページ内に大きくスペースを空けることができます。

コメントアウト

実はhtmlのソースに書いてあってもブラウザでは表示されない部分があります。例えば、「本文ここまで」などというコメントは便宜上ウェブページのhtmlの中には書き込みますが、ページには表示されないというものです。こういった、htmlソースの中にありながらブラウザには表示されない部分を「コメントアウト」と呼んでいます。

HTMLを始める理由

現在のインターネット社会において ウェブページを構築するスキルはとても重宝 されます。そのためHTMLを始める理由としては様々なものがありますが、学んでおいて損はないでしょう。WordやExcelといったOfficeソフトを活用するのと同じように、よりスタンダードなビジネススキルとなることが予想されます。

ウェブページを構築するための手段としては様々なものが挙げられますが、その中でもHTMLをおすすめするのは比較的簡単なプログラミング言語であるからです。今現在あるウェブページを構築するプログラミング言語の中でも入門用として扱われている言語なので、簡単に始められるのではないでしょうか。

HTML初心者に！おすすめ学習サイト6選

HTMLを学ぶ必要性を感じたらすぐに行動に移しましょう。HTMLは初心者でも無料で学ぶことができます。

そこで、ここでは HTML初心者向けのおすすめ学習サイトを5つご紹介します。

ドットインストール

こちらのウェブサイトは、基本的に動画でHTMLを含むプログラミング関連知識を学ぶことができるウェブサイトです。無料で勉強することもできますが、月額980円の利用料金を支払うことで、より深く勉強することができます。自宅で気軽に、かつ実践的にHTMLを学ぶ ことが出来ます。

また、学習を継続して行えるようにアシストしてくれる機能も備わっています。例えばHTMLであれば動画がカリキュラム形式になっており、これは動画を見終わったら完了ボタンを押し、次の講義動画に進むことができる仕組みです。さらに学習カレンダー機能もあり、計画的に、そして効率よく継続してHTMLを学ぶことができます。

ウェブサイトはこちら：

https://dotinstall.com/

Schoo

Schoo（スクー）もドットインストール同様、特にプログラミングを中心に講義動画を配信しているウェブサイトです。

こちらのウェブサイトでは、動画を生放送形式で配信しているのが大きな特徴で より学校の授業に近い環境 を整えてくれています。そのため、授業中に講師にリアルタイムで質問をすることができます。さらに、他ユーザーと一緒に学ぶことができるため、より学校の授業に近い感覚で学ぶことができます。

こちらも基本的に生放送への参加は無料となっています。また、HTML以外の授業にも無料で参加できるため、プログラミングについて興味の赴くままに学習を進めていくことが可能です。

ウェブサイトはこちら：

https://schoo.jp

CODEPREP

こちらのウェブサイトの大きな特徴は、無料で利用できることはもちろん、ブラウザ上でアプリの作成が可能になっている点です。この機能により、実践的にHTMLを学習することができます。

さらに、穴埋め形式の問題を自分のペースで解くことができるため、普段お仕事で忙しい方でも気軽にHTMLの学習を進めていくことができます。

またこちらのウェブサイトの特徴として、一つの単元の学習が完了すると、経験値が貯まる点が挙げられます。経験値がある一定数貯まると称号を得られるという仕組みにより、まるでゲームをしているかのように 気軽に楽しく学習を進める ことができます。そのため、楽しくHTMLの学習を進めたい方におすすめです。

ウェブサイトはこちら：

https://codeprep.jp/

ShareWis

こちらのウェブサイトは 学びと学びを繋げるといったモットー のもと、動画での学習を中心に授業を展開しているウェブサイトです。有料ではあるものもあるものの、マインドマップのように学習が可視化され、とてもわかりやすく、ゲーム感覚でHTMLの学習を進めていくことができます。

プログラミングの他にも、英語や会計など、社会人が学びたい分野の学習を進めていくことができるため、他分野も学びたいと思っている方におすすめのウェブサイトです。

ウェブサイトはこちら：

https://share-wis.com/

プログラミング入門サイトbituse

こちらのウェブサイトは、プログラミングにこれまで触れたこともないような方にも わかりやすい言葉と表現方法 を使い、HTMLの学習を進めていくことができるウェブサイトです。

プログラミングを学習していると専門用語について調べることが多くあるため、途中で挫折をしてしまう方が多いです。しかし、こちらのウェブサイトではそういった専門用語も少なく、初めてプログラミングに触れるという方にとってはおすすめのウェブサイトです。

ウェブサイトはこちら：

https://bituse.info/

全国統一HTML5実力テスト

なんとスマホから受験ができる全国統一HTML5実力テスト。6つのコースから１つを選び、受験します。

ソーシャルアカウントでログインすることで受験 できますが、制限時間は15分です。結果もすぐにわかり、成績表も一緒にもらえるため 手軽に自分の実力を知る ことができます。

しかしここで出題される問題は「下の図の中のリンクが半透明なPNG画像に覆われていて、押せない状態になっている。このリンクを押せるように、CSSを調整せよ」などという、かなり実践的なものです。下にある回答欄から正しいCSSをドラッグ＆ドロップすることで回答することができます。

回答が終わったら、下の「採点する」ボタンを押すことでその場で答え合わせをすることができ、総評を受け取ることができます。応用編はかなり実践的で、これがクリアできれば第一線で活躍できること間違い無しです。優秀な人には、企業からスカウトがくることもあるそうです。

ウェブサイトはこちら：

http://jsdo.it/zenkokutouitu-html5-test

HTML初心者が読むべき書籍10選

HTMLをじっくりと勉強し、学習内容を資料として手元に残しておきたいという方には、書籍での勉強をおすすめします。

そこで、ここでは HTML初心者が学ぶために読むべき書籍を10個ご紹介します。

HTML５の絵本

こちらの書籍は、その名の通り イラストが多く、視覚的に分かりやすくHTMLについて解説 してくれています。

そのため、通勤や通学の合間や休憩時間にも気軽に読み進めることができます。さらに、サンプルとなるコードも紹介されているため、それを真似ながら実際に手を動かして学ぶこともできる、おすすめの一冊です。

お買い求めはこちら：

https://www.amazon.co.jp/html5-no-ehon

これからはじめるHTML＆CSSの本

現在発売されているHTMLを学ぶための書籍として 最も初心者向けの一冊 と言っても過言ではありません。大抵のHTML関連書籍は、目次に専門用語が並んでいるため、思わずそっと棚に戻してしまいがちです。

しかし、プログラミングの初歩からわからないといった方でも 挫折せずに読み進めることができる一冊 です。

お買い求めはこちらから：

https://www.amazon.co.jp/korekarahajimeru-html&css-no-hon

一番よく分かるHTML５＆CSS３きちんと入門

こちらの書籍の特徴は 初心者にもわかりやすい図がたくさん掲載 されている点です。上記でご紹介した内容よりも一歩進んだ内容が掲載されていますが、分かりやすい図を用いた解説量の多さでスラスラと読み進めていくことができます。

HTMLについてより深く学ぶことができるため、初心者から中級者、上級者へと進んでいく際は手元に置いておきたい一冊です。

お買い求めはこちらから：

https://www.amazon.co.jp/ichibanyokuwakaru-html5&css-kichinto-nyuumon

わかばちゃんと学ぶWebサイト制作の基本

こちらの書籍は読みやすい マンガ形式でHTMLについて解説 してくれているため、見慣れないHTMLコードもスラスラと読み進めていくことができる一冊です。

HTMLに付随するCSSやJavaScriptについても学習できる ため、HTML以外にも ウェブ構築に必要な知識を得られる おすすめの書籍です。

お買い求めはこちら：

https://www.amazon.co.jp/wakabachan-to-manabu-website-seisaku-no-kihon

HTML５＆CSS３デザインブック~ステップバイステップ形式でマスターできる~

最後にご紹介するのは、あのAmazonでも人気の高い書籍です。もはやHTMLを学ぶための書籍としてはスタンダードと言っても過言ではありません。HTMLを学んでいく上で必ず学ぶことになるCSSについても解説されており ブログ風のウェブサイトの作り方や>企業向けのウェブサイトの作り方が詳しく解説 されています。

HTMLを学習する上でかなりスタンダードな書籍なので、最寄りの書店で見かけたらまず手にとってみることをおすすめします。

お買い求めはこちら：

https://www.amazon.co.jp/html5&css3-desginbook