はてなブックマーク

4.4.14 main 要素 カテゴリー: フロー・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所。ただし、祖先に article, aside, footer, header, nav 要素があってはならない。 コンテントモデル: フロー・コンテント コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: main ロール (デフォルト - 指定不要) または presentation 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: HTMLElement を使う。 main 要素は、ドキュメントやアプリケーションの body

HTML5 および、それに関連する仕様に規定された API がブラウザーに実装されているかをチェックします。 HTML5 HTML Canvas 2D Context Web Storage File API HTML5 Web Messaging Selectors API Level 1 Selectors API Level 2 Web Workers Geolocation API Server-Sent Events Element Traversal この API チェッカーは、厳密に、HTML5 仕様に準拠しているかどうかを調べているわけではありません。IDL 属性（プロパティ）については、得られたオブジェクトのコンストラクタ名または型を評価しています。メソッドについては、それが Function 型かどうかを評価しているだけです。そのため、実装していると結果が出たとしても、

HTML5 では、新要素が追加されただけではなく、HTML4 からある既存の要素についても、再定義しているのが特徴です。その中でも、img 要素は、他の要素に比べても、すごい力の入れようで、定義されています。 特筆すべき点として、alt 属性が挙げられます。 HTML4 の img 要素の仕様では、alt 属性は、イメージをレンダリングできないブラウザーの場合に表示する代替テキストとして使われ、イメージの簡単な説明を入れる、という程度にしか、定義されていませんでした。そして、もし詳細な説明を入れたい場合は、オプションで、longdesc 属性を使うこととなっていました。これまでは、アクセシビリティの観点から、alt 属性の使い方についてガイドラインや、業界のコンセンサスはありましたが、HTML 準拠要件という形では存在していませんでした。 ところが、現時点での HTML5 の img 要素

7.1 hidden 属性 すべての HTML 要素には、hidden コンテント属性をセットすることができます。hidden 属性は論理属性です。要素に指定されると、その要素はページの現在の状態には直接的に、まだ関連性がない、または、もう関連性がないことを意味します。または、ユーザーによって直接アクセスされているのではなく、そのページの他の部分によって再利用されるコンテンツだと宣言するために使われている、ということを意味します。ユーザーエージェントは、hidden 属性が指定された要素をレンダリングするべきではありません。この要件は、スタイルレイヤーを通して間接的に実装することができます。たとえば、HTML + CSS ユザーエージェントなら、レンダリングのセクションで提案されているルールを使って、これらの要件を実装することができるでしょう。 通常、この属性は CSS を使って実装される

使い方 JavaScript/CSS <script src="jquery.min.js"></script> <script src="jquery.html5jpMeterPolyfill.js"></script> <script> $(document).ready(function() { $('meter').html5jpMeterPolyfill(); }); </script> <style> meter { display: inline-block; width: 5em; height: 1em; vertical-align: -0.2em; } </style> HTML <meter value="20" min="0" low="30" high="70" max="100" optimum="100"></meter> <meter value="50"

使い方 JavaScript/CSS <script src="jquery.min.js"></script> <script src="jquery.html5jpMeterPolyfill.js"></script> <script> $(document).ready(function() { $('meter').html5jpMeterPolyfill(); }); </script> <style> meter { display: inline-block; width: 5em; height: 1em; vertical-align: -0.2em; } </style> HTML <meter value="20" min="0" low="30" high="70" max="100" optimum="100"></meter> <meter value="50"

これまで IE8 標準モードでは VML が使えないと思われてきました。そのため、meta タグを使って IE7 標準モードにする方法などが使われてきましたが、やはり IE8 標準モードでも VML が使えるようにしたいものです。ところが、IE8 標準モードでも VML が使えるようにする方法がありました。 IE8 標準モードでは CSS の扱いが従来と異なります。これが原因で、IE8 標準モードで VML が有効にならなかったようです。これについては、IEBlog で情報が公開されています。 IEBlog – Site Compatibility and IE8 このページの「Generic CSS Prefix Selectors」欄に情報が掲載されていますが、簡単に言うと、IE8 標準モードでは CSS の prefix セレクターにワイルドカード（アスタリスク）が使えないため、個々

W3C HTML5 仕様の2014 年 10 月 28 日版の勧告 の「3.2.4 コンテントモデル (Content models)」を和訳したものです。 正確性を求める場合は、原文を参照してください。また、もし本サイトのリファレンスが、最新の仕様と異なる部分がありましたら、ご指摘頂けると幸いです。 3.2.4 コンテントモデル 本仕様で定義されている要素はそれぞれ、コンテントモデルを持ちます。それは、要素の期待されるコンテンツを説明するものです。HTML 要素は、その要素のコンテントモデルで説明されている要件に一致するコンテンツを持たなければいけません。要素のコンテンツとは、DOM における子のことです。ただし、template 要素は除きます。この要素の子は、テンプレートコンテンツの中の子となります（この要素が生成されたときに割り当てられた独立 DocumentFragment）。

サイト内検索 この記事は、html5doctor に掲載されている記事「The footer element」を日本語訳したものです。この記事では、footer 要素の正しい使い方が解説されています。 原文タイトル The footer element 原文ページ URL http://html5doctor.com/the-footer-element/ 著者 Jack Osborne 氏 原文投稿日 2009-06-29 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当

4.5.29 br 要素 カテゴリー: フロー・コンテント フレージング・コンテント この要素を使うことができるコンテキスト: フレージング・コンテントが期待される場所 コンテントモデル: 空 コンテント属性: グローバル属性 text/html におけるタグの省略: 終了タグはありません 指定可能な ARIA role 属性 の値: あらゆるロールの値 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: interface HTMLBRElement : HTMLElement {}; br 要素は、改行を表します。 通常、改行は物理的に後続のテキストを次の行に移動することでビジュアルメディアに表示されますが、スタイルシートやユーザーエージェントによって、例えば、改行の代わりに緑色のドットを

サイト内検索 この記事は、html5doctor に掲載されている記事「September HTML5 spec changes」を日本語訳したものです。 原文タイトル September HTML5 spec changes 原文ページ URL http://html5doctor.com/september-html5-spec-changes/ 著者 Richard Clark 氏 原文投稿日 2009-09-17 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイ

先日の HTML5 3Days の Tech Talk で Canvas と SVG の違いを簡単に説明しましたが、これを深く追求してレポートされている方がいらっしゃいましたので紹介します。 2009 年 10 月にカルフォルニアで開催された SVG Open 2009 で、ヘルシンキ大学の Samuli Kaipiainen 氏と Matti Paksula 氏によるプレゼンテーション　SVG vs. Canvas on Trivial Drawing Application で、SVG と Canvas の特性の違いや、それらを組み合わせる方法などが解説されています。このプレゼンテーションの内容は、こちらの資料に詳しく説明されています。 このプレゼンテーションを要約すると、次の通りです。 ピクセル描画では Canvas が優れている。SVG でもできないことはないが、ピクセルごとにノー

4.4.8 dl 要素 カテゴリー: フロー・コンテント この要素の子が少なくとも 1 つの name-value グループを含む場合: パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所 コンテントモデル: 0 個以上のグループ。それぞれのグループは、1 個以上の dt 要素、それに続いて 1 個以上の dd 要素、そして任意の場所でスクリプトサポート要素から構成される。 コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: あらゆるロールの値 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: interface HTMLDListEleme

4.2.4 link 要素 カテゴリー: メタデータ・コンテント この要素を使うことができるコンテキスト: メタデータ・コンテントが期待される場所。 head 要素の子となる noscript 要素の中。 コンテントモデル: 空 コンテント属性: グローバル属性 href — ハイパーリンクのアドレス crossorigin — この要素がクロスオリジン・リクエストを扱う方法 rel — ハイパーリンクを含むドキュメントと、そのリンク先のリソースとの間の関係性 media — 受け入れ可能なメディア hreflang — リンク先のリソースの言語 type — 参照リソースのタイプに関するヒント sizes — アイコンのサイズ (rel="icon" の場合) title 属性は、この要素では特別なセマンティクスを持ちます。リンクのタイトルや代替スタイルシートのセット名になります。 te

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文URL：http://www.w3.org/TR/2011/WD-html5-diff-20110525// 原文タイトル：HTML 5 differences from HTML 4 - W3C Working Draft 25 May 2011 翻訳日：2011/05/26 最終更新日：2011/05/26

[韓国語（한국어） by @myjjulee] 2011年4月21日に開催された第16回HTML5とか勉強会にて Progressive Enhancement をテーマに登壇させて頂きました。講演に使ったスライドをここに公開しますので、ご興味のある方は、ぜひ、ご覧ください。 Progressive Enhancement ～すべての人に確実に情報を届けるために～ Progressive Enhancement という考え方は、決して新しい概念ではありません。何年も前から Progressive Enhancement は多くの著名なディベロッパーから提唱されてきました。しかし、残念ながら、これまでは大きく注目されることはなかったといえます。 これまで私たちが努力してきたことは、主に Regressive Enhancement と呼ばれるアプローチです。あらゆるブラウザーに同じデザイン、

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文URL：http://www.w3.org/TR/2011/WD-html5-diff-20110525// 原文タイトル：HTML 5 differences from HTML 4 - W3C Working Draft 25 May 2011 翻訳日：2011/05/26 最終更新日：2011/05/26

4.3.5 aside 要素 カテゴリー: フロー・コンテント セクショニング・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所 コンテントモデル: フロー・コンテント 、ただし、子孫に main 要素がないこと。 コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: complementary ロール (デフォルト - 指定不要), note, search, presentation 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: HTMLElement を使う aside 要素は、その aside 要素の前後のコンテンツに

4.5.1 a 要素 カテゴリー: フロー・コンテント フレージング・コンテント インタラクティブ・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フレージング・コンテントが期待される場所 コンテントモデル: トランスペアレント。ただし、子孫にインタラクティブ・コンテントを入れてはいけません。 コンテント属性: グローバル属性 href - ハイパーリンクのアドレス target - ハイパーリンクのナビゲーションとフォーム・サブミッションのデフォルトのブラウジングコンテキスト download - リソースをナビゲーションではなくダウンロードするかどうか、そして、そうなら、そのファイルの名前 rel - ハイパーリンクを含んでいるドキュメントとその先のリソースとの間の関係性 hreflang - リンク先のリソースの言語 type - 参照されたリソースの種

構文 context = canvas . getContext(contextId) canvas に描画するための API にアクセスできるオブジェクトを返します。 指定の context ID が未サポートなら null を返します。 仕様 canvas に描画するためには、まず、canvas 要素の getContext(contextId) メソッドを使ってコンテキストのリファレンスを取得しなければいけません。 コンテキストは、2D Context 仕様など、別の仕様で定義されています。[2DCONTEXT] ブラウザベンダーは、moz-3d のように、vendorname-context 構文を使って実験的なコンテキストも定義することができます。 ユーザエージェントが空の文字列やサポートしていないコンテキストを指定する文字列を受け取った場合は、nullを返します。文字列比較は、

4.7.8 source 要素 カテゴリー: なし この要素を使うことができるコンテキスト: メディア要素の子として。ただし、あらゆるフロー・コンテントや track 要素より前。 コンテントモデル: 空 コンテント属性: グローバル属性 src - リソースのアドレス type - 組み込まれるリソースのタイプ text/html におけるタグの省略: 終了タグはありません。 指定可能な ARIA role 属性 の値: なし 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 DOM インタフェース: interface HTMLSourceElement : HTMLElement { attribute DOMString src; attribute DOMString type; attribute DOMString media; }; sour

構文 context . drawImage(image, dx, dy) context . drawImage(image, dx, dy, dw, dh) context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) canvas に指定のイメージを描画します。引数は、次のように解釈されます： もし、第 1 引数が img, canvas, video 要素でないなら、TYPE_MISMATCH_ERR 例外を投げます。image にイメージ・データがないなら、INVALID_STATE_ERR 例外を投げます。数値の引数に矛盾があるなら（例えば、描画先が 0 × 0 の矩形）、INDEX_SIZE_ERR を投げます。image が完全にデコードできていないなら、何も描画されません。 仕様 canvas上に画像を表示するには、

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文：http://blog.whatwg.org/faq/ （2011 年 1 月 21 日版） 翻訳日：2011/01/25 最終更新日：2011/01/25 概要 WHATWGが公開しているHTML5のFAQです。HTML5の目的や存在意義といった大枠の話から、要素の記述方法といった細かい話まで、さまざまな方面