でろぐのロゴ 豚さんブーブー

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

2010年8月30日 (月)

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

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

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

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

 

ここにh1

ここにh2

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

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

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

コードだとこんな感じ

 

ここにh1

<p>ここに本文</p>
ここにフッター

注目すべきポイントはやはりコンテンツ内に重複するheaderやfooter要素が内包できる事ですね。
要素についての詳細ははこちら

time
時間を定義する要素がtime要素です。コンテンツ内で表記すべき時間に関する部分を定義する時に使います。
僕的にはまだ完全に理解でききれていませんので今後の勉強課題です・・・。
コードだとこんな感じ

2009-08-30

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

figure
本文から参照する画像とか表とかを定義する要素がfigure要素。
本文から参照するという意味合いなのでレイアウト目的に使用してはいけませんよというのが引っ掛けポイントで、今回しっかり引っかかってしまった要素です。
コンテンツの本筋にかかる部分の画像と注釈のセットが使用対象なのでコンテンツ内でも比較的重要度が高いという認識がなされるのはまず間違いないと思います。「この説明にかかる図表はこれだ!」というのにかっちりくる時に使うようにします。

コードだとこんな感じ

画像の代替文字列
画像の注釈

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

blockquote
前からある要素で引用をするときに使う要素なんですけど、HTML5からはsectionと同じようなセクショニングコンテンツのような位置付けになるみたいです。ということでこのタグ内に見出し要素を入れることが出来ます。

コードだとこんな感じ

引用タイトル

引用本文

要素についての詳細ははこちら
でも僕は今回そのことよりも勉強になったのが引用についての認識でした。
課題にはカンプの下の部分に「ここ文章は引用です」と書いてあったのですがソース元がないし、コンテンツ作成者が集めた独自コンテンツならば引用ではないのではないかという事で僕たちのチームではblockquoteでくくらなかったんですが、他のチームの方の説明でも色々意見が分かれてました。というのも「引用と書いてあるがソースがない」という部分。ネットに慣れ親しみすぎるとついついソースありきで引用の有り無しを判断してしまいがちですが、例えばお客様の声のような実際に人が紙に書いたものをサイト内のコンテンツに使用する場合でも引用として成立するという考え方もあるという事です。考え方は人によって違うのは当然なのでどれが正しいのか判断しかねる部分ではありますがそういう考え方も出来るのかとけっこう衝撃が強かったです。もっと広い視野で物事を考える・主観的になりすぎない癖を付けていこうと思いました。

em・strong
文字列の強調を表すこの2つの要素はこれまで似たような使い方だったのですがはっきりと意味合いを分けられるようになっています。
意味合い的にはemが単なる強調で、strongがコンテンツ内での重要性を定義付けるものです。これによって文書内での意味合いによってemとstrongをしっかり分けてマークアップ出来ます。これまでが微妙に分かりにくかったのでこの仕様変更はうれしいです。

コードだとこんな感じ

ここは強調文章がここに入る※強い重要性

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

aside
メインのコンテンツには関係しているけど、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページに使う要素がaside要素。セクショニングコンテンツなので見出しを含む文書構造になります。
今回のお題ではサイト内のバナーやおすすめ商品の部分でasideが使われることが多かったのが印象的です。

コードだとこんな感じ

いぬ

犬ってかわいいよね

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

small
サイトの著作権表記に使用することが多い細目を定義付ける要素がsmall要素。
僕は普段あまり使わないんですが、今回は皆さんしっかり使ってました。
よくよく調べてみるとここしかないなって感じでフッターのコピーライト表記に最適だったりします。

コードだとこんな感じ

制作者連絡先

© copyright 2010 制作者 All Rights Reserved.

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

という感じです。その他にもたくさん勉強になるポイントがありました。
参加されている皆さんのレベルがものすごく高くて僕のような中途半端な人間ではまだまだ勉強不足な感が否めませんでしたが、実際に参加して一緒に作ってみて、作った経緯の説明を聞いてかなり充実した内容でした。
おかげでかなり勉強になれましたし、自分自身のモチベーションアップにも繋がりました。
プレゼンするという機会もとてもいい経験になりましたしね。
次回以降も日程の合う限り参加して行こうと思いました。

シェアする