最短で覚える!HTML5/CSS3を無料で学べるサービス・ツール10選

  • このエントリーをはてなブックマークに追加
  • Pocket
Baidu IME_2015-12-7_13-10-18

いまも今後も進化が止まらない「WEB」を学びたい人たちにとって、必ず学ばなければいけないのがHTMLとCSSです。最新のHTML5/CSS3では、メディアやローカルストレージ関連機能の実装が簡単になりさらに実用性のある言語へと変化しています。しかしながら、HTMLとCSSはプログラミング言語ではないので比較的簡単に学習することができます。さらに学習サービスやツールを活用すれば、最短でHTML5/CSS3を学ぶことができます。そこで、HTML5/CSS3を最短&無料で学べるサービスやツールを紹介します。

  もくじ

   Ⅰ.学習サービス

      ① 動画で学ぶなら、「ドットインストール」

      ② 生放送で質問できる、「schoo WEB-campus(スクー)」

      ③ 実際にコーディング!「CODEPREP」

      ④ プログラミングの入門なら基礎から学べる「Progate (プロゲート)」

      ⑤ レイアウトに特化したCSS学習サイト「Markup」

      ⑥ 無料学習サイト「ShareWis(シェアウィズ)」

      ⑦ プログラミング学習なら「CodeStudy」

   Ⅱ.便利なツール

      ① 開発環境不要!すぐにコーディングを試せる「Thimble by Mozilla」

      ② HTMLクイックリファレンス

      ③ 実力を確認!全国統一HTML5実力テスト

Ⅰ.学習サービス

以下の動画学習サービスはほとんどの言語に対応していますので、まだ何を学ぶか迷っている人も、実際に動画見て自分に合いそうな言語、目的に合った言語を選びましょう。

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

国内で一番有名なプログラミング学習サービスです。基礎的な内容がほとんど無料で学習できます。メジャーな言語のほとんどに対応しています。

② 無料動画のオンライン学習サイト – schoo WEB-campus(スクー)

実際のプログラマーの講師が生放送で授業をしてくれるので、わからないこともすぐに質問できます。生放送は無料なので、徹底的に使い倒しましょう。

SnapCrab_NoName_2015-11-17_14-42-51_No-00

③ CODEPREP -オンラインでプログラミングを学ぼう-
JavaScript/HTML/CSSに特化した学習サービスです。経験値がたまるので、ゲーム感覚で続けられます。ディスカッションスペースで質問ができる上、コードを入力すれば自動で進むので初心者の方におすすめです。

④ Progate | プログラミングの入門なら基礎から学べるProgate (プロゲート)
HTML/CSSをまとめて学習することができる講座が用意されています。30分程度で見終わる量なので、なかなか勉強が進まない方はここで基礎を復習してみるのもいいかもしれません。

 

⑤ レイアウトに特化したCSS学習サイト「Markup」
HTMLはコーディングをしてみることでなんとなくコツが掴めますが、CSSは無理やり見た目を合わせることができるため、独学者は本来使うべきでないコードを書いてしまうことが多いです。このサイトは実際に完成品を目指して最適なコーディングをする技術が学べます。初心者だけでなく、脱初心者を目指すWEBデザイナーにもおすすめです。

 

SnapCrab_NoName_2015-11-17_14-33-17_No-00

⑥ 無料学習サイト ShareWis
ShareWisは、JavaScriptだけでなく様々な言語に対応していますが、JavaScriptと一緒に使うことが多いHTML/CSSなど関連の言語の学習もできるので特におすすめです。

 


⑦ プログラミング学習ならCodeStudy

インターンシップ情報サイト「JEEK」が提供しているプログラミング学習サービスです。実際にコーディングをしながら学習を進めることができます。実践型なので、上記のサイトをクリアしてから利用すると効率的に学習ができます。

 

Ⅱ.便利なツール

SnapCrab_NoName_2015-11-17_14-48-38_No-00

① 開発環境不要!すぐにコーディングを試せる「Thimble by Mozilla」

HTML/CSSはメモ帳で始められる!といっても、実際にはコーディングをしやすくしたり、完成品を確認するためのエディターが使われています。「Thimble by Mozilla」は2015年9月にできたばかりの学習用クラウドエディターです。勉強を始めたい人はとりあえずここをブックマークして、試したいことがあればすぐにコーディングしてみましょう!

② 第二回全国統一 HTML5実力テスト – jsdo.it

学習を進めていく中で、自分がどれだけ実力があるのかがわからなくなると学習が進まなくなります。このHTML5実力テストでは、HTML5だけでなくCSSやJavaScript、アプリ開発まで実力テストが用意されており、自分の実力を確認してモチベーションを上げることが出来ます。

 

SnapCrab_NoName_2015-11-21_23-5-42_No-00

③ HTML5&CSS3リファレンス
プログラミングを学習する際も同様ですが、コーディングの際に各種機能の使い方や記述の仕方を確認するためにリファレンスを利用します。「HTML5&CSS3リファレンス」では、最新の規格に則ってそれぞれの言語の機能が解説されています。分からないことがあったら、このサイトを参照してみましょう。

 

まとめ

プログラミングの多くは効率的に、合理的に目的を達成するために用いられます。プログラミングの勉強も同様で、たくさん勉強しよう!というよりも、最短の道筋で学習しよう!と意識することが非常に大切です。そのために、情報収集やサービス/ツールを最大限に生かして学習を進めましょう。

 

超おすすめ記事

iPhone6sに乗り換える前に!

仕事に使える!

仕事にも役立つiPhoneアプリを紹介!

iPhone神アプリを紹介!

  • このエントリーをはてなブックマークに追加
  • Pocket