kuni-hiro.com

【アウトプット】CSS Nite in OSAKA Vol.20 ～HTML5+CSS3　次世代規格特集～

今回のセッションは、今をときめく？　HTML5＋CSS3のお話でした。

ポイントだなと感じたのは、
【HTML5】……　「セマンティック」　「マシン・リーダブル」
【CSS3】……　「スケーラブル」　「マルチブラウザ対応」
です。

HTML5の特徴として、セマンティックとアクセシビリティが挙げられていました。
そのセマンティックを強化するのが、「セッション要素」。
セッション要素には「header」「footer」「nav」などがあります。
そう、これまでなら「ここがヘッダー部」「ここがナビ部」という具合にdivで定義していたところです。
これらをHTML5では「セクション要素」として明示的に定義します。
マークアップ内にセクション要素があることで、文書が属する部分が明確になり、
ロボットなどの機械で意味を正しく理解できる「マシン・リーダブル」な記述が実現できる。
人にとっても読みやすいアクセシビリティなマークアップが可能になる。
そしてそのことでSEOの効果もある。
なんだかいいことずくめですね（笑）

実際、HTML5で書かれたソースはとても読みやすいものでした。

セッションの最後には実在のサイト（今回のCSS Niteの告知サイト）を使って、
HTML5を正しくマークアップできているか？　という公開添削が行われました。
実際に目の前で正しいマークアップに直されていくのを見ることで、
はっきり頭の中でイメージできなかったものが次々と明確になった気がします。

また、HTML5にはAPIという、開発を助けてくれるライブラリがあり、
これを使うことでこれまではできなかった動的なサイトの作成が可能になります。
ある程度プログラミングの知識が必要なため少し敷居が高そうですが、
今後のために勉強しておく価値はあるように思いました。

CSS3のセッションでは、スケーラブルなサイト作成を強調されてました。
これからのスマートホンの時代には機器の特性を引き出すサイト作りが必要である、
ということです。
CSS3には装飾関係のプロパティが豊富なため、
画像を使用して作成していたナビゲーションなどもCSSのみで作成できてしまいます。
これならブラウザの幅に合わせてナビゲーションの並びを崩さずに変更する、
なんてことも簡単です。

もう一つの「マルチブラウザ対応」については、
現状ではCSS3のサポートがブラウザベンダーによって違う。
そのため、ブラウザによって見え方が違うのが当たり前に時代になる、というお話でした。
だから、同じ見栄えを求めるクライアントに対して説明して納得させることが
クリエイターには必要だ、という提言お話には説得力があって、うんうん頷かされました。

正直これまでは、HTML5もCSS3もまだまだ先でいいやと思っていたのですが、
これはぜひ触ってみたい！　いや触っとかないと！　という気になってきました。

HTML5とCSS3によって、これまでのコーディングやWeb制作の考え方が
大きく変わる可能性がありそうです。
乗り遅れないようにしないと！

2010年5月18日(火) 23:06 | カテゴリー：Webのこと。, 勉強のこと。 | コメント (2) | トラックバック (0)