スキル

HTML初心者向け!HTMLを勉強できるサイトを紹介します

この記事ではHTMLを勉強できるサイトをご紹介します。HTMLは比較的学びやすいプログラミング言語だとされていますが、独学で習得するのは難しい場合が多いです。どうやって勉強を始めればいいのか悩んでいる人は、この記事で紹介しているサイトをご覧になってください。

なお、詳細は後で書きますが、HTMLは正確にはプログラミング言語ではなく、マークアップ言語というカテゴリーに属しています。この記事では、こういった「そもそもHTMLって何?」といった基本的な事項についても解説していきます。

HTMLとは何か?CSSって?

HTMLを勉強できるサイトをご紹介する前に、HTMLとはどういった性質の言語なのかについて簡単にご説明します。HTMLを利用する際はCSSも欠かせないので、こちらも合わせてご説明します。

HTMLとは、どんな言語なのか

HTMLは、HyperText Markup Languageの略です。ハイパーテキストというのは、ハイパーリンクという仕組みによって、他の文書や画像などと関連付けすることができるテキストのことです。このハイパーテキストをマークアップする言語がHTMLです。

そして、マークアップには「印をつける」という意味があります。例えば、「この文章は、見出し」とか「この文章は、表」といったようにWebページの構造を指定する働きをします。このような役割を果たす言語がマークアップ言語です。

一方、プログラミング言語というのは、コンピュータに計算をさせる働きがある言語のことをいいます。したがって、役割が違うHTMLは、厳密にはプログラム言語には含まれません。

CSSとは、どんな言語なのか

HTMLが使えれば、とりあえずWebページを表示することはできます。ただ、このままでは、Webページは文字が並んだだけの見にくいものになってしまいます。そこで、文字のサイズを変えたり色をつけたりといった装飾を施して、見栄えのいいWebページにするのがCSSの役割です。CSSは、Cascading Style Sheetsを略したものです。

なお、CSSのような文章のスタイルを指定する言語のことをスタイルシート言語といいます。したがって、HTMLと同様に、厳密にはプログラミング言語ではありません。

Webページを作成するためには、まずはHTMLについて学ぶ必要がありますが、CSSを合わせて学ばなければ、見やすく実用的なページは作れません。

ところで、Webページという言葉が聞き慣れないという方もいらっしゃるかもしれませんが、Webサイトを構成する1つ1つのページのことをWebページといいます(Webサイトというのは、ホームページという言葉と大体同じ意味だと理解しておけば、とりあえずは大丈夫です)。

HTMLを勉強できるサイト

HTMLについて簡単にご説明したところで、この記事の本題であるHTMLの学習サイトをご紹介していきます。

以下でご紹介するサイトについては、基本的に無料で始められるものとなっています。ただし、「講座の何回分かは無料で、以降の回を聞きたい場合は有料会員になる必要がある」といったものも含まれています。

このようなサイトであっても少なくとも最初の数回は無料で聴けるので、まずは何回か聴いてみましょう。そして、その有用性や向き不向きを判断して、必要に応じて有料会員になるのがおすすめします。

基礎レベルの講座は無料で受けられる「Progate」

Progateには、無料会員とプラス会員とがあります。無料会員の場合、各コースの最初のレッスン+αの18レッスンが無料で受けられます。この記事のテーマであるHTMLに関する講座の場合、HTML&CSSコースの初級編が無料となります。

Progateの特徴としては、動画よりも直感的に学びやすいスライド学習を採用していること、学んだ内容を実践する講座が設けられていることが挙げられます。

HTML&CSSコースの場合、初級編・中級編・上級編の学習コースがあり、同じく3レベルに分かれた道場コースがあります。道場コースは、学習コースで学んだ内容を基に、実際にWebページを作成する講座です。

そして、これらに加えてCSSを使ったレイアウト方法の1つであるFlexboxの学習コースが設けられていて、HTML&CSSコースは全部で7つの講座があります。初級の学習コース以外の講座は有料のプラス会員になることで受講できます。プラス会員の料金は、月額980円です。

参考:Progate

3分動画で学べる「ドットインストール」

ドットインストールは、ちょっとした隙間時間でも学べる3分動画によるレッスンが特徴です。初級講座的なものは無料ですが、中上級講座に関しては有料会員になる必要があります。有料会員はプレミアム会員と呼称されていて、月額1,080円です。

プレミアム会員には、有料レッスンが受けられる他にも、講師への質問ができたり、ソースコードが閲覧できたり、素材ファイルのダウンロードができたりといった特典があります。

HTMLに関する講座としては、「ウェブサイトを作れるようになろう」があります。その講座中「学習環境を整えよう」の全5回と、「HTML/CSSの概要を理解しよう」に含まれる「はじめてのHTML」全14回および「はじめてのCSS」全15回は無料で受講できます。

これ以降の「もっと詳しくHTML/CSSを学んでみよう」、「ウェブサイトをゼロから制作してみよう」は有料レッスンとなっています。

参考:ドットインストール

初心者から学べるオンラインスクール「SKILLHUB」

SKILLHUBには無料で公開されている講座もありますが、基本はプロを目指す人のためのオンラインスクールです。「フリーランス・デビュー支援プラン」、「WEB起業サポート・プラン【じっくり5ヶ月間!】」、「WEB業界へ就・転職サクセス・プラン」といったプランがあり、これらはいずれも有料です。

担任性が取られていて、講座の最後に課題を提出し、添削された上で点数がつくといったように、単に講座を聴くだけのものではありません。その分、数十万円単位の費用がかかるので、本気で学びたい人向けです。

無料で聴ける講座には、「基礎から学びたい人のためのHTML入門【動画で学ぼう】」(3レッスン)や「基礎から学びたい人のためのCSS入門【動画で学ぼう】」(4レッスン)、「新HTML/CSS入門講座(基礎編)」(11レッスン)といったものがあります。これらを聴いてみてから、有料プランを検討するといいでしょう。

参考:SKILLHUB

基礎からステップバイステップで学ぶ「シラバス」

シラバスは、動画の講座が開設されているわけではなく、文字による解説を自分で読み進めていくスタイルのサイトです。

もっとも、「ほとんど知識がない人が、デザイン会社にWebデザイナーとして入社した」という設定の下に進められるため、基礎から順を追って解説されます。分かりにくさはありません。

HTMLやCSSだけでなく、IllustratorやWordPress、PhotoshopといったWebデザインをする上で必要となるアプリケーションなどの解説もなされていますので、Webページを作りたいという人には色々と参考になる内容となっています。

参考:シラバス

自分で書いて学ぶ実践型学習ができる「CODEPREP」

CODEPREPでは、ブックと呼ばれるテキストを読み進めることで学習を進めていきます。「自由編集モード」に切り替えれば、自分でコードを書き換えながら学習することができるので実践的です。

初めのうちは穴埋形式なので、初心者でも学びやすくなっています。また、HINTやTIPS(助言)もありますから、初心者でも行き詰まることがありません。

参考:CODEPREP

各種プログラミング言語が学べる「paizaラーニング」

paizaラーニングは、1本3分間の動画と練習問題でプログラミングを学んでいきます。C言語やJavaをはじめとする各種プログラミング言語の講座が充実していることが特徴です。

講座は、完全無料のものから一部無料のものまで様々です。講座全体を受講したい場合は、有料プランへの申し込みが必要になります。申し込みに際しては、1ヶ月、6ヶ月、12ヶ月のプランがあり、1ヶ月プランは1,078円ですが、6ヶ月プランにすると1ヶ月当たり748円、12ヶ月プランにすると1ヶ月当たり600円とお得な料金で受講できます。

HTML関係の講座では、「HTML/CSS入門編」の最初の講座「HTML/CSS入門編1 HTML/CSSを理解しよう」が完全無料で、以降の講座も一部無料で受講できます。

参考:paizaラーニング

パソコンがなくてもスマホでHTMLが学べるアプリ

次にパソコンなくてもスマホでHTMLが学べるアプリをご紹介します。電車の中などでHTMLの勉強がしたい人にはとても便利です。

「Progate」のスマホ版

先ほどPC版をご紹介したProgateですが、スマホ版もあります。PC版と同様にスライドを使った学習方法を採用していて、初心者でも学びやすいのが特徴です。

HTMLやCSS以外にも様々な講座があるので、自分の興味関心に応じてスキルアップしていくことができます。

参考:Google Play

参考:App Store

社会人向けの学習プラットフォーム「ShareWis」

ShareWis(シェアウィズ)は、社会人向けのオンライン学習プラットフォームです。HTMLなどのWeb開発ツールの講座以外にも、エクセルなどのPCスキルや英語など、ビジネススキルを総合的にアップさせるための様々な講座があります。

無料で学べるスナックコースのほか、有料のプロコースもあります。スナックコースの動画は90秒と短いものなので、ちょっとした空き時間にも勉強できます。

参考:Google Play

参考:App Store

基本的な学習が終わった人に便利なリファレンスサイト

実際の作業中に生じた疑問点を調べるために講座をもう一度聴きなおすのはかえって面倒な場合があります。

こんなときは、HTMLタグの情報などを整理して解説してくれているリファレンスサイトを調べた方が便利です。

定番サイトの1つ「HTMLクイックリファレンス」

HTMLクイックリファレンスは、HTMLタグが目的別、ABC順で整理されているので、調べたいタグが簡単に見つかります。ちょっと記憶が曖昧なときなどに使うととても便利なサイトです。

「HTMLの基本」や「CSSの基本」といった解説ページもあるので、これらを読むのも勉強になります。特に、「ウェブ制作チュートリアル」は、架空の企業サイトを作成するまでの流れを説明してくれているので、初心者におすすめです。

勉強が進んだ人には、スタイルシートリファレンスやJavaScriptリファレンスも便利です。

参考:HTMLクイックリファレンス

Webサイト作成に関する情報が満載「とほほのWWW入門」

管理人「杜甫々」さんが運営されている「とほほのWWW入門」も便利に使えるサイトです。シンプルな見た目なので、最初は若干取っ付きにくさを感じる方もいらっしゃるかもしれませんが、情報量が豊富で、調べ物をする際に大いに役立ちます。

「HTMLリファレンス」「CSSリファレンス」「逆引きリファレンス」なども便利ですが、Webサイト作成に関する用語が調べられる「用語集」も初心者には役に立つでしょう。

参考:とほほのWWW入門

カラーチャートも掲載されている「TAG index」

TAG indexもブックマークに登録しておくと便利なサイトです。「HTML5の基本」で基本知識の確認もできますし、「HTML5要素一覧」は一覧性の高い表にまとめてくれているので、知りたい情報に簡単にアクセスできます。

もう1つの特徴として、サブコンテンツとしてカラーチャートも掲載されています。配色パターンのサンプルも公開されているので、CSSで色を指定したいときに便利です。こういった特色のあるサイトも押さえておくと、何かと役に立ちます。

参考:TAG index

ブログを運営している人に特におすすめ「HTMLタグボード」

「ブログを運営する人を応援する総合コミュニティサイト」と銘打たれたサイトです。ブログの収益化などの記事も掲載されているので、特にブログを運営している人には参考になる内容が多くなっています。

リファレンスサイトとして使用する際には、メニューにある「HTMLタグ一覧」を参照してください。「項目別に選ぶ」、「タグ一覧から選ぶ」で調べたいタグを探せます。

参考:HTMLタグボード

目的をはっきりさせて、効果的にHTMLを学ぼう

この記事の最後に、HTMLを学ぶ際の目的・目標の大切さについてお話しておきます。

この記事の最初のところで、HTMLは比較的学びやすい言語と書いたのですが、それでも極めるとなると大変な労力がかかります。人によっては苦労の割に得るものの少ない、無駄な努力となってしまう可能性があります。

自分が何のためにHTMLを学ぶのかをはっきりさせて、効率的に勉強することを心がけましょう。

何のために学ぶのか再確認しておこう

Webページを作成できるようになるために「とりあえずHTMLを学ぶ」というのは、間違いではありませんが、無駄が多くなる可能性があります。まずは、何のために学ぶのか確認しておきましょう。

HTMLを学ぶ目的としては、「ブログなどを運営するために必要な技術を身につけたい」、「Web関係の制作を行う会社に就職をしたい」、「最終的に目指しているのはプログラマーだけども、その手はじめとしてHTMLをマスターしておきたい」といったものが考えられます。自分はどれに当たるのか、考えてみましょう。

必ずしも、上記のいずれかである必要はありませんが、「何となく学ぶ」のではなく「目的意識を持って学ぶ」ためにも、最終的な目標を設定しておいたほうが良いでしょう。

目標に合わせて勉強の配分を考える

目標が定まったら、それに合わせて勉強する内容や費やす時間を調整しましょう。やりたいことによって、マスターしなければならないHTMLのレベルは異なるからです。

まず、Webサイト制作を仕事にしたい人は、HTMLをある程度深く学ぶ必要があります。実際にWebページを作るためには、HTMLはCSSとセットで使うことになるので、CSSについても合わせて勉強していきましょう。到達レベルの目安は、他の人が作ったサイトを見て、それがHTMLではどう記述されているのかが分かり、再現できるようになる程度です。

これに対して、最終的にプログラマーになることが目標の人であれば、HTMLには深入りする必要はありません。将来的にプログラミング言語を勉強するための前段階に過ぎないのですから、基本的なHTMLタグが使える程度に習得できれば十分でしょう。

HTML以外にも学ぶべきことがある

これは最終的にプログラマーになりたい人に言えることですが、HTMLだけを学んでもプロとしてやっていくのは難しいです。プログラマーになるには、他にも学ぶべき言語があります。具体的には、JavaScriptやPHPを学んでおいた方が、就職や転職の際にも有利です。

一方、Web関係のデザインや広告制作といったものを行う会社に就職・転職したり、フリーランスとしてやっていきたいというのであれば、HTMLのスキルが十分に生かせるでしょう。ただ、この場合デザインの勉強が必要となるので、HTMLだけできればいいというものではありません。

繰り返しになりますが、目標をしっかり定めて、それに合わせた勉強をすることが大事になります。

HTMLを効率的に身につけよう!

HTMLを勉強することができるサイトの紹介を中心に、HTMLの学び方について解説してきました。HTMLは比較的学びやすい言語ですが、要領よく学ばないと無駄が多くなります。

この記事で紹介した内容を参考にして、効率的にHTMLの勉強を進めてください。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。