2014年10月28日にW3CがHTML5の使用を正式に勧告し、早1年以上が経過しました。前バージョンのHTML4.01から比べると構造化要素やマルチメディア要素など、よりインタラクティヴな内容が盛りだくさんとなっていますが、web制作者の方には覚えなければならないことが増えてしまったことも事実です。
今回は時間を無駄にせず効率良くHTML5/CSS3を学習できるサービスやツールを厳選して10選ご紹介します。わかりやすく楽しく学べるにも関わらず、基本無料のコンテンツをぜひチェックしてみてください。
【1】今さら聞けない！HTMLとは
http://techacademy.jp/magazine/4843
「HTMLとはそもそも何？」というマークアップ初学者の方はTECH ACADEMYサイトの記事が役に立ちます。HTMLの成り立ちから概念、書き方まで体系立てて記事を読み進めることができます。
新要素が増えたとはいっても、HTML5は前バージョンのHTML4.01を改善したものとなりますので基本を押さえておけば難なく覚えることができますし、結果として学習の効率が良くなります。
【2】ほんっとにはじめてのHTML5とCSS3
http://honttoni.blog74.fc2.com/
こちらもビギナーの方向けサイト。HTML5とCSS3をベースに解説されており、markやfigureなど新しく策定されたタグの説明も豊富です。簡単なページ更新ができるレベルを目指すことができます。
ローカル環境でテキストエディタにコードを記述しながら仕上がりを体験できるようになっており、さらっと流し読みするにはもったいない内容となっています。
【3】HTMLクイックリファレンス
HTMLの要素やCSSのプロパティをひととおり覚えたら、webページを自分で作ってみるのが上達の近道です。こちらのサイトではタグを1つ1つ詳しく解説されており、実際の記述例と表示を確認できます。
「articleとsectionはどう使い分ければいいんだっけ…。」「効果時間を指定するtransitionプロパティの詳しい使い方を知りたい。」など、実務のちょっとした疑問が解決できるリファレンスサイトです。
【4】ドットインストール
これまで紹介したサイトは記事中心の静的なものでしたが、ドットインストールでは動画を見ながらHTML5、CSS3を学べることが魅力です。jQueryやPHPなどのプログラミング講座も用意されており、単なる解説だけでなくページ作成や簡単なアプリを開発するなど、成果を生み出す目的を持って学習体験ができます。
基本無料ですが、月額880円（税込）のプレミアムサービスに登録すると、中上級者向けのレッスン動画を視聴できたり、動画の内容をテキストで表示したり、できることがぐっと増えます。
【5】ShareWis
ShareWisはHTMLやプログラミングを3分の動画と1問のクイズでサクサク学べるアプリです。通勤や通学などのちょっとしたスキマ時間をスキルアップタイムに変えることができます。webページに使用する基本HTMLを10分で理解するレッスンなど、短時間で終えられるメニューが満載です。
【6】HTML5カルタ
http://roadstohtml5.com/html5karuta/
単独で扱える記事のようなセクションタグ、項目に関する記述リストのタグなど、HTMLタグの意味をかるた形式で覚えることができます。日本の伝統的な遊びとwebという最先端な技術が結びついた様子は微笑ましく感じられます。
ちなみに冒頭のタグは何かお分かりになりましたが？
※答えはarticle、dlタグです。
【7】CSS3プロパティジェネレーター
http://css-eblog.com/eblog_sample/0912/css3-generator/
テキストを入力してフォントサイズやシャドウ効果をGUIで好きなデザインに整えたら、CSS3のコードを書き出してくれるサービスです。このようなジェネレーターサービスは海外のものが主流ですが、こちらは貴重な日本語によるサービスを提供してくれています。見出しやボタンのデザインを考えたいときに、新しいアイデアが生まれそうですね。
【8】Markup
http://ysd-lab.jp/markup/index.html
webサイトにはカラムやボックスなど、表現するレイアウトの型がある程度決まっています。こちらはCSSによる各レイアウトの実現方法をスライドを見ながら実際に記述して覚えることができるサービスです。その場で完成プレビューを見ることができるので、やる気も大幅アップしそう。もちろんsectionタグなどの新要素を使用したHTML5/CSS3に対応しています。
【9】CODEPREP
HTMLやCSS、JavaScriptなどのwebライクな言語だけでなく、Javaなどのプログラミング言語を穴埋め形式で学ぶことができるサービスです。基本構造から実務に役立つテクニックまで、豊富なレッスンがラインアップされています。
このサービスではレッスンをクリアすることで経験値が取得でき、仲間と競争したり励ましたりできるフォーラムも用意されています。孤独になりがちな勉強時間を誰かと共有できるのは現代らしいコンセプトですね。
【10】HTML5全国実力テスト
http://jsdo.it/event/html5cat/2012/autumn/
これまでご紹介したサービスやツールで基本学習ができたら、いよいよ実力をテストしてみましょう。お手持ちのSNSアカウントでログインするだけで、HTML5やCSSのテストを受験できます。とくに成績が優れた方には企業からスカウトされる可能性もあるとのことです。
まとめ
HTML初学者の方が楽しく学べるサービスやツール、アプリをご紹介しました。最短で覚えるコツは何よりも楽しく学ぶことです。経験者の方でもお世話になる良質かつエンターテインなサービスを使用して早く楽しく、HTML5とCSS3を使いこなしましょう。
販売店比較早見表
|
店舗名 |
詳細 |
|
キャッシュバック最高額を保証してくれます |
|
|
キャリア公式オンラインショップ |
|
|
ソフトバンクショップ, auショップ, ドコモショップ |
|
