HTML学習におすすめのオンラインサイト１０選

HTMLとCSS学習初心者におすすめのオンライン学習サイトをご紹介します。全てのサイトが無料（一部有料）で学習する事が可能です。テキスト学習に加えて動画で学習できるサイトや英語で学習するサイト及びリファレンスサイトの計１０サイトをまとめました。

関連記事：初心者のためのHTML入門
関連記事：HTML入門：WEBデザインに役立つツール

目次

1. 日本語のHTML・CSS学習サイト

「HTML」や「CSS」を初めて学習する人向けの無料（一部有料）の学習サイトをご紹介します。

1.1. Progate - オンラインプログラミング学習サービス -

【Progate公式サイト】https://prog-8.com/

【HTML・CSSの学習ページ】 https://prog-8.com/languages/html
【学べる言語・技術】「HTML&CSS」、「JavaScript」、「jQuery」、「Ruby」、「Ruby on Rails5」、「PHP」、「Java」、「Phyton」、「Swift」、「Command Line」、「Git」、「SQL」、「Sass」
【料金プラン】無料会員・有料会員：980円/月

メールでアカウント登録後に学習を開始します。FacebookやTwitterのアカウントでログインする事も可能です。無料会員は「HTML」や「Ruby」の基礎１５レッスンを学習する事ができます。

HTMLやCSSの基礎の解説を確認しながら、実際にブラウザー上でコーディングを進めていきます。記述したコードはプレビューウィンドウでリアルタイムに表示されますので初めての方にも非常に分かりやすいサイト構成です。

▲ページトップへ戻る

1.2. ドットインストール -3分動画でマスターする初心者向けプログラミング学習サイト-

【ドットインストール公式サイト】https://dotinstall.com/

【HTML・CSSの学習ページ】 https://dotinstall.com/lessons/basic_html_v3
【学べる言語・技術】「HTML&CSS」、「JavaScript」、「jQuery」、「Ruby」、「Ruby on Rails5」、「PHP」、「Java」、「C言語」、「C#」、「Androidアプリ開発」、「iPhone開発」、「SQL」など
【料金プラン】無料・中上級者向けプレミアム会員：980円/月

アカウント登録なしで利用できます。 HTMLとCSSの学習を動画で学習するウェブサイトです。無料会員用の動画は、１レッスン２，３分ほどの動画を見ながら基本の学習を進めます。プレミアム会員になると、中上級者向けの学習に加え、動画の速度変更やボイス変更などをする事が可能です。

▲ページトップへ戻る

1.3. Schoo - 学べる生放送コミュニケーションサービス -

【Schoo公式サイト】https://schoo.jp

【学べる言語・技術】「HTML入門」、「CSS入門」、「PHP入門」、「Python入門」、「Swift入門」、「jQuery入門」、「Photoshop入門」、「Illustrator入門」、「C言語入門」、「Androidアプリ開発」、「iPhone開発」など
【料金プラン】無料・プレミアムプラン：980円/月・プレミアムプラスプラン：1,980円/月

入門コースは、アカウント登録なしでも無料で利用できます。アカウント登録すると、ライブ放送中に発言したり、質問したりする事ができます。

HTMLとCSSの学習を動画で学習できるサイトです。各種言語やIT技術だけでなく、「Word」や「ビジネス全般」、「英語」など多岐にわたる内容を無料で学習できる動画サイトです。有料プランは、すべての授業を受講する事ができる他、動画のダウンロードや限定生放送の視聴などのサービスを受けることが可能です。

▲ページトップへ戻る

1.4. The Web KANZAKI - ごく簡単なHTMLの説明 -

初心者から中・上級者まで、HTMLを体系的に学べる学習サイトです。HTMLをしっかりと学習したい方向けのサイトです。

【The Web KANZAKI公式サイト】https://www.kanzaki.com/docs/htminfo.html

【HTML・CSSの学習ページ】https://www.kanzaki.com/docs/htminfo.html
【学べる言語・技術】「HTML」、「CSS入門」
【料金プラン】完全無料
【目次】

1. HTMLって何だ？
2. 文書の骨格となる基本要素
3. ハイパーリンクを提供する
4. リスト：簡潔な情報表現
5. その他のよく使う要素
6. 正しいHTMLのための若干の知識
7. テーブル

・テーブルとアクセシビリティ

8. スタイルシート1 - 設定方法
9. スタイルシート2 - プロパティ
10. フォーム

・基本的なフォーム
・フォームデータの送信
・フォームとアクセシビリティ

▲ページトップへ戻る

2. 英語のHTML・CSS学習サイト

英語でHTMLなどのWeb作成技術を学習するサイトをご紹介します。

2.1. Codecademy - Learn to code interactively, for free. -

【Codecademy 公式サイト】https://www.codecademy.com/

【学べる言語・技術】「HTML&CSS」、「Webサイト作成」、「レスポンシブデザイン」「JavaScript」、「jQuery」、「JavaScript library」、「Ruby」、「Ruby on Rails5」、「Sass」、「Java」、「SQL」など
【料金プラン】一部無料で学習可、[Codecademy/Pro ＄19.99円/月] 、[Codecademy/Pro INTENSIVE ＄199～]

メールでアカウント登録後に学習を開始するか、GoogleやFacebookのIDを使ってログイン後にHTMLの講座を受講できます。「Codecademy」も解説と共に実際にコードを記述していき、正解のコードとプレビュー画面を確認しながら学習を進めていきます。

▲ページトップへ戻る

2.2. w3schools.com - The language for building web pages -

【w3schools.com 公式サイト】https://www.w3schools.com/

＋ HTMLの学習ページ：https://www.w3schools.com/html/default.asp
＋ CSSの学習ページ：https://www.w3schools.com/css/default.asp

【学べる言語・技術】「HTML&CSS」、「JavaScript」、「jQuery」、「JSON」、「PHP」、「XML」、「SQL」、「Bootstrap」など
【料金プラン】無料
【その他】アカウント登録などは必要なく、無料でWeb作成のノウハウを学習する事ができます。

全てのチャプターに、解説とコードのサンプルがあります。また、自身でコードを記述して、ウェブブラウザーで表示を確認する事ができます。

▲ページトップへ戻る

3. 無料のHTML＆CSSチュートリアル/リファレンスサイト

ある程度HTMLやCSSの基礎学習を終えたら、言語のリファレンスページを参照しながら好みのページを作成していきましょう。

3.1. HTML クイックリファレンス

【HTMLクイックリファレンス 公式サイト】 https://www.htmq.com/

＋ HTMLの基本： https://www.htmq.com/htmlkihon/index.shtml
＋ CSSの基本： https://www.htmq.com/csskihon/index.shtml
＋ ウェブ制作チュートリアル： https://www.htmq.com/tutorial/index.shtml
＋ HTMLタグリファレンス（目的別）：https://www.htmq.com/html/indexm.shtml
＋ HTMLタグリファレンス(ABC順)：https://www.htmq.com/html/index.shtml
＋ スタイルシートリファレンス（目的別）：https://www.htmq.com/style/index.shtml
＋ スタイルシートリファレンス（ABC順）：https://www.htmq.com/style/indexa.shtml

【学べる言語・技術】「HTML&CSS」、「HTML5&CSS3」、「JavaScript」、「Canvas」、「Web画像」、「特殊文字リファレンス」、など
【料金プラン】無料

HTML&CSSリファレンスの定番のウェブサイトです。HTMLやCSSの基本の他、「目的別」、「ABC順」のリファレンスページがありますので、やりたい事からコードを探す逆引きもできます。

▲ページトップへ戻る

3.2. とほほのWWW入門

【とほほのWWW入門公式サイト】 https://www.tohoho-web.com/www.htm

＋ Webページ作成入門のページ： https://www.tohoho-web.com/www.htm
＋ HTMLリファレンス：https://www.tohoho-web.com/html/index.htm
＋ HTML5リファレンス：https://www.tohoho-web.com/html5/index.html
＋ CSSリファレンス：https://www.tohoho-web.com/css/index.htm
＋ 色入門・色見本：https://www.tohoho-web.com/wwwcolor.htm

【学べる言語・技術】「HTML&CSS」、「JavaScript」、「jQuery」、「Ruby」、「Perl」、「PHP」、「Java」、「Perl」、「Python」、「Bootstrap」、「Sass」、「掲示板設置」、「カウンター設置」、「メール送信フォーム」、など
【料金プラン】無料

アカウント登録などは不要です。 HTMLやCSS学習とリファレンスの定番サイトです。シンプルなサイト構成ですが、Web制作全般の技術をくまなく解説しています。

▲ページトップへ戻る

3.3. MDN web docs - 開発者による開発者のためのリソース。 -

【MDN web docs公式サイト】https://developer.mozilla.org/ja/

＋ HTML チュートリアル：https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML
＋ HTML リファレンス：https://developer.mozilla.org/ja/docs/Web/HTML/Reference
＋ CSS チュートリアル：https://developer.mozilla.org/ja/docs/Web/CSS/Getting_started
＋ CSS リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/Reference

【学べる言語・技術】「HTML&CSS」、「HTML5&CSS3」、「JavaScript」、「Accessibility（Webアクセシビリティ）」、「Webカラー」など
【料金プラン】無料
【その他】アカウント登録などは不要です。

「MDN：Mozilla Developer Center」は、「Firefox」ブラウザーやメールソフト「Thunderbird」などの開発元である「Mozilla Foundation」公式のウェブサイトです。開発関連文書や各種チュートリアル・リファレンス記事が充実したサイトです。

▲ページトップへ戻る

3.4. HTML5.JP

【HTML5.JP公式サイト】https://www.html5.jp/

＋ HTML5 チュートリアル(html5doctor)：https://www.html5.jp/html5doctor/index.html
＋ HTML5 タグリファレンス：https://www.html5.jp/tag/index.html
＋ Canvas チュートリアル：https://www.html5.jp/canvas/index.html
＋ Canvas リファレンス：https://www.html5.jp/canvas/ref.html

【学べる言語・技術】「HTML5」、「Canvas」、「W3C日本語訳」
【料金プラン】無料
【その他】アカウント登録などは不要です。

W3C 仕様書の日本語訳がメインのコンテンツですが、HTML5の基礎知識も十分に学習する事ができます。HTML5の他にも、JavaScriptで図形描写をすることができる「Canvas」の基礎とリファレンスもあります。

▲ページトップへ戻る

関連記事：初心者のためのHTML入門
関連記事：HTML入門：WEBデザインに役立つツール