hamashun.com

EDGEのソースコードをだいぶ修正しました。 article要素とsection要素の辺りが若干もにょもにょしてます。

あと、今週末にある実践CSS3 & HTML5 with Microformats ワークショップに参加します。 東京の方です。
会場でアレな感じのロンゲを見かけたらよろしくお願いします。

実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions Eastに行ってきました。

会場は恵比寿のとある会議室で、少人数（参加者10人弱くらい）で行われました。
講師はJohn Allsoppさんで、通訳にヤスヒサさん。 色んなお手伝い（という紹介でいいんでしょうか）にOli Studholmeさんというチームでした。 ヤスヒサさんは久しぶりにお会いしましたが、髪が伸びていました（お前が言うな）。

参加者の中で知ってる人はネコゼさんだけでした。 あの人とかあの人とか来ると思ったのになあ。。
休憩時間に技術評論社でHTML5の記事を書いた村田さんと名刺交換をさせてもらったりもしました。

hamashunフル装備

今回のセミナーはノートPCが必須条件で、かつ予定されている時間も長時間だった為、フル装備を持ち込みました。 具体的には以下の物です。

• Thinkpad X61
• センチュリー 液晶ディスプレイ LCD-8000U
• Realforce 89UB（キーボード）
• ロジクール G5 レーザーマウス G-5T（マウス）
• ハンドレスト

はい、殆ど自宅環境ですね。 でもおかげでかなり快適に受講する事ができました（デスクが広くて本当によかった）。
さて、雑談はこれくらいにして、ここから先が本番です。

前説

まずは今回の告知ページを例に出しての前説。 このページを見るだけでCSS3を実感できる。

• @font-faceによるフォントのダウンロード
• border-radiusによる角丸BOX
• text-shadowによるドロップシャドウ

など。 IEやFirefox3.5やOpera10、Safari4で見比べてほしい（IE以外全て開発途中版）。
ちなみにOpera10で見ると、テキストへのシャドウは効くけどオブジェクトへのシャドウは効かない。 Safari4はtransformも効く。

Part 1 ： マークアップ

まずは文書をグループ分けする

Johnは、プレーンテキストを前にして、いきなりタグ付けをするわけでは無い。 まずはテキストを意味で塊に分ける。 そしてその塊に名前を付けていく（実際にタイピングして書き込んでいくよう）。
名前の付け方は、いわゆるヘッダやフッタなど多くのサイトで使いまわせる名前と、そのサイト独自の名前とがある。

このやり方は、レゴ・ブロックのような物。 いきなり全体を見るのではなく、ブロックごとを見る。
そして英語ではこの塊の事を『セクション』と呼ぶ。

ここでヤスヒサさんが「でも、実際の仕事で使うのって、（サンプルファイルのような）キレイな文書じゃないよね？」とツッコミ。 それに対してJohnは「この時点ではデザインの事は考えない。 マークアップする時はコンテンツの事のみを考える。 このような手法の方が、ユーザはコンテンツを見に来るのだから結果的によい結果を与える。 理想的ではあるかもしれないが、この手法を紹介している」と回答。

マーク付け

先ほどグループ分けした塊をマーク付けしていくけど、そのプロセスには二つのステップがある。 一つはHTMLの要素を使う事。 もう一つはmicroformatsなど（つまりclassやid）で意味を与える事。

class名、id名は、さきほどのグループ分け作業で付けた名前を利用する事が多い。

最初の段階で、全ての情報に対して完璧なマークアップをしているわけではない。 ここでも最初は文書のみを意識する。

まあ、デザインを再現する際にはdivが入れ子になったりするので、閉じタグの後にコメントを入れている。

HTML5の要素紹介

ここでHTML5の要素の紹介があった。 ただしその数は多くなく、「セマンティックにするための要素を中心に紹介するよ」との事。

header要素

ヘッダーと聞くと文書のはじめにありそうな気がするが、途中にあっても問題ない。
内容にはhn要素が必須で、自身の入れ子はできない。 また、footer要素やsection要素なども含む事ができない。

footer要素

ページの下のほうにある。 コピーライトなど。
自身の入れ子は禁止。 仕様が固まってないから、まあ今後も色々変更があるかも。

section要素

恐らく一番よく使う新要素。 一つのグループを指す。 一つのテーマとしてグルーピングできる物をセクションとして作る事ができる。
sectionを開始したら、hn要素があった方がよい。 ただしこれば理屈的な事であって、仕様で決められているわけではない。 新しいセクションを開始した時のhn要素はh1でもいいしh2でもいい。
今回の例（サンプルファイルの事）では新しいセクションの開始でh1を使っていて、今回こうしているのは『新たなテーマが開始した』という考えによるもの。
「h1がたくさんあるとスタイルが面倒？」でも、子孫セレクタを活用したりすればいい話だよね。 デザイン優先じゃなくて文書優先だよね。

article要素

section要素は文書の中にある部品を大まかにグループにするけど、意味がわかるわけじゃない。 articleはセクションの中でも、意味があるグループに付ける。 典型例にブログの記事。
articleは難しい。 英語を話す国の人でも難しい！
判断基準を言うなら、『その部分だけでも成り立つものがarticle』。 独立して存在できる物。 検索エンジンが対応したら、ページの中からメインの部分を見つけやすくなるだろう。

article要素の入れ子も、section要素の中にarticle要素を入れる事も可能。

All article are section
not all section are article
（全てのarticleはsectionたるが、その逆は絶対では無い（適当訳：hamashun））

nav要素

ナビゲーション。 これを使うメリットに、アクセシビリティの向上が考えられる。 例えば音声ブラウザがこの部分を抜き出してカスタムナビゲーションにするとか。
あとはXMLサイトマップ（SEOでよくあるアレ）みたいのも自動でできるようになるかもね！

HTML5の構文

DOCTYPEはブラウザを標準モードにするためにある。 これがないと互換モードになっちゃうよ。

ヤスヒサさん：「イベント情報のリストがsection要素になっているけど、これはarticle要素ではダメなの？」 John：「これはあえてsection要素にしていて、これは記事ではなくてイベント情報の単なるリストだよ。 私は読める記事に対してarticle要素を使うようにしている。 まあ、今はまだ策定中の仕様だから、section要素にしておいた方が安心、っていうのもあるけど。」

HTML5とは言うけど、新しい要素こそあれどマークアップの作業は基本的にはHTML4.01やXHTML1.0と同じ手法。

みんな大好きIEの話

8はいいけど、7以下はダメ。 7以下は普通に書いても全部無視されるよ。

JSのライブラリがあって、それを使うとうまい事やってくれる。

JSオフの場合の対策として、HTML4.01などの要素を踏み台にしてユニバーサルセレクタを使って無理やり指定する手法もあるっちゃーあるけど、才能の無駄遣いレベル。 非現実的。

Firefox2について

まあサポートが終了してるよね。 基本的には対応していないんだけど、今回の告知ページを見ると、情報を得るのには問題ない。 ただちょっと見た目がズレたりする。
ちなみに、section要素の中にh1要素が入っている場合、h1が始まった時点でsectionが終了しているっぽい。

ちなみにFirefox2に関してはHTML 5 の新要素の解析のされ方で気をつけるところ | ヨモツネットにとても詳しい解説が載っています。

microformatsについて

大体既知の内容だったので割愛。
「microformatsって何？」という人はhamashunの以前の記事、社内勉強会（microformats）で使った資料を公開しますを読むといいかと思います。

ランチタイム

幕の内弁当と緑茶。 JohnもOliも箸を上手に使っていた！
ちなみにカントリーマァムとキットカットとバナナが食べ放題だったｗ

Part 2 ： floatとposition

だいぶ既知の内容だったので割愛。

Part 3 ： CSS3

Q&Aコーナー

Q:clearfixやoverflowでのclear効果に替わるなんかいい手法ないですか？

A:ないね！

Q：article要素がたくさんあった場合、相対的に重要度は下がるのか？

A:No. article要素の原点はAtom配信フォーマットだと思う。 たくさんあるのは問題ないよ。 検索エンジンはarticleに注目してインデックスするだろうから、ちゃんとマークアップしているなら大丈夫。

Q：IEでHTML5が使えるようになるライブラリは重いの？

A:コード自体はとても短い。 でもスクリプトだから使えばその分重くなる。 逆に考えて、速度がとても重要なサイトなら、今あえてHTML5を使わずにHTML4.01やXHTML1.0を使った方がいいよね。

Q:divは無くなってsectionになる？

A:Yes.

Q:ちょ、「sectionは新しいdivじゃねぇぞ！」ってdisられたんでｓが！！１！（20代男性）

A:ああ、そういう意味ね。 それは、『デザインのためのdiv』って事だと思うけど、そもそも『デザインのための要素』という存在自体がCSSの進化によって無くなっていく。

divは元々『意味を持たない』要素だけど、実際はテキストをグループ化する目的で使われている事が多い。 それに意味を持たせたのがsection要素。 さっきのはそういう意味での『divは無くなってsectionになる』という意味。

懇親会

蕎麦屋でした／(^o^)＼　うどんはなかったです＼(^o^)／　←蕎麦アレルギー
肉とかおいしかったです。

懇親会でもTech話題をしたかったんですけど、あんまりできなかったな…。 ちょっと残念。

感想など

HTML5とCSS3関連の内容は凄くよかったです。 質問がしまくれたのも良かった。 ただmicroformatsやfloat・positionの辺りは既知の内容だったので、ちょっと退屈でした。

進行が同時通訳ではなくて、英語→日本語→英語→日本語 という形式で、これは個人的にはとても良かったです。 このレポートを見れば分かるように僕はメモを取りまくるので、速度的に非常にやりやすかったです。
考える時間や質問したい内容を脳内で熟成させる余裕があったのも良かったです。

価格ですが、やっぱりちょっと高いかなと思います。 早期割引で3万円台、割引が終了したら4万円台なので。
ヤスヒサさんとはよくお会いしているので知ったる仲ですが、JohnさんもOliさんもとても親切でフレンドリーで、質問にはじっとこちらの目を見て聞いてくれて（外国の人らしい仕草！）、とても好印象でした。 技術話以外の雑談も普通に楽しかったです。