ドットコーダーセッション3「ゆるふわ愛されHTML5ポークチョップ」に参加してきました。

土曜日に何回か参加している勉強会ドットコーダーのセッション3「ゆるふわ愛されHTML5ポークチョップ」に参加してきました。 変な名前ですが要はHTML5を勉強しようというものでした。 HTML5はまだ策定中のHTMLの新しい仕様なのですが、わりかた出来てきているのでここらで押さえておいた方がいいなと思っていたので参加しました。 今回の勉強会はいつもと違ってワークショップ形式という事で参加者を6つのチームに分けて、実際に主催者が用意してくれたデザインカンプを元にデザインをHTML5で時間内にチームでコーディングするというものでした。 制限時間後は各チームで「どうしてこうなったのか？」というコードのプレゼンを行いました。

ワークショップ自体は知ってはいましたが実際にやってみてかなりいい刺激を受けました。 というのも基本的に制作をする時って個人でするものなのでコーディング中に複数人とコーディングの仕方について話すということがないので他の人の作業の仕方がみれたのも面白いポイントでした。 僕のいたチームは僕を含め3人だったのですがPCで入力してもらう係とアイデア出しと検証の係、プレゼンで話す係を割り当てて僕はプレゼンで話す係を担当しました。 他のチームは他のチームでそれぞれ独自に色々と面白そうに取り組んでいました。 なので最終的なプレゼンもチームの個性がでていて非常に面白かったです。

で、今回実際にHTML5でコーディングを行ってものすごく勉強になったのでちょっと忘れないように覚書をしておこうと思います。 (ここから下の紹介分はかなり自分視点で書いてます。なので「ここは間違いだ！」と思われましたら突っ込んでください)

hgroup ｈ1やｈ2みたいな見出し要素をグループ化してまとめておく時に使います。 使い方が微妙かなーと思いつつも文書の定義づけに意外と使い道がありそう。 将来的にはSEOでもけっこう重要になってくるのではないかと思います(その時までSEOという手法が使われていればの話ですが。) コードだとこんな感じ

 
ここにh1
 
ここにh2

要素についての詳細ははこちら

<input type="search" /> これは全く知らなかったのでけっこううれしい発見だったんですがこの新しいinputの要素を使うと検索時に入力したキーワードをキャンセルするボタンみたいのが出てきます。だからどうしたという事ではないんですがサイトによく使われるサイト内検索用に定義された要素というのがいいなと思いまして。

article サイトの内の「単独で再配布でき再利用できる」部分を定義する要素がarticle要素。 わかりやすくいうとブログのFeedで配信される部分のようなイメージです。 (ブログFeedにはナビゲーションとかパンくずとか入ってないですよね。普通は。) ここがしっかり定義されていればここを見ただけで「このコンテンツがどういうものであるか」という判別がつくようになるという事なので将来的にユーザビリティ向上のために重要視される要素になるのではと考えています。

コードだとこんな感じ

 

  
ここにh1
 
<p>ここに本文</p>
 

  ここにフッター