日記 | ヨモツネット

日記

CSS Nite LP 9, HTML5 マークアップのセッションの資料と補足など text ja 2010-04-18 http://www.yomotsu.net/wp/?p=562 HTML 5, 執筆 / 講演など

CSS Nite LP 9, HTML5 マークアップのセッションの資料と補足など

2010年4月18日日曜日

2010 年 4 月 17 日に開催された CSS Nite LP9 の HTML5 マークアップのセッションに登壇いたしました。当日使用した一部の資料を以下に公開し、あわせて補足などをまとめました。

おさらいと補足

HTML5 では従来の XHTML1.0 で存在した要素型に加え、28 の新しい要素型が増える予定です。また、いくつかの既存の要素型は意味がかわります。

セクション関連の要素

セクショニング系の要素型として、section, article, aside, nav が新たに登場予定です。これらの要素型を利用することで、HTML の構造をより明確にすることができます。セクショニング系の要素型は基本的に見出しの影響範囲を包含するように利用します。

例えば、今回利用したサンプルのページでは、

body : なぞの野菜市場
- nav : (見出しなし)
- article : 取り扱う野菜について
  - section : 生産者について
    - aside : (見出しなし)
  - section : 農場について
- nav : 商品一覧
- aside : (見出しなし)

のような、章の入れ子構造と、役割を取得できます。この仕組みはアウトラインと呼ばれ、HTML5 の 4.4.11.1 Creating an outline に明記されています。nav : (見出しなし) の箇所のように、アウトラインに出現させるために見出しがないブロックをセクションとしてマークアップすることもできます。

HTML5 が安定した規格となり広く利用されるようになれば、検索エンジンや支援技術 (アクセシビリティ用の機器など)、や Web サービスなどが Web ページから取得できるアウトラインを有効に利用するかもしれません。

time 要素型

time 要素型は特定の日時をの日付や時刻を正確に示すための要素型です。CSS Nite LP では

<time datetime="1957-12-24">18歳の誕生日</time>

のように例を紹介しましたが、時間までを正確に示すこともできます。例えば

<time datetime="2010-04-17T06:30:00+09:00">昨日の6時半</time>

のように記述します。属性値末尾の +09:00 は日本のタイムゾーン (世界時からの時差) です。

また、記事の投稿日を意味する pubdate 属性をあわせて指定することもでき、その場合は

<time datetime="2010-04-17T06:30:00+09:00" pubdate="pubdate">2010月4月17日</time>

のよう記述します。これにより記事がどれくらい古いのかがわかるので、Web から 2010 年 4 月以降に投稿されたドキュメントを検索、などといったことができるようになるかもしれません。

video 要素型

video 要素型は動画を埋め込むことができる要素型です。羽田野さんのセッションでも紹介されていましたが、以下のようにブラウザーによってサポートしている形式が違います。そのため、今回ご紹介した作例のように複数のリソースを参照します。

<video width="320" height="240" controls="controls">
<source src="images/video_01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt
<source src="images/video_01.ogg" type='video/ogg; codecs="theora, vorbis"' />
<p>畑の様子。冬なので作物は少なめ</p>
</video>

各ブラウザーがサポートする形式は以下のとおりです。

各ブラウザーが対応する video コーデック
	Firefox	Opera	Safari	Chrome	IE6~8	IE9
H.264 (mp4,mov)	×	×	○	○	×	○?
Ogg Theora	○	○	×	○	×	?

動画形式としては、MP4 などの H.264 が一般的ですが、H.264 は Apple や Microsoft など、一部の企業のみがライセンスを持つコーデックです(AVC/H.264 Licensors)。H.264 について、現在は無料で利用することができますが将来的にどうなるかは不明なため、Mozilla や Opera はオープンなライセンスの Theora のみをサポートしています。最近では Google が VP8 というコーデックをオープンソース化~~しました~~する計画のようです。。各ブラウザーによる対応コーデックに関しては今後まだ変化してきそうなので、その動向には敏感になっておくとよさそうです。

なお、MP4 などの形式から Ogg Theora に変換する対応にはシンプルな MiniCoder や多機能な SUPER c が便利です。

最後に

CSS Nite LP 9 でのご清聴、ありがとうございました。

導入編のような位置づけだったために、あまり深い内容にならず、深く掘り下げた情報を期待していた参加者さんには満足いただけないであろう内容となってしまいましたが、今後別の機会やこのブログにもうすこし濃い情報 (たぶん SVG ばかりですが…) をまとめていきたいと思います。

コメントはありません

web designing と web creators に寄稿しました text ja 2009-08-29 http://www.yomotsu.net/wp/?p=543

web designing と web creators に寄稿しました

執筆 / 講演など

2009年8月29日土曜日

web designing 9 月号と web creators 10 月号に寄稿しました。

web designing 誌では特集『CSS プロパティに強くなる』で font 関連の設定方法の解説を担当しました。この特集ではよく使う CSS プロパティーをピックアップして実務にいかせる基本的な内容を紹介しています。初級者さん向けの基本的な内容です。

web creators 誌では特集『スタイルシートの差がつく見せ技、92 種 CSS デザイン表現最新最強テクニック』で応用的な内容や CSS 3 を絡めた将来期待できるテクニックを紹介しています。自分は 5 ネタを担当し、どれも IE 6 で動作するすぐに実務に活かせる内容を解説しました。中、上級者さん向けの内容です。

よかったらお手に取っていただけると嬉しいです !!

コメントはありません