HTML/CSS

【入門者向け】HTMLを無料で学習できるサイトを紹介!(一部有料あり)

HTMLはWebページの構造を作る言語で、Web制作やWeb開発をする上で欠かせないスキルの1つです。HTMLは環境構築がテキストエディタとブラウザというPC買った状態でも簡単に始められるので、プログラミングを学びたいと思った人にもおすすめです。

HTMLは入門者でも挫折が少なく、独学で学べます。さらにWeb上では無料でHTMLを学べるコンテンツが多数あるため、かなり学習コストを押さえることが可能です。自分が続けることができるかわからない学習にコストをかけたくないという人でも安心です。

本記事ではHTMLを無料で学習できるWebサイトを紹介します。自分の学習スタイルや性格にあったコンテンツを探してみてください。

HTMLを無料で学べるサイト

シラバス

Web制作をするならば一度はやっておいた方がいいのが「シラバス」です。HTMLだけでなくWebページを作る全体像を学べます。言語だけでなく、ワイヤーフレームなどの考え方まで学べるコンテンツです。

細かいところは省略されていることが多いですが、入門者がWeb制作を目指すための大枠が、フロー形式で学べます。無料コンテンツとしてはかなり良質で、おすすめです。

シラバス

やさしいホームページ入門

HTMLの知識が全くない人であれば、「やさしいホームページ入門」がおすすめです。短い文章でHTMLとはどういうものかを解説しています。「何をしたいか」に対して、必要なタグとその解説をシンプルにしてくれます。

一方でHTMLの構造の話はまったくありません。hタグ(見出し)やdivタグといったHTMLの構造において重要なタグについての解説は一切ありません。入門者の人がブラウザ上でテキストや画像を表示させるにはどうしたらいいかということに特化したサイトです。

一通り勉強した後は他のコンテンツを学習することをおすすめします。

やさしいホームページ入門

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

HTMLのタグについて簡単に知っている人であれば「プログラミング入門サイトbituse」での学習もいいと思います。全体的な構造とHTMLのタグについて個別に解説しています。また、CSSと関連付けて説明もしているので、HTMLとCSS同時に学習できます。

細かい構造の説明が無かったり、HEAD部の解説では入門者には難しい内容が書かれています。一通り学習し、Webページを作りながら、慣れてきたころに読み返すと理解が深まるような内容なので、目を通しておくと後々の気づきが得られると思います。

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

SkillHub

SkillHubはプログラミングのオンラインスクールです。レベルの高い講座は有料ですが、入門レベルのHTMLであれば無料で受講することができます。動画の講義になるので、実際に動く様子を見ながら学習できるのがメリットです。

無料の範囲は基礎の基礎レベルになり、本格的なWebページを作ろうと思えば有料講座を受ける必要があります。しかし、最初に「HTMLってどんなもんだろうか」というのであれば無料講座で十分です。

無料講座を受けた後、学習方針を決めてもいいと思います。

SkillHub

YouTubeを活用する

YouTubeは言わずと知れた無料で利用できる動画サイトです。HTMLで検索を書ければYouTubeでも良質なHTMLの解説をした動画がたくさんあります。エンジニアの方が入門者に分かりやすく解説している動画もあります。

時間も1つ10分~20分程度を分けて解説しているものもあり、スキマ時間での学習も可能です。YouTubeは利用している方も多いと思うので学習を始めるのにハードルも低いと思います。

1つ欠点としては関連動画に普段見ている動画があるため、HTMLだけに集中しづらいという点です。そうならないように自分で時間を決めて、動画〇本分はHTMLを勉強するという目標を立ててから始めることをおすすめします。

一部無料でHTMLを学習できるサイト

Progate

Progateはプログラミングを勉強するためのオンライン学習サイトです。初心者がプログラミングを勉強するのに最も紹介されているサイトの1つです。スライド形式の分かりやすい解説と練習問題があるのが特徴です。ブラウザ上でコードを書いて動かすことができるので環境構築が不要なのも人気の1つです。

HTMLについては初級編のみが無料になっています。とはいえ、初級編でも簡単なWebサイトを1つ作り上げることができるので、Webページ制作の全体像を学習することができます。

無料のコンテンツだけでは不十分だと思えば、1080円/月で有料コンテンツを利用できます。また、内容は1月で十分に学習できる量です。質をとっても1080円払って学ぶ価値は十分だと思います。

Progate

Progateの解説記事は以下の通りです。

HTML/CSSの入門にはProgateがおすすめ!学習法も解説します

ドットインストール

ドットインストールは動画でプログラミングを学べるオンライン学習サイトです。動画は1本あたり2~3分程度でスキマ時間をつかって学習するにはおすすめです。HTMLの基礎講座である「はじめてのHTML」は無料で利用できます。

ドットインストールも月額1080円でもっと詳しい学習ができるコンテンツがあります。また、他のプログラミング言語については環境構築まで解説してくれているので、プログラミング全体の勉強をするにはおすすめです。

しかし、入門者には少し難しい専門的な部分もあるのでProgateで基礎固めをした後に発展として利用することをおすすめします。

ドットインストール

Udemy

Udemyはプログラミングに限らず、ビジネスで役に立つスキルを学習できるコンテンツです。コースごとに分かれており、コースの中の一部が無料で学習できます。HTMLについては、Web制作コースの一部として解説されていることが多いです。

コースの全てのコンテンツを利用するにはコースを購入する必要があります。普段は1万円を超えたりしますが、月に1~2回、最大90%のセールの日があります。その日を狙って購入すれば2000円くらいで良質なコンテンツを入手できます。

Udemy

まとめ

HTMLは入門者でも独学で習得しやすい言語です。しかし、しっかり理解しようと思えば、学習コンテンツが重要になります。HTMLの学習については無料でも良質な学習サイトが揃っています。始めは無料の学習サイトでHTMLの全体像を掴むことをおすすめします。

ある程度、HTMLの理解が進めば、Progateやドットインストールの有料コース、入門本を使って理解を深めていくことをおすすめします。無料サイトでは補填できない部分を有料サイトで学ぶことで、早く安くHTMLを習得することが可能です。