こんにちは！html5jマークアップ部 部長の村岡です。 この記事では2013年の12月20日に開催されたMarkup Cafe OSAKA Vol.1のイベントレポートをさせていただきます。
東京で2回の開催に続いて3回目であり、はじめての地方開催となるMarkup Cafe、大阪では20名以上の方々に参加いただき、大変盛り上がりました。たくさんの方々からさまざまな観点からのマークアップ案がたくさん出てきて、検討が白熱しました。
なお、Markup Cafe OSAKAの開催にあたっては準備や開催告知などで地元のマークアップ好きの方々にご協力いただき、開催が実現しました。この場を借りて改めて御礼申し上げます。ありがとうございました。
MarkupCafe OSAKAの実現には、以下をはじめとする方々にご尽力いただきました。 スタッフのみなさんには今後もhtml5jマークアップ部員としてMarkupCafe開催にご協力いただく予定です。（敬称略）
- 額賀順子 @nukaga
- なかしず @nakashizu
- 松田 @matsudasu
- ながとみ ちはる @luchino__
OSAKA Vol.1 マークアップ事例の解説
今回、初の地方開催となるMarkupCafe OSAKA。 大阪はどんなデザインに対して、どのようなマークアップが考えられたんでしょうか。大阪では開催メンバーの要望により、過去のMarkupCafeで出題された問題にトライしてみる。ということにしました。通常は3問程度出題するんですが、開催時間の関係上、2題となりました。
1問目 Webページのフッタ
最初はTokyo Vol.1で出題された問題から、Webページのフッタレイアウトのパターンです。フッタというと、画一的で以前制作したページから何も考えずにコピペしてつくってしまうことも多いんじゃないでしょうか。そんなフッタのマークアップをあえてよく考えてみると、新しい発見があるのかもしれませんね。大阪でも東京都同様さまざまなアイデアが出されました。
<footer>
<!-- パンくず -->
<ul>
<li>home</li>
</ul>
<address>
<dl>
<dt><img src="xxxx.png" alt="株式会社バスタイム商事 Bathtime…" /></dt>
<dd>
<dl>
<dt>お問い合わせ</dt>
<dd>xxxxxxxxx</dd>
<dt>神戸本社</dt>
<dd>xxxxxxxxx</dd>
<dt>東京本社</dt>
<dd>xxxxxxxxx</dd>
</dl>
</dd>
</dl>
</address>
<small>copyright</small>
</footer>
Aチームのマークアップのポイントは以下です。
- 全体をfooter要素で囲む
- “HOME>”をパンくずとみなしul liでマークアップした
- ロゴ・会社名はimgにして会社名はalt属性値で代替テキストとして提供
- ロゴ〜お問い合せ情報までをaddress要素で囲む
- 著作権表記はsmall要素で
- お問い合わせ、本社の所在地は定義リスト(dl dt dd)としてマークアップ
まず、HTML5で登場したfooter要素で全体を囲んでいます。footerはその名の通り、セクションのフッタを表す要素です。次に、テキストリンク「HOME>」をパンくずナビゲーションとみなして、ul , liでマークアップしました。
ロゴと会社名はひとつの画像データで提供し、alt属性値に社名等を記載することで代替テキストを提供、社名、お問い合せ、本社所在地までをページの連絡先情報とみなしてaddress要素で囲っています。
お問い合せ、各本社情報はdl, dh, ddで定義リストとしてマークアップ。著作権の表記はHTML5で新たに意味付けされたsmall要素で囲っています。
<footer><ul> <li>HOME</li> </ul> <div> <p><img src="logo.jpg" alt="株式会社 バスタイム商事 Bathtime Bussiness Corp."><p> <div> <dl> <dt>お問合せ</dt> <dd>0120-0000-0000</dd> <dd><address><a href="mailto:ifontomation[at]bathtimeshoji.co.jp">ifontomation[at]bathtimeshoji.co.jp</a></address></dd> </dl> <dl> <dt>神戸本社</dt> <dd>兵庫県神戸市OOOOO 11-11-11 OOビル</dd> <dt>東京本社</dt> <dd>東京都渋谷区OOOOO 11-11-11 OOビル</dd> </dl> </div> </div> <p><small>Copyright (c) bathtimeshoji All Right Reserved.</small></p></footer>
Bチームのポイントはおおよそ以下でしょう。
- お問い合わせと本社の所在地は別々の定義リストとした
- メールアドレスのテキストリンクをaddress要素で囲った
footer, ul, li, small, 各要素の使いどころはAチームとほぼ同じ。 考え方が異なるのはお問い合せと各本社所在地は別々の定義リストとしてそれぞれ異なった情報だということを明示しているところでしょうか。さらにメールアドレスのみを、address要素で囲っているのも特徴的です。
<footer>
<ul class="path">
<li>HOME</li>
</ul>
<div>
<div>
<img src="logo.png">
<p>株式会社バスタイム商事</p>
<p>Bathtime Bussines Corp.</p>
</div>
<div>
<dl>
<dt>お問い合わせ</dt>
<dd>0120-0000-0000</dd>
<dd>information[at]bathtimeshoji.com</dd>
</dl>
<dl>
<dt>神戸本社</dt>
<dd>兵庫県神戸市○○ 11-11-11 ○○ビル 11</dd>
<dt>東京本社</dt>
<dd>東京都渋谷区○○ 11-11-11 ○○ビル 22</dd>
</dl>
</div>
</div>
<small>
copyright (c) bathtimeshoji. All Rights Reserved.
</small>
</footer>
Cチームのポイントは以下です。
- ロゴ画像のみをimg要素で提供し、会社名はp要素でテキストで提供した
- Bチームと同様お問い合わせと本社所在地を別々の定義リストとした
- CSSでのレイアウトを考慮してロゴ、会社名のブロックとお問い合わせ、本社所在地のブロックをdivで切り分けた
footer, ul, li, smallの使いどころは各チームとほぼ同じ。 このチームではロゴマークのみを画像とし、社名はpでマークアップすることで可能なかぎりテキストデータを提供しています。お問い合せ、本社所在地についてはBチームと同じ別々の定義リストとしてマークアップしています。
address要素は使用せず。CSSでのレイアウトに配慮してロゴ&社名とお問い合せ&本社所在地をdiv要素で別々のブロックに切り分けています。
<footer>
<ul class="breadcrumb">
<li>HOME</li>
</ul>
<a href="/"><img src="logo.png" alt="株式会社バスタイム商事"></a>
<address>お問合せ：0120-0000-0000 information[at]bathtimeshoji.com</address>
<p>神戸本社：兵庫県神戸市○○○○○11-11-11 ○○ビル11</p>
<p>東京本社：東京都渋谷区○○○○○22-22-22 ○○ビル22</p>
<p><small>Copyright © bathtimeshoji. All Rights Reserved.</small></p>
</footer>
Dチームのポイントは以下です。
- お問い合わせ情報をaddress要素で囲った
- 本社所在地は定義リストではくp要素で囲った
footer, ul, li, smallの使いどころは各チームとほぼ同じ。 電話番号、メールアドレスを連絡先の情報とみなし、address要素で囲いました。お問い合せ、本社所在地を定義リストでなくpでマークアップしているのも今までのチームと異なるところですね。
<footer>
<ol>
<li>HOME</li>
</ol>
<div>
<h1><img src="images/logo.png" alt="株式会社バスタイム商事"></h1>
<address>
<dl>
<dt>お問い合わせ：</dt>
<dd><a herf="tel:0120000000">0120-0000-0000</a> infomation［at］bathtimeshoji.com</dd>
</dl>
<dl>
<dt>神戸本社：</dt>
<dd>兵庫県神戸市○○○ 11-11-11 ○○ビル 11</dd>
<dt>東京本社：</dt>
<dd>東京都 ○○○ 22-22-22 ○○ビル 22</dd>
</dl>
</address>
</div>
<p><small>copyright©bathtimeshoji All Rights Rserved.</small></p>
</footer>
Eチームのポイントは以下です。
- ロゴイメージをh1で囲って見出しとした
- モバイルブラウザを意識して “tel:” で電話番号リンクとした
- お問い合わせ、本社所在地をaddress要素で囲った
footer, ul, li smallの使いどころは各チームとほぼ同じ。 B, Cチームと同様お問い合せ、本社情報については、Bチームと同じ別々の定義リストとしてマークアップしています。address要素でお問い合せ、本社情報を囲んで連絡先の情報としています。ロゴと社名の画像をh1で囲っています。セクショニングを意識してのことでしょうか。
各チーム、フッタやテキストリンク、著作権表記については見解がほぼ共通していますが、ロゴと社名、お問い合せ、本社所在地の表し方については微妙に異なっているようです。
部長はこう書く
この問題、ボクが考えたんですがあまりよく考えずに「まあフッタとかひねりがないから簡単やろ」とレイアウトしました。しかしこれ、改めて考えると結構悩みますねｗ
<footer>
<div>
<a href="index.html" class="index">HOME</a>
</div>
<div>
<div>
<img src="logo.png" alt="">
</div>
<div>
<span>株式会社 バスタイム商事</span>
<span>Bathtime Bussiness Corp.</span>
</div>
</div>
<div>
<address>
<dl>
<dt>お問い合わせ</dt>
<dd id="tel">0120-0000-0000</dd>
<dd id="email">
<a href="mailto:information@bathtimeshoji.com">information[at]bathtimeshoji.com</a>
</dd>
</dl>
</address>
<dl itemscope itemtype="http://schema.org/LocalBusiness" itemref="tel email">
<dt itemprop="name">神戸本社</dt>
<dd itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressRegion">兵庫県</span>
<span itemprop="addressLocality">神戸市</span>
<span itemprop="streetAddress">○○11-11-11 ○○ビル 11</span>
</dd>
<dt itemprop="name">東京本社</dt>
<dd itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressRegion">東京都</span>
<span itemprop="addressLocality">渋谷区</span>
<span itemprop="streetAddress">○○11-11-11 ○○ビル 22</span>
</dd>
</dl>
</div>
<div>
<small class="copyright">
Copyright (c) bathtimeshoji All Right Reserved.
</small>
</div>
</footer>
まずHOME>は単なるテキストリンクとみなしました。 ロゴと社名についてはロゴのみを画像として社名はテキストで提供することにしました。画像文字だとスマートフォンなどでズームしたときに文字がぼやけることがあるのでそれに配慮する考えです。
連絡先と本社情報、ここは結構長考したんですが電話番号、メールアドレスをaddress要素で囲み、本社情報をdlで定義リストとしました。連絡先と本社情報をaddressで囲むのと正直「どっちでもいいよな〜」という気がして、選べなくて長考した感じです。ここは制作者の「どう配信したいか」の意図によって変わってくると思います。
本社情報はLocalBusinessスキーマを使って意味を与えてみました。LocalBusinessは事業拠点の支社、チェーン店などを表します。ボクはあまりこの辺に詳しくないんですが、チャレンジ精神で使ってみました。なんか間違ってたらぜひ教えてください。
2問目 パンくず
2問目も同じくMarkupCafe Tokyo Vol.1から、パンくずです。
<div id="breadcrumbs">
<ol>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="/"><span itemprop="title">Markup Cafeトップページ</span></a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<!-- 店舗情報？誤字じゃないか？ -->
<a itemprop="url" href="/shop/"><span itemprop="title">店舗情報</span></a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<!-- strong をつけてもいいかもね -->
<span itemprop="title">ドリンク・フード</span>
</li>
</ol>
</div>
まず、各テキストリンクをol要素で順番付きリストとしてマークアップしています。さらにmicrodataでパンくずの意味を与えています。この方法はGoogle ウェブマスターツールでも紹介されている方法で、パンくずナビゲーションを明確に表しています。 現在のページを示すテキストはa要素でなく、span要素で囲みテキストリンクでないことを表しています。
<nav class="topic-path">
<ul>
<li><a href="../../">Markup Cafe トップページ</a></li>
<li><a href="../">店鋪リスト</a></li>
<li class="current">ドリンク・フード</li>
</ul>
</nav>
全体をnav要素で囲み、ナビゲーションの意味を与えています。テキストリンクをul要素で順番なしリストとし、現在のページを表すテキストはli要素の子テキストとして、li要素にclass属性を与えて装飾しています。
<ol class="breadcrumb">
<li><a href="...">Markup Cafeトップページ</a></li>
<li><a href="...">店舗情報</a></li>
<li><a>ドリンク・フード</a></li>
</ol>
Aチームと似たマークアップですが、現在ページを示すテキストがhref属性無しのa要素で囲まれているのが特長でしょう。a要素のhref属性が省かれている場合、そのa要素はアンカーへのプレースホルダーとなります。具体的には、リンク先のページがまだ製作中でない場合などに使えます。この場合はテキストリンクのグループとなっていて、現在ページのみプレースホルダー（行き先のない仮のリンク）というような意味になります。
<ul class="breadcrumb">
<li><a href="/">Markup Cafe トップページ</a></li>
<li><a href="/shop/">店舗情報</a></li>
<li>ドリンク・フード</li>
</ul>
Bチームと似たマークアップです。ul要素で順番無しリストとし、現在ページはli要素の子テキストとしています。
<aside class="breadcrumb">
<ol>
<li><a herf="index.html">Markup Cafe トップページ</a></li>
<li><a herf="shop.html">店舗情報</a></li>
<li>ドリンク・フード</li>
</ol>
</aside>
リスト部分はol要素で順番リストとなっている以外はBチーム、Dチームと同様ですが、リスト全体をaside要素で囲っているのが特長ですね。aside要素はHTML5で新たに追加された要素のひとつで、ページ内のコンテンツとは関係しているけれども、本筋とは関連の薄いコンテンツを表します。
代表的な例としてはバナー広告なんかがそれに当りますが、パンくずがasideとなるかどうか。会場でもいろいろ意見が出ましたが、コンテンツの配信意図によってはパンくずのようなコンテンツがasideとなる可能性もあり得るかもしれません。すぐに事例は思いつかないですが、考察としては興味深いですね。
部長はこう書く
<div xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<a href="http://www.markupcafe.com/" title="トップページへ" rel="v:url" property="v:title" class="link">
Markup Cafeトップページ
</a>
</span>
<span typeof="v:Breadcrumb">
<a href="http://www.markupcafe.com/shop" title="店舗のご紹介" rel="v:url" property="v:title" class="link">
店舗情報
</a>
</span>
<span typeof="v:Breadcrumb">
<a href="http://www.markupcafe.com/shop/food" title="店内のドリンクやフードのご紹介" rel="v:url" property="v:title" class="current">
ドリンク・フード
</a>
</span>
</div>
各チームではパンくずをリストとみなしてulまたはolでマークアップしていましたが、「さて？そもそもリストなんだろうか？」と考えました。考えた挙句div>spanでマークアップしました。パンくずにテキストリンクのリストという意味を与える必要があるかどうかについてはけっこう意見が分かれるところなんじゃないかと思います。
個人的な考えではどっちがいいのか曖昧なので、保守的にリストの意味を与えないことにしました。あと、みんなと違ったマークアップ例を出したかったというのもありますｗ
一方でパンくずであることを明示するためAチームと同じくbreadcrumbスキーマを使っています。こちらはRDFaでマークアップしました。あと、「パンくずはナビゲーション」と言えるかどうか？これも考えれば考えるほど自信がなくなってきたので、nav要素は使わないこととしました。
やっぱり大阪はアツい！
東京と同様、大阪でもチームでの話し合いや、発表後の質疑応答などが大いに盛り上がりました。今回は多くの方にご参加いただいたので、チームも5チームに編成しました。1チーム当たり4〜5名という大所帯となったので、時間内に進行できるか不安でしたが、さすがコミュ力の高い関西人。各チームの発表もスムーズでトラブルなく終わることができました。感謝です。:-)
イベントの最後には、日本マイクロソフトさんのご好意により、IEステッカーがプレゼントされました。IEステッカーはありそうであんまり見ないノベルティなので、みんな大喜びで取り合いになりました。「写真撮るよ」って言ったら、みんな撮り合ってくれたりして、さすが関西人はノリがいいですねｗ
いかがでしたでしょうか。どれもHTML仕様としては正しいマークアップですが、それぞれの考え方、伝え方によって全くことなるマークアップとなりました。ほんと考えれば考えるほど「マークアップに唯一の正解はない」と思えてきます。
マークアップにはたくさんの正解がある。正しいマークアップの知識を身に付けると、Webの世界に自分の考えや想いを的確に伝えたりできて、より自由な文書表現が可能になるということですね。
今日の問題、みなさんならどうマークアップしますか？
Markup Cafeをはじめたきっかけ
最後にちょっと、ボクとMarkupCafeのことを。
HTML5 Experts.jpでHTML5について勉強されている方には、すでに仕事や趣味でHTMLをマークアップされている方も多くいらっしゃるんじゃないでしょうか。そのような中で「このHTML要素の使い方ってほんとに正しいんだろうか？」とか、「もうちょっといい感じにマークアップできそうな気がするけど、どうしたら良くなるんだろう？」とか思うことはないでしょうか？
ボクは正直、仕事のたびにそう思ってしまって、手を止めて考え込んでしまうことが多いです。で、納期が迫ってヤバくなるってことがしばしばあるんですよねｗ
そんなときはHTMLの仕様書を読んだり、いい感じそうなサイトのソースコードをみたりして、ヒントを探したりするんですが、考えても考えてもたった一つの答えを見つけられないことがあります。HTMLの要素や属性などの仕様は様々なニーズに対応するよう設計されているため、意味がある程度抽象的です。そのため場合によっては「Aともとれるし、Bともとれる」ということがあるんです。
こういう場合、どっちにしても意味が通ってまあ正解。となるんですね。でもどっちかを適用しないといけない。「どっちがええねんキィィ！」ってなることもありますｗｗｗ
もう一人で悶々と考えていてもラチがあかない。。ならみんなでいっしょに考えて、よく考えこんで「これだ！」というマークアップのスニペットを公開していったらいいんじゃね？みんなで納得できる良いマークアップ事例ができるし、一所懸命考えるのはHTMLの勉強になる。マークアップを公開すればこれから勉強する方の役に立つかも。
そんなことを考えて、マークアップ部のみんなとMarkup Cafeを始めました。現時点で東京で2回開催され、さまざまな観点から考えこまれたHTML5マークアップの事例が発表されています。詳しくはExperts.jp コントリビューターの中島さんが執筆された記事をご覧ください。
うれしいことに、記事が公開された後、大阪のマークアップ好きなみなさんから「大阪でもぜひやりたい！」というお声をいただいています。大阪でも上述のとおり現地の方々を中心にMarkupCafe OSAKA開催グループが立ち上がり、大阪での初開催が実現しました。
こうやっていろいろな地域でMarkupCafeを開催して、HTML5マークアップの知識を深めながらより実践的なマークアップ事例を発信していけるのはとても有意義だと感じています。もし他の地域でもMarkupCafeをやってみたい！という方がおられましたら、こちらのスライドを参考にぜひやってみてください。
MarkupCafe – html5j Markup group
ご要望があれば、出張開催もできるだけやりますので、ボク @bathtimefishまでご連絡ください。