CodeZine(コードジン)

特集ページ一覧

HTML 5のレイアウト要素

HTML 4からの重要な変更点とは

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/08/26 14:00

目次

<dialog>

 HTML 5では、既存のコンテンツをもっと現代的な用途に転用している例がいくつかあります。例えば、今ではほとんど使われていない一群のタグとして、<dl><dt><dd>があります。これらはもともとディクショナリエントリに使われていたものです(dictionary listing、dictionary term、dictionary definition)。HTML 5では、引き続き<dl>をサポートしていますが、新たに<dialog>タグを導入し、<dt><dd>をそれぞれ発言者と発言内容として使用しています。以下、<dialog>の使用例として、アボット&コステロの古典的な漫才「Who's on First」の一節を示します。

<dialog>
    <dt> Costello</dt>
    <dd> Look, you gotta first baseman?</dd>
    <dt> Abbott</dt> 
    <dd> Certainly.</dd>  
    <dt> Costello</dt>  
    <dd> Who's playing first?</dd>  
    <dt> Abbott</dt>
    <dd> That's right.</dd>
    <dt> Costello</dt>  
    <dd> When you pay off the first baseman every month, who gets the money?</dt>
    <dt> Abbott</dt>  
    <dd> Every dollar of it.</dt>
</dialog>

 結果は次のようになります。

Costello 
    Look, you gotta first baseman? 
Abbott 
    Certainly. 
Costello 
    Who's playing first? 
Abbott 
    That's right. 
Costello 
    When you pay off the first baseman every month, who gets the money? 
Abbott 
    Every dollar of it.

 この書き方の優れた点は、かなり古いブラウザでもおおむね適切に描画されることです。ディクショナリリストと会話の発言は基本構造が非常に似かよっているため、古いブラウザでもほぼ適切に描画されます。

<mark>

 HTML 5では新たなインラインタグもいくつか追加されています。<mark>タグは、引用部分のテキストコンテンツに対して、オリジナルの書き手ではなく、現在の引用者が強調のマーキングを追加する(例えば、段落内の特定の文言を強調する)ために使うものです。例えば、次のような段落を記述した場合、

<p>The economic conditions continue to deteriorate, <mark>even as the 
media focus on "green shoots" showing apparent growth in various sectors</mark> 
(emphasis mine).</p>

 結果は次のようになります。

The economic conditions continue to deteriorate, even as the media focus on "green shoots" showing apparent growth in various sectors (emphasis mine).

 引用部分を強調するだけでなく、取得したWebページやそれに類するコンテンツの中で検索語句をマークするためにmarkを使うこともできます。

<time>

 <time>要素は、特定の日付や時刻や期間を意味的なラベルでラップすることにより、ドキュメントを構文解析して時刻表を作成するようなアプリケーションを構築しやすくします。以下にWeb 2.0 Conferenceの例を示します。

<div class="event">
 <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
  <span class="summary">Web 2.0 Conference</span>:
  <time class="dtstart" datetime="2007-10-05">October 5</time> -
  <time class="dtend" datetime="2007-10-20">19</time>,
  at the <span class="location">Argent Hotel, San Francisco, CA</span>
 </div>

<details>

 <details>要素は<time>よりも役に立つかもしれません。実のところ、この要素はHTMLでよくぶつかるある難問-リンクがアクティブ化されたときにだけ現れるインラインの詳細コンテンツをページに挿入すること-を解決してくれます。ツールチップもこの問題を解決する1つの方法でしたが、大部分のツールチップメカニズム(@alt属性や@title属性)はインラインマークアップに対応していなかったので、使用できるコンテンツはマークアップされないテキストに限定されていました。<details>要素では、この部分が変更されています。<details>要素内に記述した<legend>要素はリンクコンテンツを定義し、そのリンクがクリックまたはロールオーバーによってアクティブ化されると、<details>要素内のマークアップされたテキストがポップアップします。

<p>The conference was most notable for it's coverage of <details>
<legend>HTML 5</legend> The successor to HTML 4 that's intended  
to work with new web technologies such as <i>AJAX</i> and inline 
graphics.</details> as well as other new standards.</p>

 上記のマークアップが描画されると、テキスト内の「HTML 5」の部分が何らかの方法でリンクとして強調表示されます。また、このリンクにユーザーがポインタを合わせると、ポップアップやそれに類するインライン表示が現れ、その中に詳細テキストが表示されます。

<figure>

 <figure>要素はまた別のDocBookライクな機能を提供します。画像はもともとの定義からして、一般的にはHTMLの中で独立したエンティティと見られていました。しかし多くの場合は、画像のラッパーを用意して、キャプションやサブリーダーも表示できるようにした方が好都合です(特にブログではそうです)。この役割を果たすのが<figure>要素です。<figure>要素はコンテナとして機能するだけでなく、図の一覧表を作成することも可能にします(これは<section>要素が目次をサポートするのとよく似ています)。また、<figure>要素にイラストを入れる必要はなくなります(もっとも、これが主な使用事例になるとは思いますが)。<figure>要素はサイドバー(通常は完全に独立した内容を含む)とセクションの中間にあたるものとして使用できます。<legend>要素は図のキャプションを識別するのに役立ちます。

<progress>と<meter>

 <progress>要素と<meter>要素は、どちらもフォームコンポーネントですが、両者の役割には大きな違いがあります。<progress>要素は操作の進行状態(ダウンロード操作が何パーセント完了したかなど)を表すのに使われます。そのため、大抵はプログレスバーとして実装されます。それに対し、<meter>要素はゲージやその他のインジケータなど、ある数値範囲の中の特定の数値を示すのに使われます。

 これらが入力コントロールかどうかを仕様から判断するのは少々難しいのですが、そうでないとすれば奇妙な感じがします。従って、ランキングとして評点を示そうとする場合は、例えば次のように記述します。

<div class="score">Your score was 
    <meter value="88" min="0" max="100" low="64" high="96" optimum="100">B+</meter>
</div>

 ただし、これがどのように表現されるのかは未確定です。<meter><progress>のようなものから真価を引き出そうとすると、JavaScriptと組み合わせて使うことが必要になりますが、筆者としてはあまり気乗りがしません。JavaScript中心の要素に移行するのは、純粋に宣言的な意味でのHTML 5の使用という点ではあまり望ましい傾向とは言えませんし、宣言的なアーキテクチャへの親和性が高いXFormsに関するHTML付帯事項の側でも引き続き抵抗があるでしょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

著者プロフィール

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

  • Kurt Cagle(Kurt Cagle)

    ライター、情報アーキテクト、XML News NetworkとMetaphorical Webのウェブマスター。カナダ、ブリティッシュコロンビア州のビクトリア在住。XMLToday.orgの編集長、O'Reilly Mediaの寄稿編集者。現在、XBRLに関する著書を執筆中。彼のTwitterはtw...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5