【独学で学ぶ】HTMLをほぼ無料で学べる学習サイト11選



【独学で学ぶ】HTMLをほぼ無料で学べる学習サイト11選

「これからプログラミングを学びたい!」と思ったときに、まず候補にあがってくるのがHTMLです。

  • 自分でWebサイトを作れるようになりたい
  • すでにあるブログをもっとキレイにしたい
  • まずはプログラミングに触れてみたい

こんなかたにおすすめなのが、HTMLというプログラミング言語になります。HTMLを学ぶことで、Webサイト制作の基礎を身につけることができますよ。

今回は、HTMLをほぼ無料で学べるサイトを11個まとめました。どのサイトも初心者向けなので、自分に合っていそうなものを試しながら学習することをおすすめします。

image

目次
  1. 基本的には全部無料の学習サイト
  2. Progate
  3. ドットインストール
  4. SkillHub
  5. シラバス
  6. CODEPREP
  7. MOZER
  8. 一部無料で試せる学習サイト
  9. Schoo
  10. Udemy
  11. paiza learning
  12. 無料だが、全て英語で書かれているサイト
  13. Codecademy
  14. Dash
  15. 自分に合った学習サイトでHTMLの知識を深めよう

基本的には全部無料の学習サイト

Progate

image

画像:Progate

HTMLの基本的な操作を、無料で学びたいなら、Progateはおすすめです。

  • 実際にコードを書いて学習できる
  • 資料も見やすく作り込まれている
  • アドバイスやヒントも的確

という特徴があり、プログラミング初心者でも、スピーディかつ確実に力をつけていくことができます。自分のコーディングをどう改善したらよいかを明確に理解しつつ、徐々に学びを深めていけるでしょう。

本やインターネットでHTMLの概要を見たものの、コードを書いて学ぶ機会が少なかったかたにおすすめ。

ドットインストール

image

画像:ドットインストール

ドットインストールでは、3分の動画でプログラミングを学ぶことができます。個人的には「動画学習の代名詞」といった印象がありますね。

  • 動画がわかりやすく、短い時間で簡潔に作られている
  • スキマ時間でプログラミングの知識を習得できる
  • 実際にコードを書くことを重視している

ドットインストールでは、プレミアム動画と文字起こしソースコードを見ることができる有料プランも用意されています。ただ、無料プランのままでも十分にHTMLの基礎を身につけることが可能です。

実際にコードを書きながらの理解を、動画中でもうながしてくれるので、実践的な力を身につけたいかたにおすすめ。

SkillHub

image

画像:SkillHub

こちらの「SkillHub」も、無料でHTMLの基礎について習得できるサイトになります。

  • HTMLの概要から実践までをきっちりカバー
  • システマティックなカリキュラムで、成果を実感できる
  • Webデザインなどの講座も充実

初心者からプロになるまでをサポートする、独自のカリキュラムが用意されています。ゆえに、これから実際にWebの世界で働きたいと考えているかたにもおすすめ。

SkillHubには、HTMLはもちろん、Webデザインなどについての講座も充実しています。Webに関する知識を、幅広く習得したいかたにおすすめのサイトですね。

シラバス

image

画像:シラバス

こちらの「シラバス」の特徴は、Webコンテンツを作る流れにそって、HTMLを学べるところです。

  • Webサイトを作るための流れを知りたい
  • 実際の現場における制作フローを学びたい
  • 身につけた技術を現場に応用したい

このように考えているかたには、シラバスがおすすめです。プログラミングの技術をいくら学んだところで、それが実践で活かせなければ意味がありません。人によっては、実際の現場で活かすためにプログラミングを学んでいると言っても過言ではないでしょう。

HTMLを学びつつ、Webコンテンツを制作する流れを理解したい方は、シラバスを使うのがおすすめですね。

CODEPREP

image

画像:CODEPREP

HTMLはもちろんのこと、ブラウザ上でアプリを作るところまでできてしまうサイトが、こちらのCODEPREPです。

特徴的なのが仲間と競争して学習できるようになっている点です。

  • だれかと競争したほうが勉強しやすい
  • 以前にプログラミングの勉強で挫折した
  • Webアプリを作ってみたい

このように考えているかたは、一度試してみることをおすすめします。

また、他のプログラミング学習サイトとは違って穴埋め式のドリルを使用するので、初心者でもテンポよく学習できるのもメリットですね。

MOZER

image

画像:MOZER

MOZERでは、体験版ではありますが、レッスンを無料で受けることができます。

  • ストーリー仕立てでWeb制作を学習できる
  • 「プログラミングって楽しい!」と思える仕組みがそこかしこにある
  • プログラミングの仕組みについては、説明が少なめ

という特徴をもったサイトです。ひとまず、HTMLに親しんでみたいかたにはオススメですね。

これからHTMLをしっかり学んでいきたいのであれば、書籍や他のサイトとの併用がオススメでしょう。

一部無料で試せる学習サイト

Schoo

image

画像:Schoo

Schooでは、経営や起業、IT、テクノロジーなどをテーマにした授業の動画が用意されています。その名の通り、「インターネット上の学校」と言うべき、優良サイトですね。

  • Web業界のプロが講師
  • 1本の動画が約60分
  • 初心者でもわかる、丁寧な説明

というのが、Schooの特徴です。

実践的な現場の知識を、じっくりと身につけたいかたにおすすめ。

Udemy

image

画像:Udemy

一部コンテンツではありますが、Udemyも無料でHTMLを学ぶことができるサイトです。

こちらはアメリカで人気の学習プラットフォームです。とはいえ、ちゃんと日本語にも対応しているのでご安心を。

HTMLを無料で学習できる講座としては、「超絶分かりやすいHTML5・CSS3 | HTML5とCSS3を使って、お店のホームページ(HP)を作ってみよう!」や「初心者向けHTML基礎講座」などがあります。

  • HTMLに慣れてからも学べるサイトを使いたい
  • スキマ時間にHTMLを勉強したい
  • スマホでもプログラミングの勉強をしたい

Udemyはこのように考えているかたにはおすすめです。

目的に応じて「入門」「基礎」「実践」からレッスンを選ぶことができ、初心者からコーディングに慣れたかたまで対応しています。

スマホにも対応しており、スキマ時間にプログラミングを学びたいかたにもおすすめできるサイトです。

paiza learning

image

画像:paiza learning

一部コンテンツですが、「paiza learning」でも無料でHTMLを学ぶことができます。

ユーザー登録が必要なものの、

  • オンラインでの動画学習
  • コーディングの動作確認

を行うことができます。ドットインストールと同じく、3分の動画に内容がつまっているので、コツコツと勉強していきたいかたにもおすすめ。

また、他のプログラミング言語についても学べるので、長期的に使用することも可能なサイトになっていますよ。

無料だが、全て英語で書かれているサイト

Codecademy

image

画像:Codecademy

すべて英語で書かれたサイトではありますが、Codecademyはプログラミング言語についての講座を無料で提供しています。

日本でプログラミング学習サイトが増える前から台頭していたサイトで、充実度は日本のサイトを超えるほどです。

HTMLについても、入門から実際のサイト作成まで、幅広く学ぶことができます。

Webだけでも

  • サイト制作
  • インタラクティブなサイト制作
  • Sass(CSSの一種)の学習
  • JavaScript
  • Rails

などの豊富なコンテンツを取り揃えており、様々な知識を得ることできるでしょう。コーディング中心のサイトですので、英語がわからなくてもそこまで理解は難しくないはずです。

Dash

image

画像:Dash

こちらの「Dash」もすべて英語のサイトになります。

  • ブラウザ上でチュートリアルを確認しながら学習できる
  • 書いたコードはその場でプレビューに反映される
  • LP作成やレスポンシブデザインなど、実践でも使う技術を習得できる

というのが、特徴です。「自分がなにをしているのか」をしっかり確認しながら、HTMLをはじめとしたWebのコーディング知識を深めることができます。

今後の学習や実務にも活かせる、プログラミング学習を目指しているかたにおすすめ。

自分に合った学習サイトでHTMLの知識を深めよう

HTMLをほぼ無料で学べるサイトを11個まとめました。

  • 自分でWebサイトを作れるようになりたい
  • すでにあるブログをもっとキレイにしたい
  • まずはプログラミングに触れてみたい

このように考えているかたは、まず無料のサービスでプログラミングに触れるのがおすすめです。

自分にあったプログラミング学習サイトを見つけて、HTMLの知識を深めていきましょう!

image

黒田剛司
この記事を書いた人
黒田剛司
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp