From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../html/global_attributes/accesskey/index.html | 142 ++++++ .../global_attributes/autocapitalize/index.html | 50 +++ .../ja/web/html/global_attributes/class/index.html | 65 +++ .../global_attributes/contenteditable/index.html | 83 ++++ .../html/global_attributes/contextmenu/index.html | 122 ++++++ .../html/global_attributes/data-_star_/index.html | 82 ++++ files/ja/web/html/global_attributes/dir/index.html | 93 ++++ .../html/global_attributes/draggable/index.html | 66 +++ .../web/html/global_attributes/dropzone/index.html | 48 +++ .../web/html/global_attributes/hidden/index.html | 71 +++ files/ja/web/html/global_attributes/id/index.html | 74 ++++ files/ja/web/html/global_attributes/index.html | 199 +++++++++ .../html/global_attributes/inputmode/index.html | 72 ++++ files/ja/web/html/global_attributes/is/index.html | 67 +++ .../web/html/global_attributes/itemid/index.html | 107 +++++ .../web/html/global_attributes/itemprop/index.html | 475 +++++++++++++++++++++ .../web/html/global_attributes/itemref/index.html | 98 +++++ .../html/global_attributes/itemscope/index.html | 290 +++++++++++++ .../web/html/global_attributes/itemtype/index.html | 255 +++++++++++ .../ja/web/html/global_attributes/lang/index.html | 90 ++++ .../ja/web/html/global_attributes/part/index.html | 46 ++ .../ja/web/html/global_attributes/slot/index.html | 50 +++ .../html/global_attributes/spellcheck/index.html | 67 +++ .../ja/web/html/global_attributes/style/index.html | 70 +++ .../web/html/global_attributes/tabindex/index.html | 94 ++++ .../ja/web/html/global_attributes/title/index.html | 126 ++++++ .../html/global_attributes/translate/index.html | 64 +++ .../x-ms-format-detection/index.html | 39 ++ 28 files changed, 3105 insertions(+) create mode 100644 files/ja/web/html/global_attributes/accesskey/index.html create mode 100644 files/ja/web/html/global_attributes/autocapitalize/index.html create mode 100644 files/ja/web/html/global_attributes/class/index.html create mode 100644 files/ja/web/html/global_attributes/contenteditable/index.html create mode 100644 files/ja/web/html/global_attributes/contextmenu/index.html create mode 100644 files/ja/web/html/global_attributes/data-_star_/index.html create mode 100644 files/ja/web/html/global_attributes/dir/index.html create mode 100644 files/ja/web/html/global_attributes/draggable/index.html create mode 100644 files/ja/web/html/global_attributes/dropzone/index.html create mode 100644 files/ja/web/html/global_attributes/hidden/index.html create mode 100644 files/ja/web/html/global_attributes/id/index.html create mode 100644 files/ja/web/html/global_attributes/index.html create mode 100644 files/ja/web/html/global_attributes/inputmode/index.html create mode 100644 files/ja/web/html/global_attributes/is/index.html create mode 100644 files/ja/web/html/global_attributes/itemid/index.html create mode 100644 files/ja/web/html/global_attributes/itemprop/index.html create mode 100644 files/ja/web/html/global_attributes/itemref/index.html create mode 100644 files/ja/web/html/global_attributes/itemscope/index.html create mode 100644 files/ja/web/html/global_attributes/itemtype/index.html create mode 100644 files/ja/web/html/global_attributes/lang/index.html create mode 100644 files/ja/web/html/global_attributes/part/index.html create mode 100644 files/ja/web/html/global_attributes/slot/index.html create mode 100644 files/ja/web/html/global_attributes/spellcheck/index.html create mode 100644 files/ja/web/html/global_attributes/style/index.html create mode 100644 files/ja/web/html/global_attributes/tabindex/index.html create mode 100644 files/ja/web/html/global_attributes/title/index.html create mode 100644 files/ja/web/html/global_attributes/translate/index.html create mode 100644 files/ja/web/html/global_attributes/x-ms-format-detection/index.html (limited to 'files/ja/web/html/global_attributes') diff --git a/files/ja/web/html/global_attributes/accesskey/index.html b/files/ja/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..82a0381c30 --- /dev/null +++ b/files/ja/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,142 @@ +--- +title: accesskey +slug: Web/HTML/Global_attributes/accesskey +tags: + - Global attributes + - HTML + - Reference + - accesskey + - グローバル属性 +translation_of: Web/HTML/Global_attributes/accesskey +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

accesskey グローバル属性は、現在の要素のショートカットキーを生成するためのヒントを与えます。この属性は空白で区切った表示可能な文字 (キーボードから生成できるアクセント付き文字やその他の文字を含む) から成ります。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}
+ + + +
+

注: WHATWG の仕様書では、空白区切りの複数の文字を指定することができ、ブラウザーは対応する最初の一つを使用するとしています。しかし、これは多くのブラウザーでは動作しません。 IE や Edge は、他のコマンドと競合がない問題なく使用することができる最初の1つを使用します。

+
+ +

アクセスキーを有効にする方法は、ブラウザーやプラットフォームによって異なります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WindowsLinuxMac
FirefoxAlt + Shift + keyFirefox 57 以降では Control + Option + key または Control + Alt + key
+ Firefox 14 以降では Control + Alt + key
+ Firefox 13 以前では Control + key
Internet ExplorerAlt + key
+ Alt + Shift + key		N/A
EdgeN/AControl + Option + key
+ Control + Option + Shift + key
Google ChromeAlt + Shift + key
SafariN/A
Opera 15+Alt + keyControl + Alt + key
Opera 12Shift + Esc で、accesskey でアクセスできるコンテンツの一覧を開きます。そして key を押すと、該当項目を選択できます。
+ +

アクセシビリティの考慮

+ +

accesskey 属性は、ブラウザーの対応が貧弱であることに加え、数々の考慮事項があります。

+ + + +

これらの問題のため、一般用途のウェブサイトやウェブアプリの多くでは、 accesskey を使用しないよう一般的にアドバイスされています。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.2')}}現実の実装のためにもっと現実的な振る舞いを記述。
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}最新の W3C の {{SpecName('HTML5.1')}} から変更なし。
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}{{SpecName('HTML5 W3C')}} から変更なし。
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML4.01')}} から accesskey に設定できる文字が増えました。また、任意の要素に設定できるようになりました。
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }} 要素のみ対応。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.accesskey")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/autocapitalize/index.html b/files/ja/web/html/global_attributes/autocapitalize/index.html new file mode 100644 index 0000000000..8085ba917c --- /dev/null +++ b/files/ja/web/html/global_attributes/autocapitalize/index.html @@ -0,0 +1,50 @@ +--- +title: autocapitalize +slug: Web/HTML/Global_attributes/autocapitalize +tags: + - Autocapitalize + - HTML + - Reference + - ウェブ + - グローバル属性 +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

autocapitalize グローバル属性は列挙型の属性で、ユーザーによって入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうか、どのように行われるかを制御します。以下の値を指定することができます。

+ + + +

autocapitalize 属性は、物理キーボードからの入力時の挙動には影響しません。モバイル端末の仮想キーボードや音声入力など、他の入力方式の挙動に影響します。その様な方式では、文の最初の文字を自動的に大文字化することでユーザーを補助することがよくあります。 autocapitalize 属性は要素単位の挙動を上書きすることができます。

+ +

autocapitalize 属性では、 {{HTMLElement("input")}} 要素の {{htmlattrxref("type", "input")}} の値が url, email, password の場合は自動大文字化が有効になりません。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("html.global_attributes.autocapitalize")}}

diff --git a/files/ja/web/html/global_attributes/class/index.html b/files/ja/web/html/global_attributes/class/index.html new file mode 100644 index 0000000000..7700214254 --- /dev/null +++ b/files/ja/web/html/global_attributes/class/index.html @@ -0,0 +1,65 @@ +--- +title: class +slug: Web/HTML/Global_attributes/class +tags: + - HTML + - グローバル属性 + - リファレンス +translation_of: Web/HTML/Global_attributes/class +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

class グローバル属性 は、要素のクラスを空白区切りで並べたリストで、大文字小文字を区別します。クラスは CSS の クラスセレクター や JavaScript の DOM メソッド {{domxref("document.getElementsByClassName")}} といった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
+ + + +

仕様書ではクラス名の要件を示していませんが、ウェブ開発者は要素の外見ではなく、意味論的な目的を表す名前を使用することが推奨されます。例えば、あるクラスの要素が斜体で表示されるとしても、クラス名は斜体であることではなく特性を表すようにします。意味論的な名前は、ページの外見を変更した場合でも論理的であり続けます。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。
{{SpecName('HTML5.1', "elements.html#classes", "class")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML5 W3C')}} から変更はありません。
{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット。class 属性は、{{SpecName('HTML4.01')}} よりも真にグローバルな属性になりました。
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}{{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}} 以外の要素で対応
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.class")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/contenteditable/index.html b/files/ja/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..2159932d5a --- /dev/null +++ b/files/ja/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,83 @@ +--- +title: contenteditable +slug: Web/HTML/Global_attributes/contenteditable +tags: + - HTML + - contenteditable + - グローバル属性 + - テキスト編集 + - リファレンス +translation_of: Web/HTML/Global_attributes/contenteditable +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

contenteditable グローバル属性は、ユーザーによる要素の編集が可能かを示す列挙型属性です。可能である場合、ブラウザーは要素のウィジェットを編集可能なものに変更します。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}
+ + + +

この属性は、以下の値のうち一つを取る必要があります。

+ + + +

この属性が値なしで指定された場合、たとえば <label contenteditable>Example Label</label> のような場合、値は空文字列として扱われます。

+ +

この属性が存在しないか、値が無効であった場合、値は親要素から継承されます。したがって、親が編集可能であればこの要素は編集可能になります。

+ +

なお、許可されている値は true と false ですが、この属性は列挙型であり、論理型ではありません。

+ +

{{Glossary("caret", "キャレット")}}の挿入文字列を描画するのに使用される色は、 {{cssxref("caret-color")}} プロパティで設定できます。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML WHATWG")}}最新のスナップショットである {{SpecName("HTML5.2")}} から変更なし。
{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.2")}}{{SpecName("HTML WHATWG")}} のスナップショット、 {{SpecName("HTML5.1")}} から変更なし
{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.1")}}{{SpecName("HTML WHATWG")}} のスナップショット、 {{SpecName("HTML5 W3C")}} から変更なし
{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML5 W3C")}}{{SpecName("HTML WHATWG")}} のスナップショット、初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.contenteditable")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/contextmenu/index.html b/files/ja/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..a115fabfdf --- /dev/null +++ b/files/ja/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,122 @@ +--- +title: contextmenu +slug: Web/HTML/Global_attributes/contextmenu +tags: + - Deprecated + - Global attributes + - HTML + - Reference + - contextmenu +translation_of: Web/HTML/Global_attributes/contextmenu +--- +
{{HTMLSidebar("Global_attributes")}}
+ +
+

contextmenu 属性は廃止されており、今後、すべてのブラウザーから削除される予定です。

+
+ +

contextmenu グローバル属性 は、当該要素のコンテキストメニューとして使用する {{HTMLElement("menu")}} 要素の id です。

+ +

コンテキストメニューは、右クリックなどユーザーの操作によって現れます。 HTML5 ではこのメニューをカスタマイズできます。以下は入れ子のメニューを含む実装例です。

+ +

例

+ +

HTML

+ +
<body contextmenu="share">
+  <menu type="context" id="share">
+    <menu label="share">
+      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
+      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
+    </menu>
+  </menu>
+  <ol>
+    <li>
+      この例のどこででも、コンテキストメニューの "share" メニューを使用して
+      Twitter や Facebook に、このページを共有できます。
+    </li>
+    <li contextmenu="changeFont" id="fontSizing">
+      このリスト項目で、コンテキストメニューの
+      "Increase/Decrease font" を使用してテキストのサイズを変更できます。
+    </li>
+    <menu type="context" id="changeFont">
+      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
+      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
+    </menu>
+    <li contextmenu="ChangeImage" id="changeImage">
+      以下の画像で、コンテキストメニューから "Change Image" の
+      アクションを実行できます。<br />
+      <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png"
+          contextmenu="ChangeImage" id="promoButton" />
+      <menu type="context" id="ChangeImage">
+        <menuitem label="Change Image" onclick="changeImage()"></menuitem>
+      </menu>
+    </li>
+  </ol>
+</body>
+
+ +

JavaScript

+ +
function shareViaTwitter() {
+  window.open("https://twitter.com/intent/tweet?text=" +
+      "Hurray! I am learning ContextMenu from MDN via Mozilla");
+}
+
+function shareViaFacebook() {
+  window.open("https://facebook.com/sharer/sharer.php?u=" +
+      "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus");
+}
+
+function incFont() {
+  document.getElementById("fontSizing").style.fontSize = "larger";
+}
+
+function decFont() {
+  document.getElementById("fontSizing").style.fontSize = "smaller";
+}
+
+function changeImage() {
+  var index = Math.ceil(Math.random() * 39 + 1);
+  document.images[0].src =
+      "https://developer.mozilla.org/media/img/promote/promobutton_mdn" +
+      index + ".png";
+}
+ +

表示結果

+ +

{{EmbedLiveSample("Example", "100%", 400)}}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML5.1", "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2("HTML5.1")}}{{SpecName("HTML WHATWG")}} のスナップショットであり、初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.contextmenu")}}

+ +

[1] コマンドラインオプション --enable-blink-features=ContextMenu を使用して、実験的な実装を使用できます。 Chrome 52 および Opera 39 までは試験運用版のウェブプラットフォームの機能フラグでも有効化できましたが、ウェブ互換性の問題 のために削除されました。この機能の対応は Chrome bug 87553 で要望されています。

+ +

[2] Firefox モバイルから contextmenu 属性の対応が削除されました ({{bug(1424252)}})。

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/data-_star_/index.html b/files/ja/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..93fbea85f6 --- /dev/null +++ b/files/ja/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,82 @@ +--- +title: data-* +slug: Web/HTML/Global_attributes/data-* +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/data-* +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

data-* グローバル属性 はカスタムデータ属性と呼ばれる属性の組を作り、HTML と、スクリプトによる DOM 表現との間で、固有の情報を交換できるようにします。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}
+ + + +

すべてのカスタムデータは、属性を設定した要素の {{domxref("HTMLElement")}} インターフェイスを通して使用できます。 {{domxref("HTMLElement.dataset")}} プロパティがそれらへのアクセス手段を提供します。
+ * は、 XML 名の作成規則に加えて以下の制約に従う名前に置き換えることができます。

+ + + +

なお、 {{domxref("HTMLElement.dataset")}} プロパティは {{domxref("DOMStringMap")}} であり、またカスタムデータ属性名のハイフン (U+002D) はその次の文字を大文字化したもの (キャメルケース) に変換されるので、 data-test-value は HTMLElement.dataset.testValue (または HTMLElement.dataset["testValue"]) としてアクセスできます。

+ +

使用方法

+ +

data-* 属性を追加すると通常の HTML 要素でも、より複雑で強力なプログラムオブジェクトになります。例えばゲームで宇宙船の "スプライト" を、単純な {{HTMLElement("img")}} 要素に class 属性といくつかの data-* 属性を設定したもので表すことができるでしょう。

+ +
<img class="spaceship cruiserX3" src="shipX3.png"
+  data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
+  data-x="414354" data-y="85160" data-z="31940"
+  onclick="spaceships[this.dataset.shipId].blasted()">
+
+ +

もっと深い HTML のデータ属性の使用については、データ属性の使用を参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。
{{SpecName('HTML5.1', "dom.html#element-attrdef-global-data", "data-*")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショット、 {{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "dom.html#element-attrdef-global-data", "data-*")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.data_attributes")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/dir/index.html b/files/ja/web/html/global_attributes/dir/index.html new file mode 100644 index 0000000000..5eb464b651 --- /dev/null +++ b/files/ja/web/html/global_attributes/dir/index.html @@ -0,0 +1,93 @@ +--- +title: dir +slug: Web/HTML/Global_attributes/dir +tags: + - BiDi + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dir +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

dir グローバル属性は、要素のテキストの書字方向を示す列挙型属性です。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}
+ + + +

次の値を使用することができます。

+ + + +
+

使用上の注意: この属性は、意味論的な位置づけが異なる場所を示す {{HTMLElement("bdo")}} 要素で必須です。

+ + +
+ +
+

ブラウザーではユーザーが {{ HTMLElement("input") }} や {{ HTMLElement("textarea") }} の書字方向を変更することを許可して、コンテンツの執筆を支援していることがあります。 Chrome と Safari は入力フィールドのコンテキストメニューに書字方向のオプションを提供している一方、 Internet Explorer と Edge はキーバインド Ctrl + Left Shift および Ctrl + Right Shift を使用します。 Firefox は Ctrl/Cmd + Shift + X を使用しますが、 dir 属性の値は変更しません。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。
{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML5 W3C')}} から変更はありません。
{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML4.01')}} の仕様に値 auto を追加、および真にグローバルな属性になりました。
{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}{{Spec2('HTML4.01')}}{{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} を除くすべての要素で対応します。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.dir")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/draggable/index.html b/files/ja/web/html/global_attributes/draggable/index.html new file mode 100644 index 0000000000..8b6996f5f0 --- /dev/null +++ b/files/ja/web/html/global_attributes/draggable/index.html @@ -0,0 +1,66 @@ +--- +title: draggable +slug: Web/HTML/Global_attributes/draggable +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

draggable グローバル属性 は列挙型属性で、要素がブラウザーの本来の動作と HTML ドラッグ＆ドロップ API のどちらの動作でドラッグするかを示す列挙型属性です。

+ +

draggable は以下の値を取ることができます。

+ + + +
+

この属性は列挙型であり、論理型ではありません。 true または false の値が必須であり、 <img draggable> のような省略形は認められません。正しい使用法は <img draggable="false"> です。

+
+ +

この属性が設定されなかった場合の既定値は auto であり、ブラウザーの既定のドラッグ動作であることを意味します。テキストの選択範囲、画像、リンクのみがドラッグ可能です。他の要素では、ドラッグ＆ドロップできるようにするためには {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} イベントを設定する必要があります (こちらの包括的なサンプルにあるように)。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML WHATWG")}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。
{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.2")}}変更なし
{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.1")}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.draggable")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/dropzone/index.html b/files/ja/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..290b577040 --- /dev/null +++ b/files/ja/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,48 @@ +--- +title: dropzone +slug: Web/HTML/Global_attributes/dropzone +tags: + - Deprecated + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dropzone +--- +
{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}
+ +

dropzone グローバル属性 は、 HTML Drag and Drop API を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用できます。

+ + + +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.dropzone")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/hidden/index.html b/files/ja/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..d44d89794e --- /dev/null +++ b/files/ja/web/html/global_attributes/hidden/index.html @@ -0,0 +1,71 @@ +--- +title: hidden +slug: Web/HTML/Global_attributes/hidden +tags: + - HTML + - Reference + - hidden + - グローバル属性 +translation_of: Web/HTML/Global_attributes/hidden +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

hidden グローバル属性 は、要素はまだ、あるいはもはや関連性がないことを示す論理型属性です。例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。ブラウザーは、 hidden 属性を設定している要素を表示しません。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}
+ + + +

hidden 属性は、 1 つの表現方法からのみコンテンツを隠す目的で使用してはいけません。何かが hidden とマークされている場合、それは、例えば読み上げアプリを含むすべての表現方法から隠されます。

+ +

隠された要素は隠されていない要素からリンクするべきではありません。隠された要素の子孫である要素はまだアクティブであり、スクリプト要素はまだ実行でき、フォーム要素はまだ送信できることを意味します。しかし、要素とスクリプトは、他の文脈で隠された要素を参照することがあります。

+ +

例えば、 href 属性を使用して hidden 属性が設定された部分にリンクを張るのは不適切です。コンテンツが利用できないか無関係ならば、リンクする理由がないからです。

+ +

しかし、 ARIA の aria-describedby 属性を使って隠された要素の記述を参照することは良いことです。記述を隠すことは、それ自身では役に立たないことを意味しますが、記述された要素から参照される特定の文脈に限っては有用であるように記述することができます。

+ +

同様に、 canvas 要素に hidden 属性をつけたものはオフスクリーンバッファーとしてグラフィックエンジンを記述することができますし、フォーム制御では hidden のフォーム要素をフォーム属性を使用して参照することができます。

+ +
+

注: hidden 属性を持つ要素について、 CSS の {{cssxref("display")}} プロパティの値を変更すると、挙動を上書きします。例えば display: flex を設定した要素は、 hidden 属性が存在しても表示されます。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}}CSS による hidden 属性のデフォルトレンダリング方法の案を定義
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショットであり、この属性を初めて定義しました。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.hidden")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/id/index.html b/files/ja/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..3716797fc7 --- /dev/null +++ b/files/ja/web/html/global_attributes/id/index.html @@ -0,0 +1,74 @@ +--- +title: id +slug: Web/HTML/Global_attributes/id +tags: + - Global attributes + - HTML + - Reference + - Web + - id + - グローバル属性 +translation_of: Web/HTML/Global_attributes/id +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

id {{glossary("global attribute", "グローバル属性")}}は、文書全体で一意でなければならない識別子 (ID) を定義します。この属性の用途は、リンク (フラグメント識別子を使用)、スクリプト、スタイル ({{glossary("CSS")}} を使用) で要素を特定することです。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
+ + + +
+

この属性の値は不伝導性の文字列です。つまり、ウェブ作者は人間が理解するための情報を伝えるためにこの情報を使用するべきではありません (ただし、 ID を人間が理解できるようにすることは、コードを理解するために有用です。例えば、 ticket-18659 と r45tgfe-freds&$@ を比べてみてください)。

+
+ +

id の値に{{glossary("whitespace", "ホワイトスペース")}}文字 (空白やタブなど) を含めてはいけません。ブラウザーはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れる {{htmlattrxref("class")}} 属性とは対照的に、要素は ID の値をひとつだけ持つことができます。

+ +
+

注: {{glossary("ASCII")}} 英文字、数字、'_'、'-'、'.' 以外の文字は HTML 4 で許容されていなかったため、使用した場合に互換性の問題を引き起こす可能性があります。この制約は {{glossary("HTML5")}} で外されましたが、互換性のために ID は文字で始めるようにしましょう。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショットであり、 {{SpecName('HTML5 W3C')}} から変更なし。
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショットであり、先頭の文字以外で '_'、'-'、'.' が使用可能になった。また、真にグローバルな属性になった。
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}{{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}} を除くすべての要素で対応。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.id")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/index.html b/files/ja/web/html/global_attributes/index.html new file mode 100644 index 0000000000..182b6aeae6 --- /dev/null +++ b/files/ja/web/html/global_attributes/index.html @@ -0,0 +1,199 @@ +--- +title: グローバル属性 +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

グローバル属性は、すべての HTML 要素で共通の属性です。すべての要素で使用できますが、要素によっては効果がないこともあります。

+ +

グローバル属性は、標準仕様で未定義の要素を含む すべての HTML 要素で指定することができます。つまり、その要素を使用することで文書が HTML5 に準拠しなくなるような標準外の要素であっても、これらの属性は受け入れなければなりません。例えば <foo> は妥当な HTML 要素ではありませんが、 HTML5 準拠のブラウザーは <foo hidden>...</foo> とマークアップされたコンテンツを非表示にします。

+ +

基本的な HTML グローバル属性に加えて、以下のグローバル属性も存在します。

+ + + +

グローバル属性の一覧

+ +
+
{{HTMLAttrDef("accesskey")}}
+
現在の要素に対するキーボードショートカットを生成するヒントを与えます。この属性の値は、空白区切りの文字のリストです。ブラウザーは、この文字リストの中から、コンピューターのキーボードレイアウトに存在する最初の文字を使用します。
+
{{HTMLAttrDef("autocapitalize")}}
+
ユーザーが入力／編集したとき、入力文字列の大文字化を自動的に行うか、どこを大文字化するかを制御します。以下の値を指定することができます。 +
    +
  • off または none: 自動的な大文字化は行いません (すべての文字は小文字のままです)。
    • +
  • on または sentences: 各文の最初の文字を大文字にします。それ以外の文字は小文字のままです。
    • +
  • words:各単語の最初の文字を大文字にします。それ以外の文字は小文字のままです。
    • +
  • characters: すべての文字を大文字にします。
    • +
+
+
{{HTMLAttrDef("class")}}
+
要素のクラスの空白区切りリストです。 CSS の クラスセレクター や JavaScript の {{DOMxRef("Document.getElementsByClassName()")}} メソッドのような関数を使えば、特定の要素を選択したりアクセスしたりすることができます。
+
{{HTMLAttrDef("contenteditable")}}
+
ユーザーによる要素の編集が可能かどうかを示す列挙型属性です。編集可能な場合、ブラウザーはその要素を編集可能なものに変更します。この属性の値は、以下のどちらかでなければなりません。 +
    +
  • true または 空文字列: 要素が編集可能であることを示す
    • +
  • false: 要素は編集不可であることを示す
    • +
+
+
{{HTMLAttrDef("contextmenu")}} {{Obsolete_Inline}}
+
その要素のコンテキストメニューとして使用する {{HTMLElement("menu")}} の id を指定します。
+
{{HTMLAttrDef("data-*")}}
+
これらの属性はカスタムデータ属性と呼ばれており、 HTML とその {{glossary("DOM")}} 表現との間で、固有の情報を交換できるようにします。すべてのカスタムデータは、その属性を設定した要素の {{DOMxRef("HTMLElement")}} インターフェイスを通して使用することができます。 {{DOMxRef("HTMLElement.dataset")}} プロパティでカスタムデータにアクセスできます。
+
{{HTMLAttrDef("dir")}}
+
要素のテキストの書字方向を示す、列挙型属性です。以下の値を使用することができます。 +
    +
  • ltr: left to right を表し、左から右へ記述する言語 (日本語、英語など) に対して使用します。
    • +
  • rtl: right to left を表し、右から左へ記述する言語 (アラビア語など) に対して使用します。
    • +
  • auto: ユーザーエージェントに決定させます。要素の中の文字を、書字方向を強く決定する文字が見つかるまで解析し、その方向を要素全体に適用する基本的なアルゴリズムを使用します。
    • +
+
+
{{HTMLAttrDef("draggable")}}
+
Drag and Drop API を使用して要素をドラッグすることができるかを示す列挙型属性です。以下の値を使用することができます。 +
    +
  • true: 要素がドラッグ可能であることを示す
    • +
  • false: 要素がドラッグ不可であることを示す
    • +
+
+
{{HTMLAttrDef("dropzone")}} {{deprecated_inline}}
+
Drag and Drop API を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用することができます。 +
    +
  • copy: ドラッグした要素をドロップすることで、コピーを生成することを示す
    • +
  • move: ドラッグした要素を新しい場所に移動することを示す
    • +
  • link: ドラッグしたデータへのリンクを生成する
    • +
+
+
{{HTMLAttrDef("exportparts")}} {{Experimental_Inline}}
+
シャドウ部品を入れ子になったシャドウツリーから軽いツリーへ変換しながらエクスポートするために使用します。
+
{{HTMLAttrDef("hidden")}}
+
要素はまだ、あるいはもはや関連性がないことを示す、論理属性です。例えば、ログイン処理が完了するまで使えない要素を隠すために使用できます。ブラウザーはこの要素を表示しません。この属性は、表示することが正当なコンテンツを隠すために使用してはいけません。
+
{{HTMLAttrDef("id")}}
+
文書全体で一意でなければならない識別子 (ID) を定義します。(フラグメント識別子を使った) リンク、スクリプト、 (CSS での) スタイルづけなど要素を特定するために使用されます。
+
{{HTMLAttrDef("inputmode")}}
+
この要素やその内容を編集する時に使用する仮想キーボードの種類の構成に関するヒントをブラウザーに与えます。主に {{HTMLElement("input")}} 要素で使用されますが、 {{htmlattrxref("contenteditable")}} モードにあるすべての要素で使用することができます。
+
{{HTMLAttrDef("is")}}
+
標準の HTML 要素が、登録したカスタム内蔵要素のようにふるまうように指定できます（詳しくはカスタム要素の使用を参照）。
+
+ +
+

注: item* 属性は、 WHATWG HTML Microdata 機能の一部です。

+
+ +
+
{{HTMLAttrDef("itemid")}}
+
項目の一意でグローバルな識別子です。
+
{{HTMLAttrDef("itemprop")}}
+
項目にプロパティを追加するために使用します。すべての HTML 要素で itemprop 属性を指定することができ、この itemprop は名前と値の組で構成されます。
+
{{HTMLAttrDef("itemref")}}
+
itemscope 属性を持つ要素の子孫以外のプロパティは、 itemref を使用して項目に関連付けることができます。文書中の他の場所で追加のプロパティがある要素の id (itemid ではない) の一覧を提供します。
+
{{HTMLAttrDef("itemscope")}}
+
itemscope は (通常) {{htmlattrxref("itemtype")}} とともに、ブロックに含まれている HTML が特定の項目に関するものであることを指定します。 itemscope は項目を作成し、それに関連付けられる itemtype のスコープを定義します。 itemtype は、項目やそのプロパティの文脈を説明するボキャブラリー (schema.org など) の有効な URL です。
+
{{HTMLAttrDef("itemtype")}}
+
データ構造内の itemprop （項目のプロパティ）を定義するために使う、ボキャブラリーの URL を指定します。 {{htmlattrxref("itemscope")}} は、 itemtype で設定したボキャブラリーがデータ構造内でアクティブになるスコープを設定するために使用します。
+
{{HTMLAttrDef("lang")}}
+
要素の言語を定義します。編集不可能な要素を記述している言語、または編集可能な要素に記述されるべき言語を定義します。この属性の値は、 Tags for Identifying Languages (BCP47) で定義された形式の「言語タグ」（ハイフン区切りの「言語サブタグ」列）です。xml:lang はこの要素より優先します。
+
{{HTMLAttrDef("part")}}
+
要素のパート名の空白区切りによるリストです。パート名を利用すると、 CSS がシャドウツリー内にある特定の要素を {{CSSxRef("::part")}} 擬似要素を使用することで選択し、スタイル付けすることができます。
+
{{HTMLAttrDef("slot")}}
+
shadow DOM のシャドウツリー内のスロットを、要素に割り当てます。slot 属性を持つ要素は、slot 属性の値と一致する {{htmlattrxref("name", "slot")}} 属性の値を持つ {{HTMLElement("slot")}} 要素が生成したスロットに割り当てられます。
+
{{HTMLAttrDef("spellcheck")}}
+
要素でスペルチェックを行うかどうかを定義する、列挙型属性です。以下の値が使えます: +
    +
  • true: 可能であればその要素でスペルチェックを行うことを示す
    • +
  • false: その要素でスペルチェックを行わないことを示す
    • +
+
+
{{HTMLAttrDef("style")}}
+
要素に適用する CSS スタイル宣言を設定します。なお、スタイルは別のファイルで定義することが推奨されます。この属性と {{HTMLElement("style")}} 要素の主な用途は、例えばテストのために、すばやくスタイルを適用することです。
+
{{HTMLAttrDef("tabindex")}}
+
要素が入力フォーカスを受け付ける (focusable) 場合に、順番的なキーボードナビゲーションに参加するかどうか、参加するならばどの位置に入るかを示す、整数値属性です。いくつかの値を取ることができます。 +
    +
  • 負数: 要素はフォーカスを受け付けますが、順番的なキーボードナビゲーションでは到達できません。
    • +
  • 0: 要素はフォーカスを受け付けて、順番的なキーボードナビゲーションで到達できます。その順番はプラットフォームの慣習に従って定義されます。
    • +
  • 正数: 要素はフォーカスを受け付けて、順番的なキーボードナビゲーションで到達できることを表します。その相対的な順序は属性の値で定義され、 tabindex の数値の昇順にフォーカスを移します。複数の要素が同じ tabindex の値を持っている場合は、文書内における要素の相対的な位置に従います。
    • +
+
+
{{HTMLAttrDef("title")}}
+
要素に関するアドバイザリー情報を表すテキストを設定します。この情報は通常、ツールチップとしてユーザーに表示されますが、必ず表示されるとは限りません。
+
{{htmlattrdef("translate")}} {{Experimental_Inline}}
+
要素の属性値や子孫 {{DOMxRef("Text")}} ノードの値が、ページをローカライズするときに翻訳対象となるか、あるいは変更せずにおくかを指定する、列挙型属性です。以下の値を使用することができます。 +
    +
  • 空文字列または yes: 要素が翻訳対象になることを示します。
    • +
  • no: 要素が翻訳対象にならないことを示します。
    • +
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML WHATWG")}}
{{SpecName("CSS Shadow Parts", "#exposing")}}{{Spec2("CSS Shadow Parts")}}part および exportparts の各グローバル属性を追加。・
{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.2")}}{{SpecName("HTML WHATWG")}} のスナップショット。 {{SpecName("HTML5.1")}} に itemid, itemprop, itemref, itemscope, itemtype を追加。
{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.1")}}{{SpecName("HTML WHATWG")}} のスナップショット。 {{SpecName("HTML5 W3C")}} に spellcheck, draggable, dropzone, spellcheck を追加。
{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5 W3C")}}{{SpecName("HTML WHATWG")}} のスナップショット。 {{SpecName("HTML4.01")}} に、グローバル属性の概念を導入し、 dir, lang, style, id, class, tabindex, accesskey, title が真にグローバルな属性になった。
+ 当初は XHTML の一部であった xml:lang が、HTML に組み込まれた。
+ hidden, data-*, contenteditable, translate を追加。
{{SpecName("HTML4.01")}}{{Spec2("HTML4.01")}}グローバル属性の定義なし。後の仕様書でグローバル属性になるいくつかの属性を、要素のサブセットで定義。
+ class および style は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}
+ dir は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}
+ id は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}
+ lang は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}
+ tabindex は、次の要素のみで対応しています。 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}
+ accesskey は、次の要素のみで対応しています。 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}
+ title は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/inputmode/index.html b/files/ja/web/html/global_attributes/inputmode/index.html new file mode 100644 index 0000000000..4dd2709789 --- /dev/null +++ b/files/ja/web/html/global_attributes/inputmode/index.html @@ -0,0 +1,72 @@ +--- +title: inputmode +slug: Web/HTML/Global_attributes/inputmode +tags: + - Attribute + - Editing + - Forms + - Global attributes + - HTML + - Input + - Reference + - Text + - Web + - contenteditable + - global + - inputmode + - text input +translation_of: Web/HTML/Global_attributes/inputmode +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

inputmode はグローバル属性で、ユーザーが要素やその内容を編集する際に入力されるデータの型のヒントとなる列挙型属性です。下記の値が存在します。

+ +
+
none
+
仮想キーボードなし。ページが独自のキーボード入力を実装している場合のためのものです。
+
text (既定値)
+
ユーザーの現在のロケールにおける標準的な入力キーボードです。
+
decimal
+
実数を入力するキーボードで、数字とユーザーのロケール上で適切な区切り文字 (ふつうは . または ,) を含みます。負号キー (-) を表示するかどうかは端末によります。
+
numeric
+
数字を入力するキーボードですが、数字の 0 から 9 までのみを必要とするものです。負号キーを表示するかどうかは端末によります。
+
tel
+
電話番号を入力するテンキーで、 0 から 9 までの数字と、アスタリスク (*)、シャープ (#) キーがあります。電話番号を要求する入力欄は、ふつうは代わりに {{HTMLElement("input/tel", '<input type="tel">')}} を使用してください。
+
search
+
検索入力に最適化された仮想キーボードです。例えば、 return/submit キーのラベルが「検索」になっていたり、他の最適化が行われている可能性もあります。検索クエリを要求する入力欄は、ふつうは代わりに {{HTMLElement("input/search", '<input type="search">')}} を使用してください。
+
email
+
電子メールアドレスの入力に最適化された仮想キーボードです。ふつう @ の文字を含むなどの他の最適化が行われます。メールアドレスの入力を要求する入力欄は、ふつうは代わりに {{HTMLElement("input/email", '<input type="email">')}} を使用してください。
+
url
+
URL の入力に最適化された仮想キーボードです。例えば / キーが目立つ場所に配置されているなどです。履歴へのアクセス機能などの拡張機能が含まれている場合もあります。 URL の入力を要求する入力欄は、ふつうは代わりに {{HTMLElement("input/url", '<input type="url">')}} を使用してください。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}{{Spec2("HTML WHATWG")}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.inputmode")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/is/index.html b/files/ja/web/html/global_attributes/is/index.html new file mode 100644 index 0000000000..642dd49c0c --- /dev/null +++ b/files/ja/web/html/global_attributes/is/index.html @@ -0,0 +1,67 @@ +--- +title: is +slug: Web/HTML/Global_attributes/is +tags: + - Global attributes + - HTML + - Reference + - is +translation_of: Web/HTML/Global_attributes/is +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

is グローバル属性で、標準の HTML 要素が定義されたカスタム内蔵要素のように振舞うよう指定することができます (詳しくは カスタム要素の使用 を参照してください)。

+ +

この属性は、指定されたカスタム要素名が現在の文書で正常に定義され、適用されている要素型が拡張されている場合にのみ使用します。

+ +

例

+ +

次のコードは、 word-count-web-component の例から取得されたものです (ライブで参照)。

+ +
// 要素のクラスを作成
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Constructor contents ommitted for brevity
+    ...
+
+  }
+}
+
+// 新しい要素を定義
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
<p is="word-count"></p>
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.is")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/itemid/index.html b/files/ja/web/html/global_attributes/itemid/index.html new file mode 100644 index 0000000000..2638724527 --- /dev/null +++ b/files/ja/web/html/global_attributes/itemid/index.html @@ -0,0 +1,107 @@ +--- +title: itemid +slug: Web/HTML/Global_attributes/itemid +tags: + - HTML + - HTML マイクロデータ + - Reference + - itemid + - グローバル属性 + - マイクロデータ + - 属性 +translation_of: Web/HTML/Global_attributes/itemid +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

itemid グローバル属性は、項目の固有でグローバルな識別子の形でマイクロデータを提供します。 itemid 属性は、 {{htmlattrxref("itemscope")}} および {{htmlattrxref("itemtype")}} 属性のある要素にだけ指定することができます。また itemid は、グローバル識別子に対応する語彙を参照または定義する itemtype に関係した itemscope 属性を持つ要素でのみ使用することができます。

+ +

itemtype のグローバル識別子の正確な意味は、それを特定する語彙の中で識別子の定義が提供されます。語彙は同じグローバル識別子を持つ複数の項目が共存できるかどうか、もしそうであれば、同じ識別子を持つ項目がどのように扱われるかを定義します。

+ +

注: {{glossary("WHATWG")}} の定義では、 itemid が {{glossary("URL")}} でなければならないと指定しています。しかし、以下の例では {{glossary("URN")}} も使用されることを明らかに示しています。この矛盾はマイクロデータ仕様の不完全性を反映したものかもしれません。

+ +

例

+ +

HTML

+ +
<dl itemscope
+    itemtype="http://vocab.example.net/book"
+    itemid="urn:isbn:0-330-34032-8">
+<dt>Title <dd itemprop="title">The Reality Dysfunction
+<dt>Author <dd itemprop="author">Peter F. Hamilton
+<dt>Publication date
+<dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl>
+ +

構造化データ

+ + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtype: itemid +
http://vocab.example.net/book: urn:isbn:0-330-34032-8
+
itemproptitleThe Reality Dysfunction
itempropauthor +
Peter F. Hamilton
+
itemproppubdate1996-01-26
+ +

結果

+ +

{{EmbedLiveSample('HTML', '', '', '', 'Web/HTML/Global_attributes/itemid')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.itemid")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/itemprop/index.html b/files/ja/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..7efdec34b5 --- /dev/null +++ b/files/ja/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,475 @@ +--- +title: itemprop +slug: Web/HTML/Global_attributes/itemprop +tags: + - HTML + - HTML マイクロデータ + - Reference + - グローバル属性 + - マイクロデータ + - 属性 +translation_of: Web/HTML/Global_attributes/itemprop +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

itemprop グローバル属性は、アイテムにプロパティを追加するために使用します。すべての HTML 要素に itemprop 属性を設定することができ、 itemprop は名前と値の組み合わせで構成されます。名前と値の組み合わせはプロパティと呼ばれ、1つまたは複数のプロパティでアイテムを構成します。プロパティ値は文字列又は URL のどちらかで、 {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}}, {{HTMLElement("video")}} など、広範にわたる要素と関連付けすることができます。

+ +

例

+ +

以下の例は itemprop 属性でマークアップされた要素のセットのソースと、その後で結果の構造化データを表す表を示します。

+ +

HTML

+ +
<div itemscope itemtype="http://schema.org/Movie">
+  <h1 itemprop="name">Avatar</h1>
+  <span>Director:
+    <span itemprop="director">James Cameron</span>
+    (born August 16, 1954)</span>
+  <span itemprop="genre">Science fiction</span>
+  <a href="../movies/avatar-theatrical-trailer.html"
+    itemprop="trailer">Trailer</a>
+</div>
+ +

構造化データ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Item
itemprop nameitemprop value
itempropnameAvatar
itempropdirectorJames Cameron
itempropgenreScience fiction
itemproptrailer../movies/avatar-theatrical-trailer.html
+ +

プロパティ

+ +

プロパティは、文字列か URL のどちらかの形で値を持ちます。文字列の値が URL である場合、 {{HTMLElement("a")}} 要素とその {{htmlattrxref("href", "a")}} 属性、 {{HTMLElement("img")}} 要素とその {{htmlattrxref("src", "img")}} 属性、または外部リソースにリンクしたり埋め込んだりするその他の要素を用いて表現されます。

+ +

文字列の値を持つ3つのプロパティ

+ +
<div itemscope>
+ <p>My name is
+   <span itemprop="name">Neil</span>.</p>
+ <p>My band is called
+   <span itemprop="band">Four Parts Water</span>.</p>
+ <p>I am
+   <span itemprop="nationality">British</span>.</p>
+</div>
+ +

値が URL である "image" による1つのプロパティ

+ +
<div itemscope>
+ <img itemprop="image"
+   src="google-logo.png" alt="Google">
+</div>
+ +

文字列の値が人間にとって読んだり理解したりするのが簡単ではない場合（例えば、数字や文字による長い文字列）、 data 要素の中身にもっと人間理解しやすいもの（これは構造化データの一部ではありません。―以下の例を参照）を入れた上で、 value 属性を使用して表現することができます。

+ +

値がプロダクト ID であるプロパティがあるアイテム

+ +

ID が人間にとって読みやすくない場合、 ID の代わりに製品名が人間から見える文字列になります。

+ +
<h1 itemscope>
+ <data itemprop="product-id"
+   value="9678AOU879">The Instigator 2000</data>
+</h1>
+ +

数値データの場合、 meter 要素とその value 属性を使用することができます。

+ +

meter 要素

+ +
<div itemscope itemtype="http://schema.org/Product">
+ <span itemprop="name">Panasonic White
+   60L Refrigerator</span>
+ <img src="panasonic-fridge-60l-white.jpg" alt="">
+  <div itemprop="aggregateRating"
+       itemscope
+       itemtype="http://schema.org/AggregateRating">
+   <meter itemprop="ratingValue"
+     min=0 value=3.5 max=5>Rated 3.5/5</meter>
+   (based on <span
+     itemprop="reviewCount">11</span>
+     customer reviews)
+  </div>
+</div>
+ +

同様に、日付や時間に関連するデータについては、 time 要素と datetime 属性を使用することができます。

+ +

値が日付であるプロパティ、 "birthday" を1つだけ持つアイテム

+ +
<div itemscope>
+ I was born on <time
+   itemprop="birthday"
+   datetime="2009-05-10">May 10th 2009</time>.
+</div>
+ +

プロパティはまた、プロパティを宣言する要素で itemscope 属性を置くことによって、名前と値の組のグループを持つことができます。それぞれの値は、文字列か名前と値の組（すなわちアイテム）のグループのいずれかです。

+ +

外側のアイテムは人物を表し、内側のアイテムはバンドを表す

+ +
<div itemscope>
+ <p>Name:
+   <span itemprop="name">Amanda</span></p>
+ <p>Band:
+   <span itemprop="band" itemscope>
+     <span itemprop="name">Jazz Band</span>
+     (<span itemprop="size">12</span>
+     players)</span></p>
+</div>
+ +

上の外側のアイテムは、 "name" と "band" の2つのプロパティを持ちます。 "name" は "Amanda" であり、 "band" はそれ自身がアイテムであり、2つのプロパティ "name" と "size" を持ちます。バンドの "name" は "Jazz Band" であり、 "size" は "12" です。この例における外側のアイテムは、トップレベルのマイクロデータアイテムです。他の一部でないアイテムは、トップレベルマイクロデータアイテムと呼ばれます。

+ +

プロパティがすべてアイテムから分離された例

+ +

この例は前のものと同じですが、すべてのプロパティがアイテムから分離されています。

+ +
<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name:
+  <span itemprop="name">Amanda</span></p>
+<div id="b"
+  itemprop="band"
+  itemscope itemref="c"></div>
+<div id="c">
+ <p>Band:
+   <span itemprop="name">Jazz Band</span></p>
+ <p>Size:
+   <span itemprop="size">12</span> players</p>
+</div>
+ +

これは1つ前の例と同じ結果になります。最初のアイテムは2つのプロパティを持ちます、 "name" は "Amanda" に設定され、 "band" はもう1つのアイテムに設定されます。2つ目のアイテムはさらに2つのプロパティを持ち、 "name" は "Jazz Band" に設定され、 "size" は "12" に設定されます。

+ +

アイテムは同じ名前で異なる値をもつ複数のプロパティを持つことができます。

+ +

2つの味のアイスクリーム

+ +
<div itemscope>
+ <p>Flavors in my favorite ice cream:</p>
+ <ul>
+  <li itemprop="flavor">Lemon sorbet</li>
+  <li itemprop="flavor">Apricot sorbet</li>
+ </ul>
+</div>
+ +

この結果は2つのプロパティを持つアイテムになり、どちらも名前は "flavor" で、値は "Lemon sorbet" および "Apricot sorbet" になります。

+ +

プロパティを導入する要素は、複数のプロパティが同じ値を持つ場合に重複を避けるために、一度に複数のプロパティを導入することもできます。

+ +

2つのプロパティ "favorite-color" 及び "favorite-fruit" を持ち、どちらも "orange" の値に設定されるアイテム

+ +
<div itemscope>
+ <span
+  itemprop="favorite-color
+    favorite-fruit">orange</span>
+</div>
+ +
+

メモ: マイクロデータとマイクロデータがマークアップされる文書のコンテンツに関係はありません。

+
+ +

2つの異なる方法でマークアップされた同じ構造化データ

+ +

以下の2つの例には意味的な違いはありません。

+ +
<figure>
+ <img src="castle.jpeg">
+ <figcaption><span
+   itemscope><span
+   itemprop="name">The Castle</span></span>
+     (1986)</figcaption>
+</figure>
+ +
<span itemscope><meta
+  itemprop="name"
+  content="The Castle"></span>
+<figure>
+ <img src="castle.jpeg">
+ <figcaption>The Castle
+  (1986)</figcaption>
+</figure>
+ +

どちらも caption を伴う figure を持ち、両者とも、 figure に完全に関連しない、名前 "name" と値 "The Castle" をもつ名前と値の組を持つアイテムを持ちます。唯一の違いは、ユーザーが文書の外に figcaption をドラッグする場合、アイテムがドラッグ＆ドロップデータに含まれることです。アイテムに関連付けられる画像は含まれません。

+ +

名前と値

+ +

プロパティは、大文字・小文字を区別して名前と値の組を表す一意なトークンの順序なしセットです。下記の例で、それぞれのデータセルはトークンです。

+ +

名前の例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Item
itemprop nameitemprop value
itempropcountryIreland
itempropOption2
itemprophttps://www.flickr.com/photos/nlireland/6992065114/Ring of Kerry
itempropimghttps://www.flickr.com/photos/nlireland/6992065114/
itempropwebsiteflickr
itemprop(token)(token)
+ +

トークンは、文字列か URL のいずれかです。アイテムは、 URL の場合に型付きアイテムと呼ばれます。そうでなければ文字列です。文字列は、ピリオドまたはコロンを含むことができません (下記参照)。

+ +
    +
  1. アイテムが型付きアイテムの場合、次のいずれかでなければなりません。 +
      +
    1. 定義されたプロパティ名。
      2. +
    2. または、妥当な URL。これは、語彙定義を参照します。
      3. +
    3. 独自のアイテムプロパティ名を表す妥当な URL (つまり、公式な私用で定義されていないもの)。
      4. +
    +
    2. +
  2. アイテムが型付きアイテムでない場合は、次のようになります。 +
      +
    1. "." (U+002E FULL STOP)文字と ":" (U+003A COLON) 文字を含まず、所有者のアイテムプロパティ名 (公式な仕様で定義されないもの) として使用される文字列。
      2. +
    +
    3. +
+ +

メモ: 上記の規則では、 URL ではない値では ":" が許可されていません。なぜならそうでなければ URL と区別できないからです。 "." 文字をもつ値は、将来の拡張のために予約されています。空白文字は複数のトークンとして解析されるために許可されません。

+ +

値

+ +

名前と値の組のプロパティ値は、次のリストで最初に一致するものに与えられます。

+ + + +

それ以外

+ + + +

プロパティの値が URL である場合、プロパティは URL プロパティ要素を使用して指定されなければなりません。 URL プロパティ要素は、 a, area, audio, embed, iframe, img, link, object, source, track, video 要素です。

+ +

名前の順序

+ +

名前は互いに順不同ですが、特定の名前が複数の値を持つ場合、その値は相対的な順序を持ちます。

+ +

以下の例では、 "a" プロパティは "1" 及び "2" の値をその順番で持ちますが、 "a" プロパティが "b" プロパティの前にくることは重要ではありません

+ +
<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
+ <p itemprop="b">test</p>
+</div>
+ +

以下のものは同等です

+ +
<div itemscope>
+ <p itemprop="b">test</p>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
+</div>
+ +

以下も同等です

+ +
<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+ +

以下も同等です

+ +
<div id="x">
+ <p itemprop="a">1</p>
+</div>
+<div itemscope itemref="x">
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+
+ +

その他の例

+ +

HTML

+ +
<dl itemscope
+  itemtype="http://vocab.example.net/book"
+  itemid="urn:isbn:0-330-34032-8">
+ <dt>Title
+   <dd
+    itemprop="title">The Reality Dysfunction
+ <dt>Author
+   <dd
+     itemprop="author">Peter F. Hamilton
+ <dt>Publication date
+ <dd><time
+   itemprop="pubdate"
+   datetime="1996-01-26">26 January 1996</time>
+</dl>
+
+ +

構造化データ

+ + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtype: itemidhttp://vocab.example.net/book: urn:isbn:0-330-34032-8
itemproptitleThe Reality Dysfunction
itempropauthorPeter F. Hamilton
itemproppubdate1996-01-26
+ +

結果

+ +

{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}{{Spec2('HTML Microdata')}}
{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.itemprop")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/itemref/index.html b/files/ja/web/html/global_attributes/itemref/index.html new file mode 100644 index 0000000000..7d40896d1d --- /dev/null +++ b/files/ja/web/html/global_attributes/itemref/index.html @@ -0,0 +1,98 @@ +--- +title: itemref +slug: Web/HTML/Global_attributes/itemref +tags: + - HTML + - HTML マイクロデータ + - Reference + - グローバル属性 + - マイクロデータ + - 属性 +translation_of: Web/HTML/Global_attributes/itemref +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

グローバル属性の itemref プロパティは、 itemscope 属性を持つ要素の子孫でない場合、 itemref を使用してアイテムと関連付けができます。

+ +

itemref は文書内のどこかにある追加のプロパティがある要素の ID （itemid ではない）のリストを提供します。

+ +

itemref 属性は itemscope 属性が指定された要素のみで指定することができます。

+ +

メモ: itemref 属性は、マイクロデータのデータモデルの一部ではありません。注釈づけるデータが扱いやすいツリー構造に従っていないページにおいて、注釈を追加することを助けるための単なる構文構造です。例えば、テーブル内のデータをマークアップするために、セル内のプロパティを維持しながらそれぞれの列に別々なアイテムを定義することができます。

+ +

例

+ +

HTML

+ +
<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name: <span itemprop="name">Amanda</span> </p>
+<div id="b" itemprop="band" itemscope itemref="c"></div>
+<div id="c">
+    <p>Band: <span itemprop="name">Jazz Band</span> </p>
+    <p>Size: <span itemprop="size">12</span> players</p>
+</div>
+
+ +

構造化データ

+ +

(in JSON-LD format)

+ +
{
+  "@id": "amanda",
+  "name": "Amanda",
+  "band": {
+    "@id": "b",
+    "name": "Jazz Band",
+    "size": 12
+  }
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example', '', '', '', 'Web/HTML/Global_attributes/itemref')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("html.global_attributes.itemref")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/itemscope/index.html b/files/ja/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..0f6f51923a --- /dev/null +++ b/files/ja/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,290 @@ +--- +title: itemscope +slug: Web/HTML/Global_attributes/itemscope +tags: + - Attribute + - Global attribute + - HTML + - HTML Microdata + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemscope +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

itemscope は論理型のグローバル属性で、関連付けられたメタデータのスコープを定義します。 itemscope 属性を要素に指定すると、要素に関連付けられた数々の名前と値の組み合わせを持つ新しいアイテムを作成します。関連する属性である {{htmlattrxref("itemtype")}} は、アイテム及びそのプロパティの文脈を記述する語彙 (schema.org など) の妥当な URL を指定するために使用されます。以下のそれぞれの例では、語彙は schema.org からのものです。

+ +

あらゆる HTML 要素に itemscope 属性を設定することができます。 itemscope 要素が itemtype を持たない場合は、関連付けられた itemref を持つ必要があります。

+ +
+

注: itemtype 属性についての詳細は、 http://schema.org/Thing をご覧ください

+
+ +

単純な例

+ +

HTML

+ +

以下の例では、 itemscope 属性を指定しています。この例では itemtype を "http://schema.org/Movie" に設定し、三つの関連する itemprop 属性を定義します。

+ +
<div itemscope itemtype="http://schema.org/Movie">
+  <h1 itemprop="name">Avatar</h1>
+  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
+  <span itemprop="genre">Science fiction</span>
+  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
+</div>
+
+ +

構造化データ

+ +

以下の表は前の例の構造化データを示しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeItemtypeMovie
itemprop(itemprop name)(itemprop value)
itempropdirectorJames Cameron
itempropgenreScience Fiction
itempropnameAvatar
itemprophttps://youtu.be/0AY1XIkX7bYTrailer
+ +

itemscope id 属性

+ +

要素に itemscope 属性を指定したとき、新しいアイテムが作成されます。アイテムは名前と値の組のグループで構成されます。 itemscope 属性及び itemtype 属性のついた要素には、 {{htmlattrxref("id")}} 属性を指定することもできます。 id 属性は新しいアイテムにグローバル識別子を設定するために使用することができます。グローバル識別子によって、アイテムをウェブ中のページにあるほかのアイテムに結び付けることができます。

+ +

例

+ +

以下の例には四つの itemscope 属性があります。それぞれの itemscope 属性は、対応する itemtype 属性のスコープを設定しています。以下の例にある Recipe, AggregateRating, NutritionInformation の itemtype は、レシピのための schema.org 構造化データの一部であり、最初の itemtype, http://schema.org/Recipe として定義されています。

+ +
<div itemscope itemtype="http://schema.org/Recipe">
+  <h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
+  <img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50" />
+  <p>
+    By <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <span itemprop="name">Carol Smith</span>
+    </span>
+  </p>
+  <p>
+    Published: <time datetime="2009-11-05" itemprop="datePublished">November 5, 2009</time>
+  </p>
+  <span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</span>
+  <br>
+  <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
+    <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews
+  </span>
+  <br>
+  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time><br>
+  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hou</time>r<br>
+  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time><br>
+  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span><br>
+  <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
+    Serving size: <span itemprop="servingSize">1 medium slice</span><br>
+    Calories per serving: <span itemprop="calories">250 cal</span><br>
+    Fat per serving: <span itemprop="fatContent">12 g</span><br>
+  </span>
+  <p>
+    Ingredients:<br>
+    <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
+    <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
+    ...
+  </p>
+  Directions: <br>
+  <div itemprop="recipeInstructions">
+    1. Cut and peel apples<br>
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
+    ...
+  </div>
+</div>
+ +

結果

+ +

HTML

+ +

以下のものは、先ほどのコードの例を表示するものです。

+ +

{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}

+ +

構造化データ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeRecipe
itempropnameGrandma's Holiday Apple Pie
itempropimagehttps://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
itempropdatePublished2009-11-05
itempropdescriptionThis is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTimePT30M
itempropcookTimePT1H
itemproptotalTimePT1H30M
itemproprecipeYield1 9" pie (8 servings)
itemproprecipeIngredientThinly-sliced apples: 6 cups
itemproprecipeIngredientWhite sugar: 3/4 cup
itemproprecipeInstructions1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
itempropauthor [Person]
itempropnameCarol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.0
itempropreviewCount35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]
itempropservingSize1 medium slice
itempropcalories250 cal
itempropfatContent12 g
+ +
+

注: HTML からマイクロデータを抽出するには、 Google の構造化データテストツールが便利です。上の HTML で試してみてください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}{{Spec2('HTML Microdata')}}
{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.itemscope")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/itemtype/index.html b/files/ja/web/html/global_attributes/itemtype/index.html new file mode 100644 index 0000000000..c20f450d97 --- /dev/null +++ b/files/ja/web/html/global_attributes/itemtype/index.html @@ -0,0 +1,255 @@ +--- +title: itemtype +slug: Web/HTML/Global_attributes/itemtype +tags: + - HTML + - HTML マイクロデータ + - Reference + - グローバル属性 + - マイクロデータ + - 属性 +translation_of: Web/HTML/Global_attributes/itemtype +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

グローバル属性の itemtype は、データ構造の中で itemprop （項目のプロパティ）を定義するのに使われる語彙の URL を指定します。 {{htmlattrxref("itemscope")}} は itemtype が有効になるデータ構造の語彙の対象範囲を設定するために使用します。

+ +

Google などの主要な検索エンジンは、構造化データのために schema.org の語彙に対応しています。この語彙は標準の型名とプロパティ名の組み合わせを定義しています。例えば、 MusicEvent はコンサートを示し、 startDate プロパティや location プロパティでコンサートの主要な詳細を示します。この場合、 MusicEvent は itemtype で URL として使用し、 startDate や location は MusicEvent が定義する itemprop となります。

+ +
+

メモ: itemtype 属性についての詳細は、 http://schema.org/Thing をご覧ください

+
+ + + +

単純な例

+ +

HTML

+ +
<div itemscope itemtype="http://schema.org/Product">
+  <span itemprop="brand">ACME</span>
+  <span itemprop="name">Executive Anvil</span>
+</div>
+ +

構造化データ

+ + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeschema.org Product
itempropnameExecutive Anvil
itempropbrand [Thing]
itempropnameACME
+ +

例

+ +

HTML

+ +
<div itemscope itemtype="http://schema.org/Product">
+  <span itemprop="brand">ACME<br></span>
+  <span itemprop="name">Executive Anvil<br></span>
+  <img itemprop="image" src="https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png" width="50" height="50" alt="Executive Anvil logo" /><br>
+
+<span itemprop="description">Sleeker than ACME's Classic Anvil, the
+    Executive Anvil is perfect for the business traveler
+    looking for something to drop from a height.
+  <br>
+</span>
+
+  Product #: <span itemprop="mpn">925872<br></span>
+  <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
+    Rating: <span itemprop="ratingValue">4.4</span> stars, based on <span itemprop="reviewCount">89
+      </span> reviews
+  </span><p>
+
+<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+    Regular price: $179.99<br>
+    <meta itemprop="priceCurrency" content="USD" />
+    <span itemprop="price">Sale price: $119.99<br></span>
+    (Sale ends <time itemprop="priceValidUntil" datetime="2020-11-05">
+      5 November!</time>)<br>
+    Available from: <span itemprop="seller" itemscope itemtype="http://schema.org/Organization">
+                      <span itemprop="name">Executive Objects<br></span>
+                    </span>
+    Condition: <link itemprop="itemCondition" href="http://schema.org/UsedCondition"/>Previously owned,
+      in excellent condition<br>
+    <link itemprop="availability" href="http://schema.org/InStock"/>In stock! Order now!
+</span>
+
+</div>
+ +

結果

+ +

HTML

+ +

{{EmbedLiveSample('HTML_2', '300', '400', '', 'Web/HTML/Global_attributes/itemtype')}}

+ +

構造化データ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeProduct (http://schema.org/Product)
itempropnameExecutive Anvil
itempropimagehttps://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png
itempropdescriptionSleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.
itempropmpn925872
itempropbrand [Thing] 
itempropnameACME
itemscopeitemprop[itemtype]aggregateRating[AggregateRating] 
itempropratingValue4.4
itempropreviewCount89
itempropoffers [Offer]http://schema.org/Offer
itemproppriceCurrencyUSD
itempropprice119.99
itemproppriceValidUntil2020-11-05
itempropitemConditionhttp://schema.org/UsedCondition
itempropavailabilityhttp://schema.org/InStock
itemscopeitemprop[itemtype]seller [Organization]http://schema.org/Organization
itempropnameExecutive Objects
+ +
+

メモ: HTML からマイクロデータを抽出するには、 Google の構造化データテストツールが便利です。上の HTML で試してみてください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("html.global_attributes.itemtype")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/lang/index.html b/files/ja/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..dea15467e2 --- /dev/null +++ b/files/ja/web/html/global_attributes/lang/index.html @@ -0,0 +1,90 @@ +--- +title: lang +slug: Web/HTML/Global_attributes/lang +tags: + - HTML + - Reference + - グローバル属性 +translation_of: Web/HTML/Global_attributes/lang +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

lang グローバル属性は、要素の言語の定義に使われます。編集不可の要素では記述されている言語、また、編集可能な要素ではユーザーが書き込むべき言語です。属性には単一の「言語タグ」を Tags for Identifying Languages (BCP47) で定義された書式で持ちます。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}
+ + + +

属性値が空文字列 (lang="") の場合、言語は unknown に設定されます。言語タグが BCP47 に準拠していない場合は、 invalid に設定されます。

+ +
+

言語タグの構文

+ +

BCP47 の完全な構文は、細かい特定の言語の方言まで示せるようにとても複雑になっていますが、ほとんどの使い方ではずっと単純です。

+ +

言語タグはハイフンで区切られた言語サブタグより成り、それぞれのサブタグは言語の特定の特性を示します。３つのサブタグがもっともよく使われます。

+ +
+
言語サブタグ
+
必須です。基本言語を定義する２～３文字のコードで、ふつうすべて小文字で書かれます。例えば、英語の言語コードは en であり、バデシ語のコードは bdz です。
+
書記体系サブタグ
+
任意です。このサブタグは、言語で使われる書記体系を定義し、常に４文字の長さで、最初の文字は大文字です。例えば、ブライユ (点字) のフランス語は fr-Brail であり、 ja-Kana はカタカナで書かれた日本語です。言語がとても一般的な方法で記述される場合、例えば英語でアルファベットを使う場合などは、このサブタグを使用する必要はありません。
+
地域サブタグ
+
任意です。このサブタグは基本言語の特定の場所における方言を定義し、国コードを示す大文字２文字または地域を示す３桁の数字です。例えば、 es-ES はスペインで使われているスペイン語であり、 es-013 は中央アメリカで使われているスペイン語です。「国際スペイン語」は単なる es になります。
+
+ +

両方がある場合、書式体系サブタグは地域サブタグよりも先に置きます。 — ru-Cyrl-BY はベラルーシで使われているキリル文字によるロシア語です。

+ +

言語の正しいサブタグコードを探すには、 the Language Subtag Lookup を見てみてください。

+
+ +

lang 属性が設定されていても、 xml:lang 属性の方が優先するので、効果がないことがあります。

+ +

CSS 疑似クラスの {{cssxref(":lang")}} においては、名前が異なると二つの無効な言語名を区別します。ですから、 :lang(es) は lang="es-ES" 及び lang="es-419" にも一致しますが、 :lang(xyzzy) は lang="xyzzy-Zorp!" とは一致しません。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。
{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショット。{{SpecName('HTML5 W3C')}} から変更なし。
{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット。xml:lang の振る舞いと言語判断のアルゴリズムを定義。真にグローバルな属性となった。
{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}{{Spec2('HTML4.01')}}{{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}} を除くすべての要素で対応。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.lang")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/part/index.html b/files/ja/web/html/global_attributes/part/index.html new file mode 100644 index 0000000000..b567f5a331 --- /dev/null +++ b/files/ja/web/html/global_attributes/part/index.html @@ -0,0 +1,46 @@ +--- +title: part +slug: Web/HTML/Global_attributes/part +tags: + - Global attributes + - HTML + - Reference + - part +translation_of: Web/HTML/Global_attributes/part +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

part は グローバル属性で、要素のパート名のスペース区切りのリストが含まれています。 CSS はパート名を使用して、 {{CSSxRef("::part")}} 擬似要素を介してシャドウツリー内の特定の要素の選択およびスタイルの設定を行うことができます。

+ +

使用例については Shadow part example をご覧ください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Shadow Parts", "#part-attr", "part")}}{{Spec2('CSS Shadow Parts')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.part")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/slot/index.html b/files/ja/web/html/global_attributes/slot/index.html new file mode 100644 index 0000000000..f7e40cbc57 --- /dev/null +++ b/files/ja/web/html/global_attributes/slot/index.html @@ -0,0 +1,50 @@ +--- +title: slot +slug: Web/HTML/Global_attributes/slot +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/slot +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

slot はグローバル属性で、シャドウ DOM のシャドウツリー内にあるスロットをある要素に割り当てます。 slot 属性をもつ要素は、{{htmlattrxref("name", "slot")}} 属性の値がその slot 属性の値と一致する {{HTMLElement("slot")}} 要素により生成されたスロットに割り当てられます。

+ +

例えば、テンプレートとスロットの使用ガイドをみてください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.slot")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/spellcheck/index.html b/files/ja/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..8b1fcef24a --- /dev/null +++ b/files/ja/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,67 @@ +--- +title: spellcheck +slug: Web/HTML/Global_attributes/spellcheck +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/spellcheck +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

spellcheck グローバル属性は、要素でスペルミスのチェックを行うかを定義する列挙型属性です。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}
+ + + +

以下の値を使用できます。

+ + + +
+

注: spellcheck 属性は列挙型であり、論理属性ではありません。これは、 true または false のどちらかを明確に使用することが必須であり、 <textarea spellcheck></textarea> のような省略形は使用できないということです。正しい使い方は <textarea spellcheck="true"></textarea> です。

+
+ +

この属性を設定しなかった場合の既定値は、要素の種類やブラウザーによって定義されます。既定値は継承されます。つまりもっとも近い祖先要素の spellcheck が true である場合にのみ、自身もスペルチェックを受けることがあります。

+ +

この属性は単に、ブラウザーに対する助言です。ブラウザーがスペルチェックを有効にすることを求められてはいません。一般的に編集不可能な要素は、 spellcheck 属性を true に設定してブラウザーがスペルチェックに対応していても、スペルチェックされません。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし
{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}}、初回定義のスナップショット
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.spellcheck")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/style/index.html b/files/ja/web/html/global_attributes/style/index.html new file mode 100644 index 0000000000..9bbb2dd0f8 --- /dev/null +++ b/files/ja/web/html/global_attributes/style/index.html @@ -0,0 +1,70 @@ +--- +title: style +slug: Web/HTML/Global_attributes/style +tags: + - HTML + - Reference + - グローバル属性 + - リファレンス +translation_of: Web/HTML/Global_attributes/style +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

style グローバル属性は、要素に適用する CSS スタイル宣言を包含します。なお、スタイルは別のファイルで定義することが推奨されます。この属性と {{HTMLElement("style")}} 要素の主な用途は、例えばテストのために、すばやくスタイルを適用できるようにすることです。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}
+ + + +
+

使用上のメモ: この属性は、意味的な情報を伝えるために使用してはいけません。すべてのスタイルが削除されたとしても、ページは依然として意味的にが正しくあるべきです。特に、無関係な情報を隠すために使用しないようにしてください。これには hidden 属性を使用してください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。
{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショットであり、 {{SpecName('HTML5 W3C')}} から変更なし。
{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット。 {{SpecName("HTML4.01")}} から、真にグローバルな属性になりました。
{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}{{Spec2('HTML4.01')}}{{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}} を除くすべての要素で対応。
{{SpecName("CSS3 Style", "", "")}}{{Spec2("CSS3 Style")}}style 属性の内容を定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.style")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/tabindex/index.html b/files/ja/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..9794aaf13b --- /dev/null +++ b/files/ja/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,94 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +tags: + - HTML + - Reference + - グローバル属性 + - リファレンス +translation_of: Web/HTML/Global_attributes/tabindex +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

tabindex グローバル属性は、要素が入力フォーカスを持てることと、キーボードの順次ナビゲーション (ふつうは名前の由来である Tab キーによる) に加わるかどうか、どの位置に加わるかを示します。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}
+ + + +

値としては整数値を受け付け、値によって次のような様々な結果になります。

+ + + +

tabindex 属性を{{htmlelement("div")}} に設定する場合は、子のコンテンツにも tabindex を設定しなければ、矢印キーを使用して子のコンテンツをスクロールできなくなります。 tabindex のスクロール効果を理解するには、こちらの fiddle を確認してください。

+ +

アクセシビリティの考慮事項

+ +

キーボード入力で対話的にフォーカスを設定できるようにするために、 対話型コンテンツではないものに tabindex 属性を組み合わせて使用することは避けてください。例えば、 {{HTMLElement("button")}} 要素を使用する代わりに {{HTMLElement("div")}} 要素を使用してボタンを記述する場合などです。

+ +

対話的要素でないものを使用して対話的コンポーネントを記述すると、アクセシビリティツリーに掲載されません。これは、支援技術によって移動や操作を行うことを阻害します。このようなコンテンツは、代わりに ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, などの) 対話型要素を使用して意味的に記述するべきです。これらの要素には、 ARIA によって管理しなければならないアクセシビリティにステータスを伝える、組み込みのロールと状態があります。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。
{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショットであり、 {{SpecName('HTML5 W3C')}} から変更なし。
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット。 {{SpecName("HTML4.01")}} との違いは、すべての要素でこの属性に対応したこと (グローバル属性化)。
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素でのみ対応。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.tabindex")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/title/index.html b/files/ja/web/html/global_attributes/title/index.html new file mode 100644 index 0000000000..c80a499c01 --- /dev/null +++ b/files/ja/web/html/global_attributes/title/index.html @@ -0,0 +1,126 @@ +--- +title: title +slug: Web/HTML/Global_attributes/title +tags: + - Global attributes + - HTML + - Reference + - Title +translation_of: Web/HTML/Global_attributes/title +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

title グローバル属性は、要素に関するアドバイザリー情報を表すテキストを含みます。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}
+ + + +

典型的な用途は以下の通りです。

+ + + +

title 属性は {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}}, {{HTMLElement("menuitem")}} の各要素において、追加の意味を持ちます。

+ +

複数行のタイトル

+ +

title 属性は複数の行を含むことができます。それぞれの U+000A LINE FEED (LF) 文字が改行を表します。いくつか注意しなければならないのは、これが次のように二行にわたって描画されることです。

+ +

HTML

+ +
<p>Newlines in <code>title</code> should be taken into account,
+like <abbr title="This is a
+multiline title">example</abbr>.</p>
+ +

結果

+ +
{{EmbedLiveSample('Multiline_titles')}}
+ +

title 属性の継承

+ +

要素に title 属性がない場合、属性値は親ノードから継承され、さらにそれはその親ノードから継承されるというようになります。

+ +

この属性が空文字列に設定されると、その祖先の title が関係なく、この要素のツールチップとして使用するべきではないことを意味します。

+ +

HTML

+ +
<div title="CoolTip">
+  <p>Hovering here will show “CoolTip”.</p>
+  <p title="">Hovering here will show nothing.</p>
+</div>
+ +

結果

+ +
{{EmbedLiveSample('Title_attribute_inheritance')}}
+ +

アクセシビリティの考慮

+ +

title 属性を使用することは、次のような人々にとって大きな問題になります。

+ + + +

これは、ブラウザーが表示するページを追加支援技術が解釈することによる複合性について、ブラウザーの互換性に一貫性がないためです。ツールチップ効果が必要であれば、上記の閲覧方法でもアクセスできるもっとアクセシブルな技術を使用する方が効果的です。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。
{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML5 W3C')}} から変更なし。
{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット。 {{SpecName("HTML4.01")}} から、真にグローバルな属性になりました。
{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}{{Spec2('HTML4.01')}}{{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("title")}} を除くすべての要素で対応。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.title")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/translate/index.html b/files/ja/web/html/global_attributes/translate/index.html new file mode 100644 index 0000000000..3c401ecd2c --- /dev/null +++ b/files/ja/web/html/global_attributes/translate/index.html @@ -0,0 +1,64 @@ +--- +title: translate +slug: Web/HTML/Global_attributes/translate +tags: + - Experimental + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/translate +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

translate グローバル属性 は列挙型属性で、要素の翻訳可能な属性の値や {{domxref("Text")}} 子ノードを、ページをローカライズする際に翻訳するべきか、あるいは変更せずにおくかを指定します。以下の値を使用することができます。

+ + + +

すべてのブラウザーがこの属性を認識しているわけではありませんが、 Google 翻訳のような自動翻訳システムがこれを尊重しており、人間の翻訳者によって使用されるツールによっても尊重される可能性があります。そのため、ウェブ制作者がこの属性を使用して、翻訳されるべきではないコンテンツをマークすることが重要です。

+ +

例

+ +

この例では translate 属性を使用して、翻訳ツールにフッターの企業ブランド名を翻訳しないように依頼しています。

+ +
<footer>
+  <small>© 2020 <span translate="no">BrandName</span></small>
+</footer>
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更な。
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.translate")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/global_attributes/x-ms-format-detection/index.html b/files/ja/web/html/global_attributes/x-ms-format-detection/index.html new file mode 100644 index 0000000000..6368a4c3d8 --- /dev/null +++ b/files/ja/web/html/global_attributes/x-ms-format-detection/index.html @@ -0,0 +1,39 @@ +--- +title: x-ms-format-detection +slug: Web/HTML/Global_attributes/x-ms-format-detection +translation_of: Web/HTML/Global_attributes/x-ms-format-detection +--- +
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
+ +

x-ms-format-detection 属性は、電話番号の様な要素のテキスト内データ形式が自動的にフォロー可能なリンクに変換されるかどうかを決定します。

+ +

tel: スキームのリンクなど既存のリンクは影響を受けません。

+ +
+

format detectionによって作成されたリンクはDOMに表示されません。

+
+ +

{{Non-standard_inline}} この独自プロパティは Internet Explorer と Microsoft Edge に固有です。

+ +

構文

+ +
<html x-ms-format-detection="none">
+
+ +

値

+ +
+
all
+
サポートされているすべてのデータ形式が検出されます。
+
none
+
Format detection はオフになっています。
+
phone
+
電話番号パターンは自動的にリンクされます。
+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf