MarkupCafe Osaka Vol.1 に参加してきました

- by konitter

先日12/20(金)に開催されたhtml5jマークアップ部主催のイベント「MarkupCafe Osaka Vol.1」に参加してきましたので簡単にレポートします。

参加者はいくつかのチームに分かれ、出題されたお題についてチームごとに最適なマークアップを考えます。チーム内で話し合って決めたコードはjsdo.itに書いてハッシュタグ#html5jを付けてTwitterに投稿、そのコードをプロジェクターで映してみんなでレビュー、という感じ。

お題1 「フッター」

お題1

1問目は企業サイトで使われるようなイメージのフッター。マークアップするうえでの個人的にポイントだと思うものを3つ挙げてみます。

  • 上の「HOME >」
    • パッと見でパンくずのように見えるからulや`olでマークアップしがちだけど、出題者の村岡さん(@bathtimefish)によると「これはただのHOMEへのリンク」とのこと
    • 他のページではこの部分がどうなるかなどデザイナーに確認しましょうねっていう。エンジニアの勝手な想像でマークアップするの(・A・)イクナイ!!
  • ロゴマークと会社名(日本語表記と英語表記)
    • 会社名の部分をテキストで書いて配置する人もいるかもしれないけど、個人的にはロゴマークと会社名全体を1枚の画像でいい
    • 時間に余裕があってこだわりたい人は、SVG使ったりWebフォント使ったり好きにすればいいかと
  • 「お問合せ」の電話番号・メールアドレスおよび、神戸・東京本社の住所
    • ポイントとなるのはaddress要素の使い方。どの範囲をくくるか
    • このデザインでは明示的に「お問合せ:」というテキストがあり、その横に電話番号とメールアドレスが書かれているので、個人的にはその範囲がaddressの範囲になると考えた
    • その下の神戸・東京本社の住所まで含めるかどうかは、このページ(ドキュメント)の問い合わせ先となりうるかどうかで決まるはずなので、それはデザイナーやあるいはクライアントであるこの企業に確認が必要な部分だと思う

上記のポイントもふまえて、個人的にマークアップするならこんな感じ。

<footer role="contentinfo">
	<div><a href="/">HOME</a></div>
	<div>
		<img src="logo.png" alt="株式会社バスタイム商事 Bathtime Bussiness Corp.">
		<div>
			<address>お問合せ:<a href="tel:012000000000">0120-0000-0000</a> <a href="mailto:information@bathtimeshoji.com">information[at]bathtimeshoji.com</a></address>
			神戸本社:兵庫県神戸市◯◯◯◯◯ 11-11-11 ◯◯ビル 11<br>
			東京本社:東京都渋谷区◯◯◯◯◯ 22-22-22 ◯◯ビル 22
		</div>
	</div>
	<div><small>copyright (c) bathtimeshoji. All Rights Reserved.</small></div>
</footer>

お題2 「パンくずリスト」

お題2

2問目はいわゆるパンくずリスト。定期的に話題になるある意味ネタ化しているUIのひとつで、HTML5.1 Nightlyのドキュメントのパンくずリストのセクションを見るとコード例に「→」が使われていたりして、W3Cでも明確な答えが出せていません。

ただそうなっている理由自体は単純で、パンくずリストが置かれる状況によって、また情報提供者の意図によってどんなマークアップがふさわしいかが異なってくるからです。なので、パンくずリストだけのデザインを見せられてマークアップするのは本来ならそれはとても難しいことのはずです。

また、そもそもリストかリストでないかという議論もありますが、取り回ししやすさを重視して、個人的には極々シンプルにマークアップしたいところです。

<ul class="breadcrumb">
	<li><a href="/">Markup Cafeトップページ</a></li>
	<li><a href="/shop/">店舗情報</a></li>
	<li class="current">ドリンク・フード</li>
</ul>

まとめ

自分のコードを振り返るようなことをあまりしない、あるいは他人のコードや考え方などを普段気にせず制作されているような方は特に、非常に刺激的なイベントだと思います。たまにはこういうのもいいですよ。また是非参加したいです。