Web Starter Kitは、Googleが提供するマルチデバイスでのWeb開発をサポートするボイラープレート(HTMLのひな形)と、開発を補助するツール群です。
特に注目したいのが開発を補助するツール群で、このツールを使えば今どきのWeb開発のワークフローをすぐに取り入れることができます。

Web Starter Kitを開発の出発点とすることで、Web FundamentalsにあるWeb開発のベストプラクティスを取り入れられるながらスムーズ制作に入れるとともに、より効率的な開発を可能にします。

本記事では導入方法と機能の説明を中心に、Web Starter Kitの紹介をしていきます。

Web Starter Kitの導入

入手方法

Web Starter Kitの入手には2つの方法があります。一つはWeb Starter Kitのリポジトリからクローンする方法、もう一つは、Web Starter Kitのサイトからダウンロードする方法があります。

Web Starter Kitは現在Beta版で、アップデートが頻繁に行われています。リリースサイクルが早いため、Webページからのダウンロードの場合最新のバージョンではない可能性もあるのでリポジトリからのクローンをオススメします。

※ 執筆時点でのバージョンは 0.4.0 です。アップデートの変更点を把握するためにもWeb Starter KitのReleasesを定期的にチェックするといいでしょう。

フォルダとファイルの構成

フォルダ構成は以下のようになっています。

/
└── app
    ├── fonts
    ├── images
    ├── scripts
    ├── styleguide
    └── styles

Web Starter Kitのドキュメントルートとなるフォルダには、各種の設定ファイルが含まれています。開発する際の中心となるのは app フォルダ以下で、デフォルトでHTMLのひな形やWebフォントなど、いくつかのリソースが含まれています。

各フォルダの役目は以下のようになっています。

Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。

動作環境の構築

Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。

• Node.js (v0.10.x以上)
• Ruby (1.8.7以上)

これに加えて、以下のツールのインストールが必要になります。

• Nore.js上で動くタスクランナーのgulp (3.5.x以上)
• Sassのコンパイルを行うRubyのgem (3.3.x以上)

それぞれのインストール方法について、簡単に紹介していきます。

※ これらを既にインストール済みの場合は、このセクションは飛ばしてください。

Node.jsのインストール

Node.jsのバージョンは v0.10.x 以上が必要になります。すでにインストールしている場合は、$ node -vで現在のバージョンを確認してください。Node.jsのインストールはhttp://nodejs.org/にあるインストーラーを使うのが簡単です。

※ 「Node.jsのバージョンを管理したい」という場合には、nodebrewがオススメです。

Rubyのインストール

Macを利用している場合は、デフォルトでRubyがインストールされているので、そのまま利用することができます。（ただしその場合でも動作には 1.8.7 以上のバージョンが必要となりますので $ ruby -v で現在のバージョンを確認してください）

Windowsの場合にはRubyの公式サイトかRuby Installerなどからインストーラーを入手してインストールしてください。

Sassのインストール

Rubyのインストール後にSassのコンパイラをインストールします。インストールはRubyのパッケージマネージャのRubyGemsから行います。 コマンドラインツールから以下のコマンドを実行します。

$ gem install sass

※ もし権限に関するエラーが出た場合は、sudoをつけて実行してください。

インストール後、下記コマンドを実行してバージョン番号が表示されることを確認します。

$ sass -v

gulpのインストール

gulpは、Node.jsのパッケージマネージャであるnpmでインストールします。 インストールには、下記のコマンドを実行します。

$ npm install -g gulp

※ もし権限に関するエラーが出た場合は、sudoをつけて実行してください。

モジュールのインストール

最後に、タスクの実行に必要なモジュールをインストールします。Web Starter Kitをクローン(展開)したフォルダに移動して、下記のコマンドを実行します。

$ npm install ※ もし権限に関するエラーが出た場合は、sudoをつけて実行してください。

このコマンドを実行することで、動作に必要なモジュールがインストールされます。インストールされるモジュールは、同じフォルダにある package.jsonに書かれています。

以上で環境構築はおしまいです。

制作・開発

環境が揃えば制作に入れます。制作はひな形とするHTMLを選択することから始めます。

ひな形とするHTMLの選択

Web Starter Kitで用意されているひな形のHTMLは、index.htmlとbasic.htmlの2つがあります。

2つのHTMLの主な違いは以下の点です。

• マルチデバイス向けメニューの有無
• Web Starter Kitが用意しているCSSとJSファイルの読み込み

index.htmlには、マルチデバイス向けのドロワーメニュー用のリソース読み込みが指定されていて、初めからメニューのHTMLが書かれています。メニューをそのまま使う場合に、index.htmlを。プレーンな状態のHTMLから始めたい場合には、basic.htmlを使って制作を進めましょう。

UI Component

Web Starter Kitにはマルチデバイス向けのメニューのほかに、いくつかのUI Componentが用意されています。ボタンやアイコン、テーブルといったComponentのほかにGridシステムもあります。いずれのComponentもマルチデバイス向けに書かれており、レスポンシブ対応されています。Componentの一覧は、app/styleguide/index.htmlで確認することができます。

このComponent群は、Web Fundamentalsで使用されているComponentをまとめたもので、Googleのベストプラクティスが詰め込まれています。

UI Componentが用意されているWeb Starter Kitですが、GoogleはこれらのComponentを使うことを必ずしも推奨しているわけではありません。Web Starter Kitをベースに独自のスタイルを開発し、自分のStarter Kitを作っていきましょう。

gulpによる作業の自動化

Web Starter Kitには開発を補助するツールとして、gulp(Node.js製のタスクランナー)を採用しています。gulpを使えば様々な作業をタスク化し、自動化することができます。

用意されているタスクは以下の様なものです。

• ローカルサーバ
• マルチデバイスでのオートリロード
• Sassのコンパイル
• ベンダープレフィックスの付与
• HTML、CSS、JavaScriptの最適化とminify
• 画像の最適化
• PageSpeed Insightsによるパフォーマンス測定

これらのタスクを活用することでより効率的に開発を進めることができるでしょう。

タスクの実行

gulpのタスクを実行してみましょう。

gulpのタスクは、gulpfile.jsに書かれています。デフォルトで10数個のタスクが記述されていますが、主に使うのは4つです。それぞれを実行して試してみましょう。

ローカルサーバとファイルの監視

ローカルサーバを立ち上げ、各種ファイルの変更を監視してそれぞれのタスクを実行してくれます。 開発中はこのコマンドを実行しておくことになります。

$ gulp serve

コマンドを実行するとブラウザが立ち上がり、app フォルダをドキュメンルートとして、index.htmlが開かれます。

ローカルファイルに変更があった場合、BrowserSyncによって、変更がブラウザに反映されます。試しにトップページ(app/index.html)を編集して保存してみると、自動的にブラウザがリロードされ、最新の内容が反映されるのが確認できます。

ビルドして成果物を生成する

Sassのコンパイルや各種ファイルのminify、画像の最適化などを行うコマンドです。生成したファイルはdistフォルダに格納されます。

$ gulp

このコマンドは以下のようなタスクを含んでいます。

• CSSファイルの生成
  • Sassのコンパイル
  • ベンダープレフィックスの付与
  • 未使用セレクタの削除
  • 結合と縮小
• JSファイルの生成
  • 結合と難読化と縮小
• HTMLの縮小
• 画像の最適化

ビルドしたファイルをローカルサーバで確認する

serveタスクで、開発中のファイル(appフォルダ以下)をローカルサーバで確認しましたが、ビルドした結果を確認する場合には、以下のコマンドを使います。

$ gulp serve:dist

ビルドが行われた後にdistフォルダをドキュメントルートとしたローカルサーバが立ち上がります。

ページのパフォーマンスを確認する

Googleが提供するパフォーマンス診断ツールのPageSpeed Insightsで、Webページのパフォーマンスを測ることができます。

$ gulp pagespeed

このタスクではコマンドラインからPageSpeed Insightsの結果を取得できるpsi(PageSpped Insights for Node)が使われています。

注意したい点として、PageSpeed Insightsはパブリックなサイトしか測定できません。ページのパフォーマンス測定を行いたい場合には、ビルドした成果物をサーバにアップロードして公開状態にしておく必要があります。

測定するURLはgulpfie.jsにて設定することができます。

gulpタスク一覧

このほかにも、いくつかのタスクが用意されています。タスク一覧は以下の通りです。カスタマイズして使う場合には、これら既存のタスクを参考にすると良いでしょう。

それぞれのタスクは、$ gulp タスク名 という形式のコマンドで個別に実行することができます。

おわりに

今回は、Web Starter Kitの概要、機能などについて紹介しました。Web Starter Kitをうまく自身のワークフローに取り入れ、開発の出発点にすれば、開発を始める際の準備が軽減されるかもしれません。

ただし、プリプロセッサやAltJSなど、開発に使用するものは人によって様々です。そういった場合にはWeb Starter Kitをそのまま使うのではなく、カスタマイズしたり、一部だけを参考にしたりするだけでもよいでしょう。

Web Starter Kitはまだ始まったばかりのプロジェクトなので、多くの人にフィットするようになるにはまだ時間がかかるかもしれません。ですが頻繁に更新はされていて、今後はMaterial Designなどが取り込まれていく動きもありますので、要注目のプロジェクトです。

マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。

イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。

本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。

1.ページングの中身と重要度

最初のお題はページング。
ブログのページ送りや検索結果でページが多い場合に使われますが、あまり深く考えてマークアップしたことはないのではないでしょうか。

このお題で注目したポイントは以下の3つです。

• 現在地をどう示すか
• 重要と強調の違い
• 前へと次への扱い

それぞれのチームのマークアップから考えていきます。

各チームのマークアップ

• お題1：チームA

<div class="pagination">
    <p class="prev"><a rel="prev">前へ</a>
    <p class="next"><a href="/next" rel="next">次へ</a>
    <ol class="sequential">
        <li><a class="current">1</a>
        <li><a href="/page2">2</a>
        <li><a href="/page3">3</a>
        <li><a href="/page4">4</a>
        <li><a href="/page5">5</a>
    </ol>
</div>

• お題1：チームB

<div class="paginate">
    <p>
        <a href="" rel="prev" class="prev">＜＜前へ</a>
    </p>
    <ol>
        <li><em>1</em>
        <li><a href="2">2</a>
        <li><a href="3">3</a>
        <li><a href="4">4</a>
        <li><a href="5">5</a>
    </ol>
    <p>
        <a href="" rel="next" class="next">次へ＞＞</a>
    </p>
</div>

• お題1：チームC

<nav>
    <a href="#">&lt;&lt;前へ</a>
    <ol>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ol>
    <a href="#">次へ&gt;&gt;</a>
</nav>

• お題1：チームD

<nav>
    <strong><a>&lt;&lt;</a></strong>
    <ul>
       <li><span>1</span></li>
       <li><a>2</a></li>
       <li><a>3</a></li>
       <li><a>4</a></li>
       <li><a>5</a></li>
    </ul>
    <strong><a>&gt;&gt;</a></strong>
</nav>

現在地の表し方

チームAは

<li><a class="current">1</a>

チームBは

<li><em>1</em>

現在どこのページにいるのかをページングで表現する場合、主に視覚的な観点からスタイルを変えるというアプローチを取ることが多いと思います。ですがセマンティクスを考える場合には、こういった表し方も意識する必要があるのではないでしょうか。

重要か強調か、strongとemの違いは？

チームDは前へと次へのリンクに対してstrong要素でマークアップしています。
strong要素はHTML5の仕様では強調ではなく強い重要性を表す要素とされています。

em要素はニュアンスとしての強調ですがstrong要素を使った場合そのコンテンツの中でその部分が重要であると意味付けしていることになります。
ページングというコンテキストにおいて、重要かどうかといった意味付けをするのが適しているかは、判断するのがかなり難しいと思います。

リンク先との関係から考えられるもの

チームAとチームBは

<a href="#" rel="prev">前へ</a> <a href="#" rel="next">次へ</a>

rel="prev"

ブラウザの中にはrel属性を解釈してブラウザ自体のナビゲーションに前のページや次のページへのリンクを表示するといった実装をしているものもあります。(prestoの頃のOperaなど)

普段外部CSSの読み込みの際に

rel="stylesheet"

視覚的・構造的順番の分離がもたらす効果

またチームAは他のチームと大きく違い、”次へ”のリンクをページ番号のリストより前にマークアップしています。
これはスクリーンリーダなど音声による読み上げを考えた場合に「”前へ”の次に数字が読みあげられるよりも”次へ”を読み上げたほうが良いと考えた」という観点からでした。

視覚的な構造をスタイルシートで表すようにすることで、アクセシビリティを意識するといった違った視点からマークアップをすることができると、とても考えさせられるマークアップです。

部長はこう書く！

このお題に対しての村岡氏のマークアップです。

<head>
    <link rel="next" href="p2.html">
</head>
<body>
    <div>
        <p><a class="prev">前へ</a></p>
        <ol>
            <li><a class="current-page">1</a></li>
            <li><a href="p2.html">2</a></li>
            <li><a href="p3.html">3</a></li>
            <li><a href="p4.html">4</a></li>
            <li><a href="p5.html">5</a></li>
        </ol>
        <p><a class="next" href="p2.html">次へ</a>
    </div>    
</body>

マークアップ自体はチームAとチームBに似ていますが、”＜＜”や”＞＞”はスクリーンリーダなどで読み上げてほしくないといったことから、CSSの擬似要素で視覚的に挿入しています。

アクセシビリティを意識したとき、順番を考えるのも大事ですが、そのコンテンツ自身も意識することが大事だと考えられます。

2.進化するフォームに対応できるか

2つ目のお題はフォームです。
このお題で注目したポイントは以下の3つです。

• アスタリスク
• label要素の使い方
• input要素の属性

各チームのマークアップ

• お題2：チームA

<section class="reservation">
    <h1>バスタイム商事 会議室予約フォーム</h1>
    <p class="note"><span class="mark-req">*</span>は必須入力です</p>
    <form>
        <table>
            <tr><th><label for="room">会議室名</label>
                <td><input id="room" required aria-label="会議室名（必須）">
                    <span class="mark-req">*</span>
            <tr><th><label for="date">ご利用日</label>
                <td><input id="date" type="date" required aria-label="ご利用日（必須）">
                    <span class="mark-req">*</span>
            <tr><th><label for="time">ご利用時刻</label>
                <td><input id="time" type="time" required aria-label="利用開始時刻（必須）"> 〜 <input type="time" required aria-label="利用終了時刻（必須）">
                    <span class="mark-req">*</span>
            <tr><th><label for="number">ご利用人数</label>
                <td><input id="number" type="number" min="1" step="1" required aria-label="ご利用人数（必須）">
                    <span class="mark-req">*</span>
            <tr><th><label for="name">代表者氏名</label>
                <td><input id="name" required aria-label="代表者氏名（必須）">
                    <span class="mark-req">*</span>
            <tr><th><label for="name-reading">代表者氏名ローマ字<br><span class="note-label">（半角英字）</span></label>
                <td><input id="name-reading" pattern="[A-Za-z\. ]+" required aria-label="代表者氏名ローマ字（必須、半角英字）">
                    <span class="mark-req">*</span>
            <tr><th><label for="email">E-Mail</label>
                <td><input id="email" type="email" required aria-label="E-Mail（必須）">
                    <span class="mark-req">*</span>
            <tr><th><label for="tel">TEL</label>
                <td><input id="tel" type="tel">
            <tr><th><label for="url">URL</label>
                <td><input id="url" type="url" pattern="^https?\:\/\/.+">
        </table>
        <button>予約する</button>
    </form>
</section>

• お題2：チームB

<form action="">
    <p>
        <strong>
            <label for="f1">会議室名</label><input type="text" name="f1" id="f1" required autofocus="autofocus"><span>*</span>
        </strong>
    <p>
        <strong>
            <label for="f2">ご利用日</label><input type="date" name="f2" id="f2" required><span>*</span>
        </strong>
    <p>
        <strong>
            <label for="f3">ご利用時刻</label><input type="time" name="f3" id="f3" required>〜
            <label for="f4"></label><input type="time" name="f4" id="f4" required><span>*</span>
        </strong>
    <p>
        <strong>
            <label for="f5">ご利用人数</label><input type="number" name="f5" id="f5" required><span>*</span>
        </strong>
    <p>
        <strong>
            <label for="f6">代表者氏名</label><input type="text" name="f6" id="f6" required><span>*</span>
        </strong>
    <p>
        <strong>
            <label for="f7">代表者氏名ローマ字</label><input type="text" pattern="^[A-Za-z]+$" name="f7" id="f7" required><span>*</span>
        </strong>
    <p>
        <strong>
            <label for="f8">E-Mail</label><input type="email" name="f8" id="f8" required><span>*</span>
        </strong>
    <p><label for="f9">TEL</label><input type="tel" name="f9" id="f9">
    <p><label for="f10">URL</label><input type="url" name="f10" id="f10">
    <p><input type="submit" value="予約する">
</form>

• お題2：チームC

<header>
    <h1>バスタイム商事 会議室予約フォーム</h1>
</header>
<p><span>※</span>は入力必須です</p>
<form action="#">
<div>
    <label for="muraoka1">会議室名</label>
    <input id="muraoka1"  type="text" name="btf1"><span>※</span>
</div>
<div>
    <label for="muraoka2">ご利用日</label>
    <input id="muraoka2" type="date" name="btf2"><span>※</span>
</div>
<div>
    <label>ご利用時刻
    <input  id="muraoka3" type="time" name="btf31">〜
    <input type="time" name="btf32"><span>※</span>
    </label>
</div>
<div>
    <label for="muraoka4">ご利用人数</label>
    <input  id="muraoka4" type="number" name="btf4"><span>※</span>
</div>
<div>
    <label for="muraoka5">代表者氏名</label>
    <input  id="muraoka5" type="text" name="btf5"><span>※</span>
</div>
<div>
    <label for="muraoka6">代表者氏名ローマ字(半角英字)</label>
    <input  id="muraoka6" type="text" name="btf6"><span>※</span>
</div>
<div>
    <label for="muraoka7">E-Mail</label>
    <input  id="muraoka7" type="email" name="btf7"><span>※</span>
</div>
<div>
    <label for="muraoka8">TEL</label>
    <input  id="muraoka8" type="tel" name="btf8">
</div>
<div>
    <label for="muraoka9">URL</label>
    <input  id="muraoka9" type="url" name="btf9">
</div>
<input type="submit" value="予約する">
</form>

• お題2：チームD

<h1>バスタイム商事 会議予約フォーム</h1>
<p><small><i>*</i>は入力必須です</small></p>
<form action="">
    <ul>
        <li><label>会議室名 <input type="text" required></label><i>*</i></li>
        <li><label>ご利用日 <input type="date" required></label><i>*</i></li>
        <li><label>ご利用時刻 <input type="time" required></label><i>*</i></li>
        <li><label>ご利用人数 <input type="number" min="1" required></label><i>*</i></li>
        <li><label>代表者氏名 <input type="text" required><i>*</i></label></li>
        <li><label>代表者氏名ローマ字<small>(半角英字)</small> <input type="text" pattern="^[0-9A-Za-z]+$" required></label><i>*</i></li>
        <li><label>E-Mail <input type="email" required></label><i>*</i></li>
        <li><label>TEL <input type="tel"></label></li>
        <li><label>URL <input type="url"></label></li>
    </ul>
    <input type="submit" value="予約する">
</form>

i要素は日本語に合わない？

チームDは必須項目を表しているアスタリスクをi要素でマークアップしています。i要素は最近ですとスプライトアイコンを使用する際に使われていることが多いように思います。
仕様的にはi要素は文章中で他と区別したいテキストや印刷の際に斜体になるテキストに対して使うとされています。
ただこの仕様は欧文の文章慣習に拠っている部分が大きいので「そもそも日本語の文章慣習には合っていないのではないか」という意見もありました。

そう考えるとi要素を使わずにem要素やb要素でマークアップするといったことも考えられるかもしれません。

アスタリスクじゃ伝わらない

Webのフォームにおいて、赤いアスタリスクで”入力必須項目”であることを表しているページが多いと思います。
しかしこれについて「赤いアスタリスク自体には必須項目であるという意味はないので、そもそもこういった使い方がよくないのでは」という意見がありました。
また、このお題ではデザイン的にアスタリスクが後ろに来ていることから、アスタリスクを項目の後ろにマークアップすると思います。ですが読み上げされる場合を考えると、項目名の読み上げを行なった後にその項目が必須であるかどうかがわかります。

アクセシビリティやユーザビリティをしっかり考えた場合、項目の前に”(必須項目です)”といったような記述をすることが望ましいのではないかと筆者は考えます。

囲むか分けるか、label要素の使い方

label要素はinput要素を内包する書き方と、for属性によって対象のinput要素を指定する書き方の二通りあり、マークアップ的にはどちらの書き方も正しいです。
今回の場合デザイン的にラベルの右側にマージンが空いてる様に見えるので、スタイル付けがしやすいようにlabel要素とinput要素を分けて書く方が適していると考えることができます。

type=”?”

HTML5ではinput要素のtype属性に色々なtypeが設定できるようになっています。 数字にはnumber、メールアドレスにはemailなど、JavaScriptを使わずに入力項目のフォーマットを指定することができます。
typeを上手く使い分けることで、ユーザが入力の際に迷わないフォームが作れるのではないでしょうか。

なお、これらのtypeに対応していないブラウザでは

type="text"

input要素で使える便利な属性たち

いくつかのチームでinput要素の属性にrequired属性やautofocus属性といった指定をしています。
requiredはその項目が必須であることを表し、送信ボタンを押した際にはその項目が未入力であった場合に未入力であると警告して送信処理を行いません。
autofocus属性はそのページを開いた際に自動的に入力欄にフォーカスされ、ユーザーが項目を選択することなく入力を開始することができます。

ほかにもautocomplete属性やstep属性、またpattern属性といったものもあり、これらを使えばJavaScriptを書かずに入力内容に制約をかけることもできます。

入力チェックは万全に

input要素の属性を使う上で注意しておきたい点があります。required属性やpattern属性といった属性は確かに便利なのですが、データの入力チェックをこれだけで済ましてはいけません。
これらの属性はあくまでも入力の補助的な機能であって、送信されてくるデータは保証していません。
悪意のある第三者が、入力フォームを通さずにフォームの送信先に直接データを送ることも十分に考えられます。そういった場合これらの属性は無力です。

フォームで入力必須にしてあるし正規表現で形式指定してあるから送られてくるデータは必ず正しい、と思わずに、送信されてきたデータはしっかりとサーバサイドで整合性をチェックする必要がある、ということを覚えておいてください。

部長はこう書く！

<h1>バスタイム商事 会議室予約フォーム</h1>
<p class="note"><span class="mark-req">*</span>は必須入力です</p>
<form>
    <div>
        <label for="room-name">会議室名</label>
        <input id="room-name" required placeholder="A会議室">
        <span class="required">*</span>
    </div>
    <div>
        <label for="date">ご利用日</label>
        <input id="date" type="date" required placeholder="2013/01/23">
        <span class="required">*</span>    
    </div>
    <div>
        <label for="time">ご利用時刻</label>
        <input id="time" type="time" required placeholder="01:13">
        〜
        <input type="time" required placeholder="02:34">
        <span class="required">*</span>    
    </div>
    <div>
        <label for="number">ご利用人数</label>
        <input id="number" type="number" placeholder="1">
        <span class="required">*</span>        
    </div>
    <div>
        <label for="name">代表者氏名</label>
        <input id="name" required placeholder="神戸　太郎">
        <span class="required">*</span>    
    </div>
    <div>
        <label for="name-roma">
            代表者氏名ローマ字<br>
            <span class="notes">（半角英字）</span>
        </label>
        <input id="name-roma" pattern="[A-Za-z/ .]+" required placeholder="Taro Kobe">
        <span class="required">*</span>    
    </div>
    <div>
        <label for="email">E-Mail</label>
        <input id="email" type="email" required placeholder="kobe@bathtimeshoji.com">
        <span class="required">*</span>        
    </div>
    <div>
        <label for="tel">TEL</label>
        <input id="tel" type="tel" placeholder="0123456789">        
    </div>
    <div>
        <label for="url">URL</label>
        <input id="url" type="url" placeholder="http://bathtimeshoji.com/">    
    </div>
    <input type="submit" value="予約する">
</form>

前述したように、ブラウザが対応していないtypeが指定されている場合には

type="text"

3.tableを見直す

最後のお題は業績の表です。

このお題で注目したポイントは以下の2つです。

• tableの構造
• scope属性

お題のデザインをHTMLとCSSで見た目的に表すのにそれほど時間はかからないと思います。 table要素でマークアップして見出しのセルをcolspanで適宜結合すれば数分で終わる作業です。 ですが各データと見出しの関係性をしっかりとマークアップで表そうとした場合、table要素への理解が必要になります。

各チームのマークアップ

• お題3：チームA

<table border>
    <thead>
        <tr>
            <th>
            <th>2012年3月
            <th>2013年3月
    </thead>
    <tbody>
        <tr><th colspan="3" scope="rowgroup">連結経営成績
        <tr><th scope="row">営業収益
            <td>1,000
            <td>1,000
        <tr><th scope="row">営業利益
            <td>1,000
            <td>1,000
        <tr><th scope="row">税引前利益
            <td>1,000
            <td>1,000
        <tr><th scope="row">当期利益
            <td>1,000
            <td>1,000
    </tbody>
    <tbody>
        <tr><th colspan="3" scope="rowgroup">連結財政状態
        <tr><th scope="row">資産合計
            <td>1,000
            <td>1,000
        <tr><th scope="row">資本合計
            <td>1,000
            <td>1,000
        <tr><th scope="row">帰属持分比率（％）
            <td>10.0
            <td>10.0
    </tbody>
    <tbody>
        <tr><th colspan="3" scope="rowgroup">キャッシュフローの状況
        <tr><th scope="row">営業活動によるキャッシュフロー
            <td>1,000
            <td><span class="mark">△</span>1,000
        <tr><th scope="row">投資活動によるキャッシュフロー
            <td><span class="mark">△</span>1,000
            <td><span class="mark">△</span>1,000
        <tr><th scope="row">財務活動によるキャッシュフロー
            <td>1,000
            <td>1,000
        <tr><th scope="row">現金及び現金同等物<br>期末残高
            <td>1,000
            <td>1,000
    </tbody>
</table>

• お題3：チームB

<div>
    <table>
        <caption>連結経営成績</caption>
        <thead class="thead">
            <tr>
                <th>項目</th>
                <th>2012年3月</th>
                <th>2013年3月</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>営業収益</td><td>237,409</td><td>203,423</td>
            </tr>
            <tr>
                <td>営業利益</td><td>237,409</td><td>203,423</td>
            </tr>
            <tr>
                <td>税引前利益</td><td>237,409</td><td>203,423</td>
            </tr>
            <tr>
                <td>当期利益</td><td>237,409</td><td>203,423</td>
            </tr>
        </tbody>
    </table>
</div>

<div>
    <table>
        <caption>連結財政状態</caption>
        <thead>
            <tr>
                <th>項目</th>
                <th>2012年3月</th>
                <th>2013年3月</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>営業収益</td><td>237,409</td><td>203,423</td>
            </tr>
            <tr>
                <td>営業利益</td><td>237,409</td><td>203,423</td>
            </tr>
            <tr>
                <td>税引前利益</td><td>237,409</td><td>203,423</td>
            </tr>
            <tr>
                <td>当期利益</td><td>237,409</td><td>203,423</td>
            </tr>
        </tbody>
    </table>
</div>

<div>
    <table>
        <caption>キャッシュフローの状況</caption>
        <thead>
            <tr>
                <th>項目</th>
                <th>2012年3月</th>
                <th>2013年3月</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>営業収益</td><td>237,409</td><td>203,423</td>
            </tr>
            <tr>
                <td>営業利益</td><td>237,409</td><td>203,423</td>
            </tr>
            <tr>
                <td>税引前利益</td><td>237,409</td><td>203,423</td>
            </tr>
            <tr>
                <td>当期利益</td><td>237,409</td><td>203,423</td>
            </tr>
        </tbody>
    </table>
</div>

• お題3：チームC

<table border="1">
    <thead>
        <th></th>
        <th>2012/3</th>
        <th>2013/3</th>
    </thead>
    <tbody>

        <tr><th colspan="3">連結経営成績</th></tr>
        <tr>
            <th>AAA</th>
            <td>123,456</td>
            <td>7,890</td>
        </tr>
        <tr>
            <th>AAA</th>
            <td>123,456</td>
            <td>7,890</td>
        </tr>
        <tr>
            <th>AAA</th>
            <td>123,456</td>
            <td>7,890</td>
        </tr>

        <tr><th colspan="3">連結財政状態</th></tr>
        <tr>
            <th>AAA</th>
            <td>123,456</td>
            <td>7,890</td>
        </tr>
        <tr>
            <th>AAA</th>
            <td>123,456</td>
            <td>7,890</td>
        </tr>
        <tr>
            <th>AAA</th>
            <td>123,456</td>
            <td>7,890</td>
        </tr>

        <tr><th colspan="3">キャッシュフローの状況</th></tr>
        <tr>
            <th>AAA</th>
            <td>123,456</td>
            <td>7,890</td>
        </tr>
        <tr>
            <th>AAA</th>
            <td>123,456</td>
            <td>7,890</td>
        </tr>
        <tr>
            <th>AAA</th>
            <td>123,456</td>
            <td>7,890</td>
        </tr>

    </tbody>
</table>

• お題3：チームD

<table border="1">
    <thead>
        <tr>
            <th></th>
            <th id="year2012" scope="col">2012年3月</th>
            <th id="year2013" scope="col">2013年3月</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="3" scope="col" class="title">連結経営成績</th>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th colspan="3" scope="col" class="title">連結経営成績</th>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2012">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th colspan="3" scope="col" class="title">連結経営成績</th>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2012">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th colspan="3" scope="col" class="title">連結経営成績</th>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2012">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
        <tr>
            <th scope="row">営業収益</th>
            <td headers="year2012">2000円</td>
            <td headers="year2013">2000円</td>
        </tr>
    </tbody>
</table>

みんなが悩んだscope属性

参加者を大いに悩ませたのは右上にある年月の表示です。年月の見出しはデータ的に列方向のセルに掛かっています。しかし先頭に空行の見出しセルがあったり、”連結経営成績”などのカラム全体にまたがるセルが存在してたりと、見出しとセルの関連付けが一見してやりづらそうな見た目です。

こういった単純ではない表で有効とされているのがscope属性の指定です。
“年月”の見出しには

scope="col"

scope="row"

また、scope属性を指定することでユーザーエージェントに見出しの方向を正しく伝えることができるので、データをよりアクセシブルにするために有効であるという見方もできます。データの関係性をしっかりとマークアップすることで、アクセシビリティ的にもより良いマークアップにすることができると考えられます。

CSS is Power !?

チームBはこのデザインを3つの表の集まりとして捉えてマークアップしています。「年月の見出しなどで一つの表に見えるだけで、それぞれ独立した表である」と考えてのことでした。3つの表では見出しセルとしてtheadに年月を入れていますが、CSSによって1つ目の表の見出しだけを表示するようにしています。

見た目と構造の分離という観点から見ると、スタイリングによって解決することも一つの手法なのではと筆者は考えます。

部長はこう書く！

<section>
    <table border="1">
        <thead>
            <tr>
                <th></th>
                <th scope="col">2012年3月</th>
                <th scope="col">2013年3月</th>
            </tr>        
        </thead>
        <tbody>
            <tr>
                <th scope="rowgroup" colspan="3" class="group">
                    連結経営成績
                </th>
            </tr>
            <tr >
                <th scope="row">営業収益</th>
                <td>237,409</td>
                <td>203,423</td>
            </tr>
            <tr>
                <th scope="row">営業利益</th>
                <td>15,530</td>
                <td>14,577</td>
            </tr>
            <tr>
                <th scope="row">税引前利益</th>
                <td>13,600</td>
                <td>10,213</td>
            </tr>
            <tr>
                <th scope="row">当期利益</th>
                <td>2,562</td>
                <td>7,962</td>
            </tr>
            <tr>
                <th scope="rowgroup" colspan="3">
                    連結財政状態
                </th>
            </tr>
            <tr >
                <th scope="row">資産合計</th>
                <td>2,455,368</td>
                <td>7,793,387</td>
            </tr>
            <tr>
                <th scope="row">資本合計</th>
                <td>320,905</td>
                <td>330,535</td>
            </tr>
            <tr>
                <th scope="row">帰属持分比率（％）</th>
                <td>17.9</td>
                <td>12.2</td>
            </tr>
            <tr>
                <th scope="rowgroup" colspan="3">
                    キャッシュフローの状況
                </th>
            </tr>
            <tr >
                <th scope="row">営業活動によるキャッシュフロー</th>
                <td>9,618</td>
                <td>△32,954</td>
            </tr>
            <tr>
                <th scope="row">投資活動によるキャッシュフロー</th>
                <td>△13,021</td>
                <td>△16,160</td>
            </tr>
            <tr>
                <th scope="row">財務活動によるキャッシュフロー</th>
                <td>7,487</td>
                <td>23,699</td>
            </tr>
            <tr>
                <th scope="row">現金および現金同等物<br>期末残高</th>
                <td>129,833</td>
                <td>110,362</td>
            </tr>        
        </tbody>
    </table>
</section>

table要素に

border="1"

テーブルレイアウトは一般的に推奨されていませんが、レイアウト目的でtable要素を使いたい場合には

role="presentation"

border="0"

cellspacing="0" cellpadding="0"

マークアップの奥深さ

前回同様に今回のイベントでも各お題に対して30分の考察時間が設けられましたが、どのお題も30分ではまとめられないほどの議論がありました。
いろいろな考えがありますが、人それぞれに違ったマークアップがあり、どれが一番といった答えはありません。

要素の使い方や属性への理解など、より良いマークアップをする際には相応の知識が求められます。また、知識だけでなくユーザビリティやアクセシビリティといったことも考慮する必要があると思います。

誰にとって、何にとって良いマークアップなのか、マークアップをする際に考えてみてください。

Web制作においてHTMLのマークアップには絶対の正解というものがありません。ページを制作しているとき、特にセマンティクスを意識したとき「このマークアップで正しいのだろうか」と悩むことがあると思います。

そんなマークアップについて考えるイベント「MarkupCafe」がhtml5jマークアップ部の主催のもと開催されました。「MarkupCafe」では参加者同士がチームに分かれ、お題となるデザインに対して議論し、自分たちならこうマークアップするといった考えを発表し合いました。

本記事では「MarkupCafe」で出された”フッター”、”パンくずリスト”、”求人情報”の3つのお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについて考え、マークアップの最適解を探ります。

※html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わる、すべての人々を応援する非営利・中立のコミュニティです。

1.フッターの要素が持つそれぞれの意味は？

最初のお題として出されたのはページ最下部によくある、フッター部分のデザインからのマークアップです。お題で使われた画像には、筆者が印象から決めたパーツの構成がわかるようにキャプションをつけています。筆者はAからFの6つのパーツに分解してマークアップを考えました。パーツをいくつかピックアップして、参加者のマークアップを見ていきます。

パンくずリスト？ナビゲーション？

意見が分かれるところだと思いますが、Aのパーツはパンくずリストにもナビゲーションにもとれるパーツです。実際に各チームのマークアップは、大きく分類してリストを使うか、使わないかに二分されました。

<nav><!-- nav要素で囲むチームもいれば -->
    <ul>
        <li>
            <a href="">HOME ＞</a><!-- リンクにしないチームも -->
        </li>
    </ul>
</nav>

リストにしたチームの中でもnav要素で囲んでいたり、li要素の中をリンクにしたりといった差異がありました。リストにしなかったチームのマークアップはp要素一つというもので、「意味をもたせるほど重要な情報ではない」と判断してのもの。捉え方の違いでマークアップは大きく変わる、ということ象徴していると思います。

水平線に潜む罠？

Bのパーツの水平線は、一見hr要素を使って線が引けそうですが、どのチームもhr要素は使っていません。hr要素は話題の区切りなどを表す際に使う要素なので、この場合のマークアップには適さないという判断でした。見た目的な水平線を引きたい場合は、スタイルシートで行うべきだとされています。

address要素から考える”良いマークアップ”とは？

このお題の中で、どのチームも一番時間をかけたのがDとEのパーツです。電話番号やメールアドレス、住所といった情報に意味をもたせようと思ったとき、一番に浮かぶのはaddress要素です。どのチームもaddress要素を使用しましたが、その使い方はバラバラでした。

<address>
    <p>
        <span><a>お問い合わせ：0120-0000-0000</a>, <a>infomation[at]bathtimeshoji.com</a></span>
    </p>
</address>
<dl>
    <dt>神戸本社：</dt>
    <dd>兵庫県神戸市◯◯◯◯◯ 11-11-11 ◯◯ビル 11</dd>
    <dt>東京本社：</dt>
    <dd>東京都渋谷区◯◯◯◯◯ 22-22-22 ◯◯ビル 22</dd>
</dl>

<p>
    <span>お問い合わせ：</span>
    <address itemprop="telephone">0120-0000-0000</address>
    <address itemprop="email">infomation[at]bathtimeshoji.com</address>
</p>
<dl>
    <dt>神戸本社：</dt>
    <dd>兵庫県神戸市◯◯◯◯◯ 11-11-11 ◯◯ビル 11</dd>
    <dt>東京本社：</dt>
    <dd>東京都渋谷区◯◯◯◯◯ 22-22-22 ◯◯ビル 22</dd>
</dl>

<address>
    <p>お問い合わせ：<span>0120-0000-0000</span> <span>infomation［at］bathtimeshoji.com</span></p>
    <p>神戸本社：<span>兵庫県神戸市◯◯◯◯◯ 11-11-11 ◯◯ビル 11</span></p>
    <p>東京本社：<span>東京都渋谷区◯◯◯◯◯ 22-22-22 ◯◯ビル 22</span></p>
</address>

お問い合せの部分だけをaddress要素にするチームもあれば、Microdataを使った上で電話番号とメールアドレスを分けてaddress要素を使う、住所も含めてaddress要素にする、といったようにaddress要素の使い方はバラバラになりました。

address要素は特に誤った使われ方をされる要素の一つですが、仕様をざっくりと意訳すると”そのドキュメントの問い合わせを受ける人に関する情報に用いる”とされています。このお題の場合、ドキュメントの問い合わせ先として適していそうなのは電話番号とメールアドレスの2種類だと捉え、所在地の情報は適していないと考えることができます。 要素の名前がもっていそうな意味からマークアップするのではなく、仕様に基づいて正しい使い方をすることが良いマークアップのためには必要です。

2.パンくずリストに正解はあるのか

次のお題に出されたのはパンくずリストです。先のお題の中にもパンくずリストとして扱える要素がありましたが、このお題では明確にパンくずリストとしてマークアップします。

ほとんどのチームが要素にメタデータを付与して、細かく意味付けをしていました。パンくずリストというシンプルなお題なだけに、同じようなマークアップになるのではと思いましたが、それぞれのマークアップからは様々な部分に思考を巡らせたのが見えてきます。

メタデータはだれのため？

このマークアップでは、Microdataで各要素にメタデータで意味付けをしています。

<nav>
    <ol itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <li itemprop="child">
            <a itemprop="url" href="">
                <span itemprop="title">Markup Cafe トップページ</span>
            </a>
        </li>
        <li itemprop="child">
            <a itemprop="url" href="">
                <span itemprop="title">店舗情報</span>
            </a>
        </li>
        <li>ドリンク・フード</li>
    </ol>
</nav>

Microdataを使った理由としては、Googleなどの検索エンジンに対して優位なマークアップにしたいといった意図からです。

ここではol要素を使っていますが、パンくずリストを順序ありリストとするか順序なしリストとするか、この点だけを取っても意見が分かれると思います。

これからはRDFaがくるかも

このマークアップではMicrodataではなくRDFa Liteで意味付けをしています。

<nav vocab="http://rdf.data-vocabulary.org/" typeof="Breadcrumb">
  <h1>ページ階層</h1>
    <ul>
        <li>
            <a property="url" href="">
                <span property="title">Markup Cafe トップページ</span>
            </a>
        </li>
        <li>
            <a property="url" href="">
                <span property="title">店舗情報</span>
            </a>
        </li>
        <li>
            <a property="url" href="">
                <span property="title">ドリンク・フード</span>
            </a>
        </li>
    </ul>
</nav>

先日W3Cより勧告されたRDFa 1.1では、HTML5への対応やRDFa Liteで簡潔なマークアップが可能になったこともあり、RDFaの利用が増えていくかもしれません。

先のマークアップとの他の違いとして、h1要素を使ってる箇所があります。nav要素はセクショニング・コンテンツなので、見出し要素を使うことでアウトラインを意識したマークアップにできる、と考えることもできます。

リストってなんだろう

このマークアップはMicrodataを使っていますが、リスト要素を使っていません。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="">
        <span itemprop="title">Markup Cafe トップページ</span>
    </a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="">
        <span itemprop="title">店舗情報</span>
    </a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="">
        <span itemprop="title">ドリンク・フード</span>
    </a>
</div>

これは「パンくずリストはリストではない」という解釈からでした。階層構造を表すためにリスト要素を使うのが本当に正しいのかどうか、非常に考えさせられるマークアップです。

意味付けだけに囚われることなかれ

このマークアップは、メタデータを使わず非常に簡素なマークアップです。

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

同じようにリスト要素を使っている他のチームと比べるとnav要素を使っていません。これはnav要素の”重要なナビゲーションブロックからなるセクションだけがnav要素に適している”という仕様を意識し、パンくずリストはそこまで重要ではないと判断してのものでした。

また、nav要素を使わなかったもう一つの理由として「スクリーンリーダなどでアクセスしたときに重要なリンクを見失わないように」という意図も込められています。セマンティクスを与えてマシンが意味を理解できるようにすることも大事ですが、その先を考える必要もあるのかもしれません。

Microdata VS RDFa、決着か？

MicrodataとRDFaはどちらもメタデータを付与して意味づけを行うための仕様ですが、Microdataが7月にW3C HTML WGによってHTML5.0の勧告候補から削除されてしまいました。(詳しい理由と顛末は白石編集長の記事でふれていますのでそちらをご覧ください) Microdataがこの先どう落ち着くのか、先にふれたRDFa 1.1が勧告されたという点からもこれからの動向に要注目です。

3.求人情報は独立した記事か

最後のお題は、よくある求人情報のデザインからのマークアップです。このお題では4つのパーツに分解して考えました。中でもAの”求人情報全体”については特に意見が分かれ、多くの議論が交わされました。

tableの出番？いやいやdlでしょ

Dの求人内容の部分は、table要素とdl要素とでマークアップが分かれました。

<dl>
    <dt>給与</dt><dd>時給1500円</dd>
    <dd>月額20.3万円〜22.3万円＋残業代</dd>
    <!-- 略 -->
</dl>

給与や勤務時間といった情報を定義と解釈するか、表の項目の一つとして解釈するかで使用する要素も変わってきます。どちらを使うのが正しいのか決められることではないですが、その情報が何を表したいのか考えることは良いマークアップへと繋がります。

文章構造は視覚的に決まる？

Cの”その他の情報”部分のマークアップですが、チームごとにバラバラになっていたのがとても興味深いです。

<p><img src="" alt=""></p>
<p>未経験！派遣初めてさん！大歓迎！<br>
★履歴書不要！らくらく登録！<br>
★正社員のような待遇！嬉しい「月給制＋交通費支給 」<br>
★IT・美容・マスコミ・金融など業界も様々<br>
★正社員を目指す！紹介予定派遣のお仕事多数
</p>

<p><img src="" alt="">未経験！派遣初めてさん！大歓迎！</p>
<p>★履歴書不要！らくらく登録！</p>
<p>★正社員のような待遇！嬉しい「月給制＋交通費支給 」</p>
<p>★IT・美容・マスコミ・金融など業界も様々</p>
<p>★正社員を目指す！紹介予定派遣のお仕事多数</p>

<img src="" alt="">
<p>未経験！派遣初めてさん！大歓迎！</p>
<ul>
    <li>★履歴書不要！らくらく登録！</li>
    <li>★正社員のような待遇！嬉しい「月給制＋交通費支給 」</li>
    <li>★IT・美容・マスコミ・金融など業界も様々</li>
    <li>★正社員を目指す！紹介予定派遣のお仕事多数</li>
</ul>

p要素の中でbr要素で改行してるものもあれば、全てp要素にしたり、リストを使ってるマークアップもあります。一行目に星マークがついていないテキストがあるから箇条書き、という解釈もできますし、一行目以外は星マークがついているからリスト、という解釈もできます。

では、もしこの一行目のテキストにも星マークがついていたらどうでしょうか。それぞれ似たようなマークアップになっていたかもしれません。これらのマークアップから「構造が曖昧な文章への意味付けは、整った文章への意味付けよりも解釈の仕方が多様になる」と筆者は考えます。

articleという名の迷宮

HTML5で定義された要素の中でも、特にarticle要素の使いどころについてはさまざまな意見があると思います。article要素を使ったチーム、article要素ではなくsection要素を使ったチーム、2つのマークアップを比較します。

<article>
    <h1><!-- 見出し --></h1>
    <div><!-- その他の情報+求人内容 --></div>
    <aside><!-- 関連する求人 --></aside>
</article>

<section>
    <h1><!-- 見出し --></h1>
    <div><!-- その他の情報+求人内容 --></div>
    <div><!-- 関連する求人 --></div>
</section>

この2つのマークアップはaside要素を使っているという違いこそあるものの、文書構造的にはとても似ています。article要素をどこで使えばいいか悩んだときは、「RSSとして配信されたときに単独の記事として成り立つかどうかを意識すると良い」と言われていますが、それも見る人や状況によって違ってきます。article要素とsection要素のどちらを使うかは、前後の文章構造によっても変わりますが、主観による部分が大きいのではないでしょうか。構造の解釈は一緒なのに意味の解釈は違うものになる、マークアップの奥深さが垣間見えます。

MarkupCafeから見えたもの

今回筆者が参加したMarkupCafeでは一つのマークアップについて、30分間考える時間がありました。自分自身でマークアップに向き合えたのもよい体験でしたが、同じデザインから自分と違うマークアップをした理由を直接聞ける機会はなかなかないと思います。解釈の仕方でマークアップが変わる、というのを実感できたイベントでした。

この記事で紹介したマークアップや要素の使い方も、すべて考え方の一つでしかありません。答えを決めることはできないかもしれませんが、良いマークアップを作っていくことはできるはずです。

最後に「MarkupCafe」主催の村岡正和氏の言葉を引用して、記事を締めくくりたいと思います。

「HTMLのマークアップには決まった答えがありません。 どんなウェブページを作りたいか。アクセスした人になにを伝えたいか。どういう気持で伝えたいか。 それがページごとに違うから、それぞれのページにそれぞれのマークアップがあるのです」

＜MarkupCafe Tokyo Vol.2 開催のお知らせ＞ 10月19日（土）13:00～17:00に「MarkupCafe Tokyo Vol.2」を開催します。 プロのWebデザイナーから初心者まで、みんなで気軽に会話しながらイマドキのHTMLマークアップの知識を深めましょう！ 詳細はこちらから。