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

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

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初心者が読むべき書籍10選

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

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

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

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


知識ゼロからHTML&CSSを学ぶ入門書。Web界隈の最前線で活躍しているウェブクリエイターが監修。初心者でも理解しやすい一冊になっています。

本書は全7CHAPTERで構成されており、ウェブサイトの作りを理解する HTML&CSSの基本 やウェブサイトを公開するための 実践的な知識 を集中的に学習します。後半では 外部メディアの利用法 なども学ぶことができます。

HTMLコードやCSSデザインのサンプルも豊富なのも特徴。コードの知識はもちろん、CSSを使ったデザインも1冊で習得することができます。HTML&CSSの基本やウェブの最新技術を学びたい人におすすめの一冊です。

お買い求めはこちらから:
https://www.amazon.co.jp/dp/4797398892

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典

HTML5の要素とCSS3のプロパティに重点を置いた参考書。HTML5&CSS3の入門書としてはもちろん必要な情報を探しやすい 索引機能も充実 しています。既に基本を抑えている人が要素やプロパティを確認したいときにも活用することができます。

ウェブサイトの作成から公開するまでの流れも分かりやすく解説。またHTML5やCSS3のサンプルも豊富に用意されています。本書を手元に置いておけば、仕事現場でも安心して作業を進めることができます。

より実践で活用することのできる知識や情報が分かりやすくまとめられています。これからHTML5&CSS5を学ぶ人、仕事でHTML5&CSS3を使っている人におすすめの一冊となります。

お買い求めはこちらから:
https://www.amazon.co.jp/dp/4774198110

よくわかるHTML5+CSS3の教科書【第3版】

HTML5&CSS3の基礎力をつけることができる参考書。HTML5.2とCSS3をベースとした内容なので最新の情報がまとめられています。

本書の特徴はHTMLとCSSを同時進行で学習していく構成になっていることです。HTMLの基本を一通り学習してからCSSに移行する入門書が多い中で、あえて独特な構成をとっています。HTMLとCSSを同時に学習することで 楽しみながら学べる を実現しています。

全12章で構成されています。HTMLとCSSの基本スマートフォン表示の対応 について紹介されている章も。最後の12章では これまでに学んできたことを活用して一つのページを制作 します。

お買い求めはこちらから:
https://www.amazon.co.jp/dp/4839965471

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTMLの基礎とCSSを使ったウェブデザインを学べる参考書。多くのウェブサイトが採用している 4つのレイアウト手法を集中的に学ぶ ことで 実践で使えるウェブデザイン力を習得 することができます。

ブラウザを閲覧する端末によって表示を変える レスポンシブ対応の方法 も分かりやすく解説。デザインに関する知識を、サンプルサイトを使って楽しみがら習得することができます。

デザインを重点においた参考書となっていますが、HTMLとCSSの基礎もしっかりとまとめられています。HTMLはCHAPTER3、CSSはCAHPTER4で基本を学ぶことができます。入門書としても評価の高い一冊です。

お買い求めはこちらから:
https://www.amazon.co.jp/dp/4774190640

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

HTML&CSSの基礎からウェブサイトの制作・公開・管理方法を学べる参考書。ウェブサイトを公開するまでに必要となる知識を順を追って分かりやすくまとめられています。

全15レッスンで構成されており、HTMLパートではコーディングの基本やテーブル、フォームのような 基本的なHTMLタグ について。CSSパートでは 文字の装飾からレイアウト手法まで 幅広く丁寧に解説します。

実践で使えるスキルを身につけることができる一冊です。個人でウェブサイトを運営したい方はもちろん、HTML&CSSを活かした仕事に就きたいという人にとっておすすめの入門書です。

お買い求めはこちらから:
https://www.amazon.co.jp/dp/4297103028

まとめ

b7a479f5a8434d1ad851c91e0e2b1ca8_s

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

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

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

スポンサーリンク

スポンサーリンク

Check Also

大人気!国内で注目したいプログラミング教室3選

2020年には小学校でもプログ …

Facebookでのご購読が便利です