サイト内検索

質問の回答 #4

この記事は、html5doctor に掲載されている記事「Your Questions Answered #4」を日本語訳したものです。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

質問の回答 #4

Illustration of a doctor treating a patient みなさんの HTML5 の質問をまとめて、その答えを共有する記事がまたやってきた。今度は広い範囲をカバーしたんだ。ARIA, storage, offline 機能、そして、ドキュメントのアウトラインまで入れたんだ。では、答えを見つけに読み進めてくれ。

今後の記事で、みなさんが HTML5 のどんな領域について取り上げてほしいかを知りたいんだ。ぜひ知らせてくれ!

古いブラウザーと XHTML

Brett Prichard の質問:

もし HTML5 の新しいタグを使ったとしたら(つまり <video><header>)、そのページが古いブラウザーでレンダリングされるとどうなりますか?

もう1つの質問ですが、XHTML 相当のものってあるのでしょうか。XHTML 2.0 は HTML の 1 ~ 4 との互換性はまったくありませんが、HTML5 と互換にはなるのでしょうか?私は XHTML のコードのほうが好きなんです。

Thank you for reading.

まず最初の質問に答えよう:特に何も起こらない。その要素の中に入れたコンテンツが表示されるだけだ。(video の場合は、フォールバック・コンテンツが表示される。)

2 つ目の質問に関してだが、ちょっと前に HTML5 の XHTML シリアライゼーションについて書いたので読んでほしい。

— Bruce より

ARIA

Joseph Chapman の質問

同僚と私は、これまで使ってきた doctype を、最新の <!doctype html> に切り替えて、先週の水曜日に Jeremy Keith から学んだことのいくつか組み込んでみたいと思っています。主に ARIA です。

私たちは、DTD さえ追加できれば良いはずだとわかっているのですが、...html> の最後にくっつける適切な doctype 宣言が分かりません。知りませんか?私たちは本当に始めたいと思っているんです。そして、私たちのサイトのアクセシビリティのレベルが飛躍するような最新のテクノロジーを使ってみたくてしょうがないんです。

Any answers appreciated.

Thanks for your help.

違う doctype を使わなくても、HTML5 に ARIA を加えてもいいんだ。仕様のこの部分を読んでみてほしい。

HTML5 により密接に ARIA を連携できるようするためのタスク・フォースが作られたはずだ。私たちは、改めて ARIA を記事に取り上げるつもりだ。

参考になれば幸いだ。

— Rich

属性の短縮形

Nick Leon の質問:

こんにちわ、HTML5Doctor

私は自分自身を強烈な POSH ディベロッパーだと思っています。妥当な XHTML の要件として、"属性の短縮形" は許されません。HTML は "属性の短縮形" を認めており、論理属性では、<option selected> のように、その値を丸ごと省略しても良いことになっています。すべての XML 属性は、明示的に値をクォートしなければいけません。そのため、XML では、<option selected="selected"> と書きます。

HTML5 は属性の短縮形を支持しているのではないかと思いました。あなた方のサンプル・コードを見ると、属性の短縮形が使われていました。たとえば <audio src="elvis.ogg" controls autobuffer></audio> です。では、これは HTML5 では妥当ですか? XHTML5 ではの妥当になるのですか?

<audio src="elvis.ogg" controls="1" autobuffer="0"></audio>?

それらはいずれも妥当な HTML5 構造だ(しかし、controls=”1″ は非準拠だ。controls=”controls” とする必要がある)。

HTML5 では、あなたの希望通りに属性を書いても良い。XHTML5 (the XML シリアライゼーション) では、XML のルールに従う必要がある。

— Bruce より

オフライン・ストレージ

Kevin Searle の質問

私は、HTML5仕様のオフライン・ストレージ機能について頭を抱えています。"HTML5 オフライン・ストレージ 101" みたいな記事を考えてくれませんか?

ちょっとはっきりさせてほしい。あなたは "ストレージ" のことを言っているのだろうか。それとも "オフライン" についてだろうか。これらはまったく別物だ。

ストレージは変数と関連するものだ。クッキーびんみたいなものだが、それをもっと大きくしたようなものだ。

オフライン・アプリケーションは、コネクティビティの検知や、ウェブとの接続なしにアプリケーションを実行することに関するものだ。

私たち(つまり Remy)は、これらのトピックのどちらも記事に書くつもりだ。but it’s useful to know which is more in demand than the other.

それまでは、私が HTML5 Demos で書いたデモを遠慮なくチェックしてほしい(オフライン・ストレージとウェブ・データベースを扱っている)。

— Remy

Nav のタイトル(ドキュメント・アウトライン)

D Ross の質問:

新しいサイトの制作に取り掛かっているのですが、それを outliner でチェックしてみました。すると、"untitled section" と表示されていまいました。"nav" 要素の中に見出しを入れていないからです。

これは問題ないですか? 本当はメインの nav にタイトルを入れる必要があるのですか?

もしそうなら、<h5> を加えて、"メイン・ナビゲーション" みたいな言葉を入れれば大丈夫ですか? そうしたら、display: none を使って、それを隠してしまっても大丈夫ですか?

よろしくお願いします。

DRoss

"untitled section" でも問題ない。outliner のディベロッパーには、"navigation" か、それに相当する言葉を使うべきだ、と提案されている。しかし、そうなるのかどうか、なったとしても、それがいつになるのかは、わからない。(直下に見出しがなければ、<aside> でも同じことが言える。)

よろしく。

— Rich

details 要素

Bart の質問:

こんにちわ、先生!

"details" 要素について良くわからないので、ちょっと教えてください。

W3C 仕様は "details 要素はユーザーが追加情報やコントロールを取得できるディスクロージャー・ウィジットを表す" と言っています。

良く分かってないのですが、この要素は、投稿(たとえば日付や時間)や、"回答"、"保存"、"返信" といったコントロールに関する詳細を入れるのに使うことができると思います。

これで間違っていないか教えてください。

Bart より

PS. HTML5doctor ブログが大好きです。HTML5 の使い方の説明はとても大事です。これからも頑張ってください!

この質問に対して、私たち doctor から立て続けに回答が出された。ここに、すべてをお見せしよう。

回答 1

仕様では、<details> は脚注には適切ではないと書かれている。投稿の詳細は脚注だと言えるだろう。仕様には、<details> 要素はそのコンテンツを見せたり隠したりする機能を持つ、とも書かれている。私は、それは投稿の詳細に相応しくないと思う。

あなたは、投稿の詳細に <section><footer> を使うことができるだろう。しかし、あなたが言っている "コントロール" とは何を指しているのか、私には良くわからない。

日時であれば、<time> 要素を使うことができる:

<time class="published updated" datetime="2009-09-23">September 23rd, 2009</time>

他の先生方は違う意見を持っているかもしれないが、参考になれば幸いだ。

— Tom

回答 2

Tom の返信のフォロー・アップ:ユーザーは、その詳細を見るかどうかを自分でコントロールすることができる。

<details> 要素はインタラクティブ要素で、デフォルトで折りたたまれた状態となるが、その見出しだけは見えるようになる。その見出しは <dt> 要素でマークアップするべきだ(なければ、"詳細" と表示されるだろう)。

ユーザーエージェントがレンダリングすべきコントロール(<details> を完全サポートしたとき)は、左に向いた小さな三角形だ。クリックされると、この要素のコンテンツが表示された状態に切り替わる。

<details> 要素をデフォルトで開いた状態にしたいなら、open 属性をセットすれば良い。

私なら、前後のコンテンツから判断して必ずしも見せる必要がないと判断できるようなコンテンツであれば、それに <details> を使うだろう。だから、あなたの例であれば、私は <details> にメタ・データを入れるだろう。しかし、返信や保存といった "ユーザー・コントロール" は入れないだろう。なぜなら、これらのアクションが実行できることを、ユーザーに常に見せるべきだからだ。

ブラウザー・ベンダーは details のインタラクティブ性を実装していないが、私は JavaScript を使ってこれをエミュレートするだろう。

参考になれば幸いだ。

— Remy

回答 3

<time> の属性の pubdate を使うのも良いだろう:

<time pubdate datetime="2009-09-23">September 23rd, 2009</time>

pubdate は、その投稿に 異なる 2 つの時間があるとき役に立つ。例えば将来の出来事だ:

<article>
<header>
<h1>Gig: Hixie and the Pixies, <time datetime="2010-01-01">Jan 1st 2010</time>, Royal Albert Hall</h1>
<p>Published <time datetime="2009-09-21" pubdate>Sept 21, 2009</time></p>
</header>
<p>With Lachy on kazoo, Henri on Sousaphone, Pilgers on the triangle, and Hixie conducting</p>
</article>

<time> 要素に関する記事ができそうな気がする…

— Bruce

まだまだ続く

これで今回の質問ラウンドは終りだ。今後の記事で、みなさんが HTML5 のどんな領域について取り上げてほしいかを知りたいんだ。ぜひメールを送ってほしい