- 更新日: 2019年04月19日
- 公開日: 2017年05月26日
HTML入門者にオススメ！無料学習サイト11選＋使えるアプリ2つをご紹介
HTML学習を独学で進めるには難しく、途中で諦めそうになったというかたもいるかもしれません。そこで今回は、HTML初心者が無料で学べるサイトとアプリをご紹介します。
全て無料なので、ご自身に合ったサイトやアプリを見つけて学習を進めてみてください。
HTMLを無料で学べるサイト
まずはウェブ上でHTMLを無料で学ぶことができるサイトをご紹介します。
Progate
HTMLの基本的な操作を学ぶのであれば、Progateはおすすめのサイトと言えるでしょう。
実際にコードを書きながら学習することができるのが特徴で、資料も見やすく作り込まれており、スピーディかつ確実に力をつけていくことができます。
また、アドバイスやヒントも的確なので、自分のコーディングをどう改善したらよいのかをはっきりさせながら、徐々に学びを深めていくことができるでしょう。
基礎的な学習を少しだけしたことがあるものの、コードを書いて学ぶ機会が少なかったというかたにおすすめ。
ドットインストール
3分の動画によってプログラミングを学ぶことができるのが、ドットインストールです。個人的には「動画学習の代名詞」といった印象があります。
その特徴は何と言ってもわかりやすい動画です。動画の時間が短めに設定されていることもあり、スキマ時間にコツコツ勉強することもできますね。
プレミアム動画と文字起こしソースコードを見ることができる有料プランも用意されていますが、無料プランのままでも十分にHTMLの基礎を身につけることが可能です。
動画のサイトにもかかわらず実際にコードを書くことを重視しているので、すばやい理解が望めるのもよいポイントですね。
Schoo
Schooでは、経営や起業、IT、テクノロジーなどをテーマにした動画で授業を受けることができます。その名の通り、「インターネット上の学校」と言うべき、優良なサイトです。
1本の動画が約60になっており、ドットインストールとは毛色が違うサイトになります。腰を落ち着けて学習したいと考えているかたにはおすすめですね。
料金形態としては、ライブ動画だと基本的には無料、アーカイブ動画であれば有料（1本までは無料）となっています。
実際にWeb業界で働いているプロが講師として教えてくれるので、実践で役に立つ現場の知識をつけることができるのも魅力ですね。
現役エンジニアが指導してくれるとはいえ、初心者でもわかるような言葉で説明してくれるので、これから基礎をかためていきたいかたでも十分に理解することができますよ。
SkillHub
こちらの「SkillHub」も、無料でHTMLの基礎について習得できるサイトになります。
初心者からプロになるまでをサポートする独自のカリキュラムが用意されているので、これから実際にWebの世界で働きたいと考えているかたにもおすすめです。
HTMLの概要から実践までをきっちりカバーしているので、ビギナーでも無理なく理解していくことができますね。また、システマティックに学習を進めることができるカリキュラムになっていますので、成果が見える学習をすることが可能です。
HTMLだけではなくWebデザインなどについての講座も充実しているので、Webに関する知識を幅広く習得したいかたにおすすめです。
シラバス
こちらの「シラバス」の特徴は、HTMLを学びつつ「Webコンテンツを作る流れ」を知ることができる点です。
プログラミングの技術をいくら学んだところで、それが実践で活かせなければ意味がありません。人によっては、実際の現場で活かすためにプログラミングを学んでいると言っても過言ではないでしょう。
シラバスではWebコンテンツを制作する流れまで理解することができます。なので、シラバスのサイトで流れにそって学習していくことで、自分の技術をしっかりと実務に活用できるようになるはずです。
CODEPREP
HTMLはもちろんのこと、ブラウザ上でアプリを作るところまでできてしまうサイトが、こちらのCODEPREPです。
初心者でも学びやすい仕組みがそこかしこにあるので、基礎的な知識を学んでいなくてもとっつきやすそうですね。
特徴的なのが仲間と競争して学習できるようになっている点です。プログラミングでありがちな挫折を避けることができるという意味でも、CODEPREPは優秀なサイトと言えるでしょう。
また、他のプログラミング学習サイトとは異なり、穴埋め式のドリルを使用しますので、全くの初心者でもテンポよく学習していくことができるのもメリットですね。
Udemy
一部コンテンツではありますが、Udemyも無料でHTMLを学ぶことができるサイトです。
HTMLを無料で学習できる講座としては、「超絶分かりやすいHTML5・CSS3 ｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！」や「初心者向けHTML基礎講座」などがあります。
こちらはアメリカで人気の学習プラットフォームです。とはいえ、ちゃんと日本語にも対応しているのでご安心を。
目的に応じて「入門」「基礎」「実践」からレッスンを選ぶことができ、初心者からコーディングにある程度慣れたかたまで対応しています。
スマホにも対応しており、スキマ時間にプログラミングを学んでいきたいかたにもおすすめできるサイトです。
paiza learning
「paiza learning」も一部コンテンツにはなりますが、HTMLについて無料で学ぶことができます。
ユーザー登録が必要なものの、オンラインでの動画学習に加えてコーディングの動作確認まで行うことが可能です。
ドットインストールと同じく、3分の動画に内容がつまっているので、コツコツと勉強していきたいかたにもおすすめ。
また、他のプログラミング言語についても学べるので、長期的に使用することも可能なサイトになっていますよ。
Codecademy
すべて英語で書かれたサイトではありますが、Codecademyはプログラミング言語についてのコーディング講座を無料で提供しています。
日本でプログラミング学習サイトが増える前から台頭していたサイトで、その充実度は日本のサイトを超えるほどです。
HTMLについて、入門から実際のサイト作成まで幅広く学ぶことが可能になっています。
Webだけでも「サイト制作」「インタラクティブなサイト制作」「Sass（CSSの一種）の学習」「JavaScript」「Rails」などの豊富なコンテンツを取り揃えていおり、様々な知識を得ることが可能でしょう。
コーディング中心のサイトですので、そこまで英語がわからなくても理解は難しくないはずです。
Dash
https://dash.generalassemb.ly/
こちらの「Dash」もすべて英語のサイトになります。ブラウザ上でチュートリアルを確認しながら学習を進めることができ、HTMLをはじめとしたWebのコーディング知識を深めていくことが可能です。
書いたコードはその場でプレビューに反映されるので、「自分がなにをしているのか」をしっかり確認しながら学習することができます。
LP作成やレスポンシブデザインなど、実践でも使う技術を習得できるので、今後の学習や実務にも活かしていくことができるでしょう。
MOZER
ストーリー仕立てでWeb制作を学習することができ、プログラミングに親しむことができるのがこちらのMOZERになります。
体験版ではありますが、無料でレッスンを受けることができます。
「プログラミングって楽しい！」と思える仕組みがそこかしこにありますが、そのためかプログラミングの仕組みについての説明が少ない印象です。
わかりやすく、かつ勉強自体を楽しめるサイトではありますが、これからHTMLをしっかり学んでいきたいかたは書籍や他のサイトとの併用がオススメでしょう。
HTMLを学べるアプリ
ここからはHTMLを学習できるアプリをご紹介します。通勤や通学の時間を使ってプログラミングを学びたい人は要チェックです。
Trico-Hello world without PC
片手でプログラミングすることに特化したアプリがこちらの「Trico - Hello world without PC」になります。
HTMLとCSSに加え、JavaScriptの編集もできるので、HTMLを学んだあとさらに深くWebを知りたいというかたにもおすすめです。
「電車内で立ったままプログラミング」なんて芸当も、このアプリがあれば簡単に実現できるでしょう。忙しくてプログラミングを学ぶための時間をしっかり取れないというかたにもおすすめ。
なお、現在はiOS対応のみとなっています。
ShareWis
90秒という短い動画を提供しているスナックコースが特徴のアプリがこちらの「ShareWis」になります。スマホを片手にスキマ時間でサクッとCSSを学びたいかたにはぴったりのアプリですね。
ちょっとした待ち時間もムダにすることなく、着々とスキルを身につけたいかたは利用したいアプリですね。
プログラミングの他にもExcelなどのPCスキルやビジネススキル、英語などを扱った動画も提供してるので、これから学びを広げていきたいかたにもおすすめ。
全国統一HTML5実力テスト
http://jsdo.it/event/html5cat/2012/autumn/
学習というよりかはテストと言ったほうが正しいですが、こちらの「全国統一HTML5実力テスト」では無料でHTMLに関する知識を試すことができます。
アニメーションなど一般的にサイト制作では使わないものも多いので、基礎知識をつけるというよりかは力試しとして使うのがよさそうです。
「HTMLやCSSが書けます！」と自信をもって言っても大丈夫なほどの内容なので、実力がついてきたと思ったらぜひやってみてください。
また、HTMLの他にもJavaScriptやスマホアプリ制作にも対応しているので、今後学習の幅を広げていきたいかたにもおすすめでしょう。
＼一流デザイナーのスキルが身に付く／
まとめ
HTML初心者むけの学習サイト・アプリをご紹介しました。しっかりとパソコンを使ってコーディングしたいときにはサイトのサービスを、スキマ時間にサクッとプログラミングを学びたいかたはアプリのサービスを利用するとよいでしょう。
自分の生活スタイル、学習スタイルに合ったサイトやアプリを選んでみてはいかがでしょうか。
- この記事を書いた人
- 黒田剛司
