これから HTML をはじめる方、もしくは既に一通り学習済みの方も参考となるような HTML学習サイトを集めてみました。
腕試しや移動時間に利用されてみてはいかがでしょうか？フェーズ別にご参照下さい。
MOZER 無料／スマホ対応 ×
子供向けのプログラミイング・レッスンを展開している Life is Tech 社が今年リリースした注目のオンライン学習サイトになります。
ストーリー仕立てで Web 制作について学習することができるので、即実践的思考と技術を養える教材となっています。 また現在は HTML と CSS が主ですが、今後は Swift や PHP 、Java、IoT、VR など拡張していく予定です。
プレスリリースによると料金は、月額1,500円／コースで、現在の Web デザインコース・体験版は無料で使えます。 実際に使ってみて感じたことは、動機付けには良さそうですが、「ナゼそれをしないといけないのか？」という説明が少ないです（例えば h1 や h2 を使う理由）。そのため今後 Web 業界で働くことを考えている方にとっては、HTML 参考書や他の参考サイトと合わせて利用することをオススメします。
MOZER プレイ画面（一例）
CodeCamp Code部無料／スマホ対応 ○
我が Code部でも HTML のリソースを公開しています。 HTML と CSS 合わせて全 19ページで構成していて、簡単な Web サイトが作れるぐらいの技術を習得できます。 1日 1ページと考えると 1ヶ月で HTML の基礎を習得できます。
Progate一部無料／スマホ対応 △
Progate からは、３つの HTML コースがリリースされています。 初級編が簡単な Web サイトを作る、中級編がランディングページ、上級がレスポンシブ・デザイン、という風に HTML と CSS をセットで学習していく内容となっています。初級編のみ無料で利用できます。 画面左に課題とヒント、中央にファイル管理とコーディング、右にプレビューと正解の画面、という風に HTML 初心者、独学者でも学びやすいような工夫が施されています。
Progate のサービスが気に入ったら月額９８０円で会員になると、8レッスンから 37レッスンに拡張して様々なコンテンツを学習することができます。
CODEPREP無料／スマホ対応 △
無料でHTML の基礎から CSS、 JavaScript との応用を学べるサイトになります。 まったくの HTML 初心者でも CODEPREP のプロセスに従って進めていくと、Web ページの構造を理解して自分でも制作できそうなレベルに到達します。簡単な解説も付いていますので初期段階で学習に有効と思います。 ドロップダウンメニューや 3カラムデザイン、jQuery など HTML の基礎以外にも豊富なメニューが用意されています。
w3schools.com無料／スマホ対応 ○
HTML のことを網羅するなら w3chools がオススメです。 基本的な HTML 構文の書き方をはじめ、メディアやプラグイン、SVG、Canvas の使い方などをサンプルとオンライン・コードテスターで紹介しています。 HTML タグの各種ブラウザ対応も一目瞭然なので、末永く利用できる Web サービスになります。
Dash無料／スマホ対応 ×
ブラウザ上のチュートリアルに従って HTML や CSS、JavaScript のコーディングを行っていきます。 タイプしたコードは即時出力に反映されますので、スピード感をもってコーディングを学習することができます。 学習内容は、『パーソナル web サイト』『レスポンシブ対応のブログ・テンプレート』『簡単なビジネスサイト』などなど盛りだくさんです。
Thimble無料／スマホ対応 ○
Mozilla 社が提供するHTML オンライン・エディタツールになります。 プレーンの状態から Web ページを作るもよし、既に公開されている Web ページをリミックスするもヨシ、今まで学んだ HTML を試せる Web サイトになります。 LIVE プレビュー、スマホプレビュー、ファイル管理、ソーシャル機能、Zip ファイル・アップ機能、どれをとってもすばらしい Web 開発環境と思います。
１ からモダン・デザインの Web サイト の HTML ファイルを作っていこうと思うと少し根気が入りますが、予め用意されたテンプレートを使って自分なりのコンテンツ、デザインに変えてみるのも一つの方法です。 HTML に限ったことではありませんが、技術向上のスタートは「まず真似することから」ではないでしょうか。 以下に無料で HTML ファイルがダウンロードできるサイトをご紹介します。 尚、ライセンスについてはダウンロードしたファイル内の license.text や README.text を参考にして下さい。
一例
＼一流デザイナーのスキルが身に付く／
いかがでしたでしょうか？中にはオンライン・レッスンをやってみたけど、よく分からない方もいらっしゃるのではないでしょうか？そんな時はオンラインのマンツーマン・レッスンがあなたの学習を手伝ってくれると思います。分からないところをピンポイントで教えてくれるので、学習者のストレスを大幅に低減してくれますよ。
HTML／CSS コースをはじめ、Web 制作全般に関わるコースを用意している CodeCampをご検討頂ければ幸いです。
