オーダーメイドコース
icon
icon

【入門向け!】独学に最適なHTMLを学べる学習サイト20選

初心者向けにHTMLを独学で学習できるサイトをまとめて紹介しています。入門向けでかつ無料で利用できるので、これから始める人におすすめです。自分に合った学習スタイルでHTMLの勉強を始めてみてはいかがでしょうか!

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

Web開発やデザインをやってみたいけれど、何から手をつければ良いか分からないという方もいらっしゃるかもしれませんね。

Web関連の学習に当たってまず必要な知識はHTML(HyperText Markup Language)です。

ここでは、HTML学習に役立つサイトをご紹介したいと思います。

そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

Udemy

学習タイプ:動画

HTMLの基礎やHTML5を使ったゲーム作成など、初めてHTMLを学ぶ方におすすめの動画が多くあります。

何か作りながらHTMLやCSSを学ぶことができるので、実践的に楽しく身につけられるはずです。

Udemy

 

ドットインストール

bbb0d9500ed30c852b27854bac992f96-620x254

学習タイプ:動画

3分動画で学べる初心者向けのプログラミング学習サイトです。HTMLだけでなく、CSS、JavaScriptも学べるので便利です。実際にウェブサイトを作る講座もあるので発展的に学習することができます。

初めてHTMLに触れるという方におすすめです。

ドットインストール 

 

[PR] Webデザインで副業する方法とは

Schoo

schoo-620x330

学習タイプ:動画

IT系の講座がメインのサービスで、WEB業界のプロがデザインやWEB開発について教えてくれます。現場の知識も教えてくれるので実践でも役立ちます。授業中に質問できるという点がポイントです。

Schoo

 

ShareWIS

ShareWIS-620x384

学習タイプ:動画

HTMLを短い動画で学ぶことができるので、隙間時間を利用した学習が可能です。動画の最後にはミニクイズがあるので1つ1つの動画をしっかり理解してから先に進むことができます。

ShareWIS

 

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

スクリーンショット 2016-05-31 11.06.24

学習タイプ:テキスト

HTMLが初めて、プログラミングも初めてという方におすすめの入門サイトです。易しい言葉で書かれているので全くの初心者の方でも挫折することなく学習できます。

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

 

Progate

060b946575e8738ac180773df0e938b6-620x465

学習タイプ:ハンズオン(実際にコードを書きながら)

プログラムを基礎から学ぶことのできるサイトです。HTMLについては、学習コース→道場コースの順に段階的に学習します。最後はプロジェクトコースで実践を身に着けられる本格的なサービスです。

Progate

 

CODEPREP

CodePrep-620x268

学習タイプ:ハンズオン

アプリ開発を通してプログラミングを学びます。HTMLの学習では、穴埋めをしながら実際のコードに触れて動きを確認できます。HTMLの知識が少しあって、手を動かしながら学習したいという方におすすめです。

CODEPREP

 

CodeAcademy

スクリーンショット 2016-05-31 11.11.07

学習タイプ:ハンズオン

アメリカの教育系の企業が運営するサービスです。CODEPREPでは穴埋め形式で学習するのに対し、CodeAcademyでは1からコーディングしていきます。難しそうな気もしますが、解説がしっかりしているので無理なく学習を進められます。

 CodeAcademy

 

SkillHub

スクリーンショット 2016-05-31 11.07.15

学習タイプ:動画

転職やフリーランスの方の為のオンラインスクールで、初心者でも学ぶことができます。HTMLの講座は1動画15分程度で構成されていて、基本からじっくりと学びたい方におすすめです。

SkillHub

 

Web Design Recipe

webdesignreceipe-620x197

学習タイプ:テキスト

Webデザイナーの方の個人ブログですが、コンテンツが充実していて分かりやすいです。また、Webサイト作成時に必要な知識やHTMLコーディングの際に役立つツールなども紹介されており、実践に即した知識を得られます。

Web Design Recipes

 

code9.leap

code9leap-620x245

学習タイプ:ハンズオン

ゲームプログラミングの学習サイトですが、HTMLも学ぶことができます。コードと実行結果を比較しながら学習できるので便利です。ある程度HTMLの知識があると学習がスムーズに進みます。

code.9leap

 

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

学習タイプ:テキスト

HTMLに何も知識がないときに一度読んでみるとおすすめです。本当に基礎の基礎から教えてくれます。

一つ一つのチャプターが短いのも読みやすくて嬉しい。「タグ」ってなんだろう?という人に親切丁寧に解説してくれています。

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

 

一時間で作るホームページ

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-27-21-40-31

学習タイプ:テキスト

 

その名の通り一時間でホームページを作ることを目標にしています。

たとえHTMLのみ学んだとしてもそれでホームページができるわけではないのです。それも踏まえて1時間で習得できるというのだから驚きですね!

一時間で作るホームページ

 

HTML Dog

nm_01_03

学習タイプ:テキスト

英語のサイトですが、もし英語が得意!という方ならおすすめです。

もちろん無料で学べる上に、サンプルコードも豊富。何よりシンプルなデザインでストレスなく勉強できるのが嬉しいです。もしかしたら英語の勉強になって一石二鳥かもしれませんね。

HTML Dog

 

HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-27-21-41-38

学習タイプ:テキスト

 

サルでもわかるとうたうこのブログ。なんと驚くべきことにこの一ページにHTML, CSSの基本が書かれているのです!

そしてわかりやすいように目次まであってすぐにそこに飛んで行けるのです。言うまでもなくサルでもわかるほど分かりやすいです!

HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】

 

とほほのWWW入門

学習タイプ:テキスト

こちらはどちらかというと一通り学んだ後にリファレンスとして使うのがおすすめです。

豊富なHTMLの仕様例が検索できて、そのままコピペで使うことだってできちゃいます!困ったときにこれさえあれば怖いものなしでしょう。

とほほのWWW入門

 

Tipszone

nm_01_06

学習タイプ:テキスト

 

2時間でHTMLを理解できるようにと書いてありますが、文量はそれ以下です。

本当に必要最低限のことが書いてありますが、だから返って簡単で読みやすい!これを読んでから他のものに移るというのも一つの手です。

Tipszone

 

w3school

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-27-21-43-53

学習タイプ:ハンズオン

こちらも英語サイトですが左にあるサイドバーから必要な情報だけ抜き取れて非常にみやすく使いやすいです。

こういうサイト自体が一つのWebアプリケーションになっているものはとても好印象です。

w3school

 

Weblog endoutakae

学習タイプ:テキスト

この可愛らしくてガールズな感じのおしゃれなデザインがいいですね!

下にスクロールするとネコちゃんが!かわいい!じゃなくてHTMLの勉強のサイトです。このサイトなら楽しく勉強できそうですね。

Weblog endoutakae

 

The Web KANZAKI

nm_01_09

学習タイプ:テキスト

上にもいろいろ短時間習得コースはありましたがこちらはさらに最短30分コースと驚くべき短さです。

それだけに要点をしっかりと説明してくれるので、大変おすすめです。

The Web KANZAKI

 

超絶初心者のためのフロント入門(HTML、CSS、JavaScript)

nm_01_10

学習タイプ:テキスト

ここは実際にコードに入る前にまず用語から親切丁寧に解説してくれています。

フロントエンド?サーバー?なにそれ?という人はここから進めていくことをお勧めします!

超絶初心者のためのフロント入門(HTML、CSS、JavaScript)

 

以上、入門向けのHTML学習サイトをまとめました。

最近では、テキストや動画だけでなく実際にコーディングしながら学習できるサイトも増えているので、いろいろと試してみると良いでしょう。

ぜひ自分のライフスタイルに合った学習サイトを見つけてみましょう。

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長開発実績:PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。 

小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。