HTML5の学習に役立つ(主に)日本語のサイトまとめ2012
この記事は約16分ぐらいで読めます
webにあるHTML5の情報は英語のものが多い
当然のことですが、HTML5の情報は殆どが英語です。W3Cのサイトだって英語で書かれていますし、大抵の情報は英語さえ分かればアクセスできますね。
まあとはいえ、HTML5を勉強しようと考えるいきなり誰もが英語を読めなければならないとなるとちょっと難しいですよね。最初は先輩方の翻訳または日本語で書かれたオリジナルの文書から学びたい。そして情報の速度や判断の尺度のずれが気になってきてから、それから国外の情報で勉強しても遅くはないはずです。…そう思いたいですw
HTML5に関する国内のサイトや情報源をまとめました
と言う訳で、今回はwebcre8が認識しているHTML5に関する情報源やリソースサイト、参考になった記事、調べてたら出てきたものをざっくりとまとめてみます。サイト、ブログ記事、リファレンス、ツール等です。せっかくなので、知っているものは英語のものもついでに紹介しますね。
未熟ながらWEBCRE8.jpも、HTML5の情報を追っているブログのはしくれです。私自身現時点では幅広いHTML5というものの中で、しっかりと理解しようとしているのは各技術のうちコーディングに関する部分だけです。その範疇を超える情報の把握はまだまだこれからですが、とりあえずは一通りの情報源を抑えたうえで、今後それぞれの技術をある程度は理解して行けるようにと考えています。API等の周辺技術にも手を伸ばしていきたいですね!
HTML5に関する公式情報の翻訳
http://standards.mitsue.co.jp/resources/w3c/
公式情報の翻訳コンテンツ。仕様を読めないときはそれの日本語で書かれたコンテンツを読みましょう。
- Web標準仕様 日本語訳一覧ミツエーリンクスが独自に行うHTML5関連を含む翻訳資料
- HTML関連英文書の日本語訳HTML5.JPの翻訳コンテンツ。APIについてやWHATWGの情報等
- HTML5日本語化 – Opera WikiOpera Wiki 内にあえる、有志によるW3Cの日本語化プロジェクト
HTML5のリファレンスサイト
http://www.html5.jp/tag/index.html
HTML5の基本はコーディング。構文の仕方については各リファレンスサイトが役に立つでしょう。
- HTML5タグリファレンス – HTML5.JP我らがHTML5.JP。webcre8はここを開かない日はありませんw
- HTML5リファレンスちょっと情報止まってますけど老舗サイト
- ASCII.jp HTMLリファレンス : HTML 3.2/4.01/5 – HTMLのタグ一覧とリファレンス情報ASCII.jpのリファレンス。ぱっと見一番見やすそう
- HTML5各要素別メモmountroot-yyさんの最新のEditor’s Draftまでを含むリファレンス
- HTML 5 リファレンスしらぎくさんのHTML5の用法について個人的見解も含み深く考察しているサイト
- ほんっとにはじめてのHTML5 ほんっとにはじめてのHTML INDEX最近初めて知ったんですが、かなりマニアックなことにも細密に触れているサイト。ここを読んで基礎を勉強してもいいかも
HTML5のコミュニティ
コミュニティはエンジニア同士の繋がりを作り、お互いの技術の向上のために勉強会を開いたり、メールングリストによる情報共有も行っています。沢山の先輩方とコミュニケーションを取るにはここに参加するのも手です。活動の停止しているものは割愛しました。
- html5j.org国内最大の、日本語でやりとりが行われるコミュニティ。メーリングリストやHTML5とか勉強会などを主催
- HTML5-WEST.jpこちらもメーリスはもちろん、HTML5など勉強会を主催
- HTML5+α @福岡福岡で主に勉強会を行っている団体
- 北陸エンジニアグループ – Google グループGoogleグループ。福井・石川・富山のエンジニアの交流を目的としたグループ
HTML5関連情報を取り扱うブログ
技術者のブログは非常に多く、ここでは挙げきれないほどのブログがあると思います。ここではメインコンテンツとしてHTML5およびその関連情報を取り扱うブログを紹介します。
HTML5の周辺情報ブログ
- Web標準Blogミツエーリンクスのweb標準に関する情報を追うブログ
- HTML5/CSS3の情報をクリップ! :: dotHTML5HTML5やCSS3の最新記事をなんでも集めているブログ
- Publickey - Enterprise IT × Cloud Computing × Web Technology / BlogHTML5に限らないがwebの最新動向を追っているブログ
- WWW WATCHこちらもHTML5に限らないが情報の多いブログ
HTML5のトピックを扱うブログ
- fragmentary上述のブログを更新している矢倉さんの個人的なブログ。HTML5、CSS3の仕様変更について注意すべき点等
- ヨモツネットHTML5、CSS3、WebGL等に造詣の深いヨモツさんのブログ
- HTML5でサイトをつくろう – Part 3HTML5関連のまとめ記事が多い。サイドバーからHTML5の学習記事が探せる
- terkel.jpHTML5のコーディングに関する考察の記事が多めのブログ
- Web Design KOJIKA17HTML5やCSS3について詳しいブログ
- Unformed Buildingコーディングについての話題を掘り下げているブログ
- HTML5.evangelist主にCanvasを使った試作を公開しているブログ
- WEBCRE8.jp僭越ながら当ブログも。HTML5に限っているわけではないんですが…わりと力を入れています!
参考になるHTML5の記事
http://techblog.yahoo.co.jp/html5/html5/
上の二つにもまして更にチェックの困難そうなリストですw webcre8自身が参考にしたものなので、まだまだあるに決まってます。
- ASCII.jp:50代でも分かったHTML5の基礎知識HTML5コーディングについての基礎の記事
- HTML5とは何かを簡単にまとめてみた – Yahoo! JAPAN Tech Blogこちらも基礎的な概要。上の記事より専門的なところをカバーしてます
- ASCII.jp:浜 俊太朗のHTML5マークアップ移行ガイドHTML5について詳しい解説が書いてある浜 俊太朗さんの連載
- ASCII.jp:HTML5要素のブラウザー実装状況を調べてみた現在の実装状況。結構まだ使えないのも多いです…w
- 「困った!HTML初心者にどうやって教えたらいいの?」HTMLとCSSの効率的な教え方 | 3streamer blog賛否両論ありましたがwebcre8は非常に理に適った考えだと感じました(批判はいささか脊髄反射かなという印象)
- [翻訳] これから HTML と CSS を学び始める君へ | Unformed Buildingとはいえ順を追って学ぶのもいいかなとも思います。海外のコメントの翻訳記事ですが、かなり凄いです。訳したまとりさんも凄いw
- HTML5 を学ぶための情報源まとめ | WWW WATCHまとめ。2009年の情報まとめ。英語の情報源はここにほとんどまとまってます
- HTML5の勉強に役立つチートシートやリファレンスのまとめ | コリス2011年の2月のまとめ(ほぼ1年半前)。英語のリソースだけど大体わかるようなものが多い
- HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか – かちびと.netこちらは2011年8月なのでほぼ1年前。当記事と主旨が近いです。
- [HTML5 入門]実用を意識した最小単位からの文書構造チュートリアル – WEBCRE8.jp当ブログの記事。これが一番オススメしたい記事ですが、他にも幾つか書いています★
HTML5に関するスライド
スライドも多くはないですが、日本語で制作されているものがあります。一応目を通したものの中で重要そうなものだけ。
- HTML5, きちんと。矢倉さんのスライド。HTML5がなぜ望まれなぜ生まれたか
- HTML5.jsの中身を見てみよう定番JSの中身を調べるスライド、の中身を書きだしたもの?
- HTML5最新動向HTML5に含まれる仕様にはどんなものがあるのか、APIの紹介
- HTML5を中心とした「Web標準」がどれだけあるのか、図にしてみると…… - Publickeyスライドを紹介した記事。冒頭の図でHTML5周辺全体を俯瞰できる
- HTML5 Web Design Workflow2012年10月の出来立てスライド。HTML5時代のワークフローの話
- html5でアプリの壁を超える方法現時点で作るHTML5アプリが抱える問題点と実装の勘所
HTML5で作られたサイトのデザインギャラリ
ギャラリに関しては日本語でなくとも見ることができるので、英語圏のものも幾つか。
- HTML5を実際に使用しているサイトを集めたHTML5専門のWebギャラリー5つ – かちびと.net2010年のまとめ。英語圏中心
- HTML5で制作されたサイトをまとめたギャラリーのまとめ | コリスこちらは2011年。数が増えてきてます。
- HTML5 Gallery » HTML5 Inspiration / HTML5 Showcase上記のまとめになかったので個別に紹介。
- スマートフォンサイト集めました。日本語のスマートフォンサイトギャラリ
- jQuery Mobile Examples – JQM Gallery最近全然触ってないけど、jQuery Mobileを使ったサイトのギャラリ。海外
- スマートフォンサイト デザイン集 AGT smartphone design gallery国内のサイトのギャラリ
HTML5で作られたコンテンツ
HTML5及びその周辺技術を使って作られたコンテンツ。ゲームなど、HTML5を作成する手段としてフィーチャーしている。
- HTML5で書かれたスゴいサイト – NAVER まとめまとめ。色々あってなんか凄そう
- おHTML5|2012年 ブラウザで祝うお正月KAYACのHTML5ミニゲームコンテンツ正月版
- HTML5杯|2012年 ブラウザで競う 熱い夏ロンドンオリンピックに合わせて作られたコンテンツ
- jsdo.it HTML5-Gamesjsdo.itに投稿されている、HTML5で作られたゲームを集めたサイト。さっきから明らかにKAYACばっかりなんですけど、まあそれだけ力を入れているということですねw
- Atari Arcade凄いんだけどイマイチ脚光を浴びないので紹介w HTML5で作られたブラウザゲームサイト
- Beercamp 2012HTML5で作られた飛び出す絵本
HTML5についてのコンテンツ
http://jsdo.it/event/html5cat/2012/autumn/
HMTL5でサイトを作るお役立ちツール、またはHTML5にフォーカスを当てたコンテンツ。こちらも使えるものは海外のものを含めて。
- 第二回全国統一 HTML5実力テスト – jsdo.it – Share JavaScript, HTML5 and CSS全15問のクイズが3シリーズ。webcre8は散々でした…かなり難しい問題。
- HTML5 Conference QuizHTML5 Conferenceの余興で行われたクイズの問題
- HTML5テンプレートジェネレーターHTML5のコーディングの最初のテンプレートを作成できる
- Tender Surrender: HTML5開発者に便利なツール14個英語だけど使えそうなツールまとめ。
- HTML5 Elements QuizHTML5のタグ108つ言えるかなゲーム。海外のサイト
- svg要素の基本的な使い方まとめSVG要素についてしっかり調べられたサイト
- canvas要素の基本的な使い方まとめ上記のサイトのcanvas要素バージョン
- HTML5 Security CheatsheetHTML5のセキュリティに関するトラブルシューティング的なサイト。ほんのちょっとだけ日本語訳されているトピックがある
- ふつうのユーザが知らないHTML5コーディングツール10選 – YAMAGUCHI::weblogわりとマニアックなツール群。海外のものです
- Google SwiffyGoogleの、SWFファイルをアップロードするとHTML5+JSのファイルに変換してくれるツール
- HTML5 Snippetsスニペットサイト。英語ですけどスニペットなので殆ど問題なし
終わりに
いかがだったでしょうか。あなたの知らない情報もきっとあったのではないかと思います。もし各情報について「こういうのがあるよ」というものがありましたら自薦他薦を問わないので教えてもらえるとありがたいですね!
告知:Roads to HTML5 というサイトを作ります
告知致します。webcre8も最近HTML5についての情報を追い続けてきましたが、近日中にHTML5の情報を追いかける人の学習を補助するサイト、「Roads to HTML5」を立ち上げます。
Roads to HTML5の目的
このサイトは、身も蓋もない言い方をするとリンク集です。とりあえずはこの記事の内容を一つのサイトとして独立させた、HTML5に関する情報が集積された場として作成します。これからHTML5を学んで行こうとする人の学習の助けになればと思います。
内容を常にブラッシュアップしていくため、個別のサイトとして制作することにしました。取り扱うものは私自身が学んだ技術についての情報となるため偏りが生じるでしょうが、時間をかけて補完して行きたいと思います。
HTML5のコンテンツを作っていきます
また、今後webcre8が作っていくHTML5についてのコンテンツの置き場所としても運用していきます。すでに予定しているものとしてはwebcre8が個人的に行なっている #HTML5のタグは百八つまであるぞ と言うハッシュタグのまとめサイト、その他「HTML5を学習する」ということにフォーカスを当てたコンテンツを作成し、公開していこうと思います。
公開の際はどうぞよろしくお願い致します★(宣言してケツに火をつける的なヤーツです)