Home / ネットワーク・IT / IT基礎知識 / HTML / HTML入門者に!おすすめの学習サイト・本・アプリ全13選

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

Pocket

cat9v9a9145_tp_v-1

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

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

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

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

スポンサーリンク

HTMLを理解する

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

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

HTMLとは?

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

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

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

タグとは

webdesign2-849825_640

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

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

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

pタグ

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タグ

f243d40bf9ed05d3e93a556b51ab0e92_s

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

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

brタグ

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

コメントアウト

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

HTMLを始める理由

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

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

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

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

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

ドットインストール

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

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

ウェブサイトはこちら:

https://dotinstall.com/

Schoo

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

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

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

ウェブサイトはこちら:

https://schoo.jp

CODEPREP

1b5fcfbdd7f17aa436565c1a14d508c4_s

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

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

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

ウェブサイトはこちら:

https://codeprep.jp/

ShareWis

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

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

ウェブサイトはこちら:

https://share-wis.com/

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

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

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

ウェブサイトはこちら:

https://bituse.info/

全国統一HTML5実力テスト

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

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

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

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

ウェブサイトはこちら:

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

おすすめHTML学習アプリ2選

iPhone_black

ウェブサイトの他に、近年ではHTMLの学習をするためのアプリが出ています。ここでは、その中でもおすすめのアプリを3つご紹介します。

Trico-Hello world without PC

Tricoとは、iPhoneとiOS7上で最適化された、Webプログラミング環境のことです。初心者からすでにプログラマーの人まで使うことができる、iPhoneでプログラミングが楽しめるアプリです。基本的に無料のアプリですが、プロジェクト数上限解除と広告削除の機能がアプリ内課金対象となっています。

インストールはこちら:

https://itunes.apple.com/jp/app/trico-hello-world-without-pc

ShareWis

オンラインで学習できるShareWis(シェアウィズ)。これは上記でご紹介したウェブサイトShareWisのアプリ版です。無料90秒動画の「スナックコース」と有料のプロコースの2種類があります。

有料コースのプログラミングコースにはいろいろな種類があり、C#実践コース(14,800円)や1週間で作るWordPressコース(7,800円)、未経験からWebプログラマーになるすべて(19,800円)、といった全般的にプログラミング言語が学べるコースもあります。

なんといっても、じっくりPCの前に張り付いてやる勉強ではなく、スキマ時間にサクッとスマホで学習できるのが魅力的な点です。

インストールはこちら:

https://play.google.com/store/apps/details/sharewis

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

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

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

HTML5の絵本

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

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

お買い求めはこちら:

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

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

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

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

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

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

一番よく分かるHTML5&CSS3きちんと入門

66a8f45131e65ad85853ede7795f8fe7_s

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

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

HTML5&CSS3デザインブック~ステップバイステップ形式でマスターできる~

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

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

お買い求めはこちら:

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

まとめ

b7a479f5a8434d1ad851c91e0e2b1ca8_s

現在では多くの企業がウェブページを運営しており、外注せずとも自社で行える人材の需要が増えています。そのため、HTMLの知識とスキルはこれからの時代のスタンダードなビジネススキルとなることが予想されます。

HTMLを学習できるサイトやアプリ、書籍はたくさんありますが、その中でもおすすめのものを厳選してご紹介しました。

HTMLを学んで、これからの時代に必要とされる人材になりましょう!

スポンサーリンク

スポンサーリンク

Check Also

pc

初心者にも使いやすくなった!HTML5と従来バージョンの違い5つ

インターネットを使っていると、 …

Facebookでのご購読が便利です