【レポート】CSS Nite 4周年記念イベント

HTML5、きちんと。／矢倉眞隆さん

• HTML5は、「文書」が目的だったHTML4.01やXHTMLに対し、「Webアプリケーション」の役割も担う
• よく使われるclass / idが要素になっている
  • header
  • section
• 決まった定型句がシンプルになっている
  • !DOCTYPE html
  • meta charset="UTF-8"
• フォームのinput要素のtypeもイロイロに
  • input type="email"
  • input type="datetime"
• HTML5のセクション＝文書構造をより明確にする、アウトラインを意識する
  • section（章、まとまり）
  • nav（ナビゲーション）
  • article（記事、自己完結できるセクション）
  • aside（補足的な情報、サイドバー）
• レイアウト目的で要素が必要な時はsection要素ではなくdiv要素を用いる
• HTML5の勧告は2010年9月を予定しているがムリ！ 本格スタートは2012年頃？
• ムリをせず、実装されている機能から、非対応ブラウザでもダメージが少ないものから使っていく
• HTML5の仕様がドラスティックに変更されるリスクも認識しておく

HTML5のメリットを活かしたコンテンツアイデア／山田敬美さん

HTML5に比較的対応しているSafariに絞るなら、IPhoneアプリ風なものを作れるよね・・・ということで、カヤックのサービス「イケメンホイホイ」をHTML5で実装してみて、iPhoneアプリ風にしてみたというセッションでした。

• Objective-Cを覚えなくても、HTML+JavaScriptでアプリがつくれる
• オフライン機能を使って必要な時だけ通信するようにつくれる
• Flashが使えないので、canvas要素で動きを再現できる（実際はHTMLではなくJSで再現してました）
• input要素のtype属性については、Safariでも実装不十分
• HTML5ではalt属性の扱いが厳密に規定された
  • img src="XX.jpg" alt="imgの説明"
    → 「重要な要素」であることを意味し、ブラウザ上では画像offの場合代替テキストが表示される
  • img src="XX.jpg" alt=""
    → 「装飾／補足」を意味し、ブラウザ上では画像offの場合レンダリングされない
  • img src="XX.jpg"
    → 「重要な要素」であることを意味し、ブラウザ上では画像offの場合「画像」と表記される（ブラウザにもよるかな？）

HTML 5（現段階の WD）のセマンティクスの実装／小山田晃浩さん

• 正しいHTML5を書くためには「アウトライン」の理解がカギになる
• 文書のアウトラインとは、要素の入れ子関係でできるツリー構造とは別で、見出しのレベルから構成されるツリー構造
• 見出し（h1,h2,hgroup）、セクショニングコンテンツ（section,article,aside,nav）、セクショニングルート（body,blockquote,tdなど）でアウトラインが構成される
• 重要なのは文脈にあわせた「見出し」「セクショニングコンテンツ」「セクショニングルート」
• セクショニングコンテンツの使い分けは難しい。見出しの単位をsection要素で囲う
• セクションを乱用するのではなく、できるところからはじめる

小山田さんがおっしゃっていた「『アウトライン』の理解がカギになる」に尽きるのではないでしょうか。ここをしっかり理解することがHTML5のポイントですかね。
Twitter上でも「#cssnite40rep」で当日の様子が流れているので、詳しくご覧になりたい方は是非。

自分にとって「HTML5」は、勉強しなくちゃ！って思いながらも、重い腰がなかなか上がらないところだったので、ホント行ってよかったセミナーになりました。