Chrome+HTML5 Conferenceのデザイナーズトラックで学んできたことを簡単にまとめてみました。
主にあとで自分が詳しく調べるとき用の備忘録です。
内容がすごく濃くて、HTML5初心者の私にとって為になるお話ばかりでした。

HTML5について

(1) HTML5では何ができる？

• セマンティックなコンテンツプラットフォームの実現
  ⇒Webページの中に記述された情報が何を意味するのかをソフトウェアが理解しやすくなる
• リッチなアプリケーションプラットフォームの実現
  ⇒HTML5関連のAPI利用や、Canvas、WebGL、SVGなどで表現の幅を拡大。

(2) 使うとこんな良いことが…！

• 意味のあるマークアップによって、検索性が向上する。
• ページの要素が整理され、視覚障害者、聴覚障害者の方にとって情報が伝わりやすくなる。
• CanvasやWebGL、SVGなどの利用により、高度で多彩なグラフィックの表現が可能になる。

(3) マークアップする上での注意点

HTML5では文脈に沿ったマークアップが必要なため、要素を正しく理解することが必要。

HTML5では旧要素も再定義されている。

要素の数は全部で108個で、そのうち、HTML5で新たに追加されたのは24個。
がんばって覚えようー！

CSS3について

(1) CSS3でできること

• Media Queriesで、色々なデバイスへ条件分岐ができる。
  ⇒ブラウザのサイズによって表示を変えられる。
  参考：[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例 | コリス
• 新セレクタで、よりリッチな表現ができるようになった。（グラデーションや角丸など）

(2) 使うとこんな良いことが…！

• 画像でやっていたことがCSS3でできるようになる。
  ⇒転送量が少なくなるので、表示は早くなる。
  ⇒内容の変更にダイナミックに対応できる。（色を変えたり、シャドウを薄くしたり濃くしたりなどの変更が容易）

(3) 問題点

ブラウザによって使えるセレクタが限られていること。
その差異をどうするか？は考えておく必要がある。
考え方としては、

• Progressive Enhancement
• Graceful Degradation
• Regressive Enhancement

などがある。それぞれの考え方については、ブラウザによってHTML5やCSS3などの対応が違う中で、私たちはどうやって使用していくかへ

スマートフォンついて

(1) スマートフォンの特徴

• 小さなタッチスクリーン。
• Portrait（縦）とLandscape（横）で解像度が異なる。
• スマートフォンの機種によっても解像度が異なる。
• ブラウザのほとんどは、webkitベース。

(2) 注意点や気を付けたいこと

• ズームイン・アウトや水平スクロールを必要とするページは操作しづらい。
• 縦方向にスクロールするだけで全てが見えるページをつくる。
  ⇒Viewportを使う。
  参考：Viewport [iPhone生活]
• リンクは指で押すので、近くにリンクが複数あると、間違えやすい。
  ⇒リンクをボタンにしたり、paddingなどを使ってヒットエリアを大きくする
• 一部CSS3で互換がないので、ブラウザごとに書き分ける。
• アニメーションは、アニメGIFやCSS Transitionだと古いスマートフォンで対応していない。
  JavaScript+Canvasは、ほとんどのスマートフォンで対応している。

(3) 軽いページにするための方法

• JavaScriptやCSSをインラインで記述
• 画像などをdata scheme uriで記述
  参考：データURIスキーム | MOL
• 高解像度用の画像と低解像度用の画像の用意（解像度判別のJavaScriptを併用）
• HTTP Expireを使う
  参考：Webサイトの高速化 ルール3　Expiresヘッダーを追加しよう! (Yahoo! developer netoworkより翻訳) | 株式会社インターオフィス
• HTML,CSSの圧縮
  参考：Webサイトの高速化 ルール4　コンポーネントを圧縮しよう! (Yahoo! developer netoworkより翻訳) | 株式会社インターオフィス
• Google Closure CompilerによるJavaScriptの圧縮
  参考：Yuyak.com » GoogleのClosure CompilerでJavaScriptを圧縮
• CSSスプライトの利用

SVGについて

(1) SVG（Scalable Vector Graphics）とは何か

2Dのベクター画像をXMLで記述した言語のこと。

(2) SVGの良いところ

• 拡大しても劣化しない
• 容量のコストダウン
• 画像として使えるが、その中にリンクやメタ情報も埋め込める（画像の形によってリンクを貼ったりできる）
• スクリプトも使える

SVG Demo
http://bit.ly/svgdemo

IEでもRaphaelというJavaScriptのライブラリを使うことでSVGを使用できる。

ブラウザによってHTML5やCSS3などの対応が違う中で、私たちはどうやって使用していくか

考え方3つ

• Progressive Enhancement
• Graceful Degradation
• Regressive Enhancement

Progressive Enhancement

まずは最低ラインの対応をし、その上で新しい機能をのせる。
例）四角の角を基準にして、モダンブラウザでは角丸にする。

Graceful Degradation

基本は新しい環境にあわせ、壊れない程度にグレードダウン。
例）角丸やグラデーションなどの使用を基準にし、対応していないブラウザでは四角の角でベタ塗りにする。

Regressive Enhancement

標準を基準にし、対応していないものは補う。
例）CSSハックや画像などを使用し、他ブラウザでも同じ表示にする。

詳しい内容がこちらにまとめられておりました。

便利なツール

Modernaizr

HTML5などの対応状況を調べるJavaScriptライブラリ。
調べるだけで、対応はしないが、htmlタグにclassがつくのでそれを利用できる。

Polyfills

標準機能を真似するJavaScriptライブラリ。
IE6やIE7の独自実装などを利用して、表示をモダンブラウザに近づける。