diff options
Diffstat (limited to 'files/ja/web/html/global_attributes')
28 files changed, 3105 insertions, 0 deletions
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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>accesskey</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、現在の要素のショートカットキーを生成するためのヒントを与えます。この属性は空白で区切った表示可能な文字 (キーボードから生成できるアクセント付き文字やその他の文字を含む) から成ります。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<div class="note"> +<p><strong>注</strong>: WHATWG の仕様書では、空白区切りの複数の文字を指定することができ、ブラウザーは対応する最初の一つを使用するとしています。しかし、これは多くのブラウザーでは動作しません。 IE や Edge は、他のコマンドと競合がない問題なく使用することができる最初の1つを使用します。</p> +</div> + +<p>アクセスキーを有効にする方法は、ブラウザーやプラットフォームによって異なります。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th></th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td>Firefox 57 以降では <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> または <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox 14 以降では <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox 13 以前では <kbd>Control</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Internet Explorer</th> + <td rowspan="3" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2" rowspan="1" style="text-align: center;">N/A</td> + </tr> + <tr> + <th>Edge</th> + <td style="text-align: center;">N/A</td> + <td rowspan="3" style="text-align: center;"><kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd><br> + <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Google Chrome</th> + <td style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td colspan="2" style="text-align: center;">N/A</td> + </tr> + <tr> + <th>Opera 15+</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td style="text-align: center;"><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 12</th> + <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd> で、accesskey でアクセスできるコンテンツの一覧を開きます。そして <kbd><em>key</em></kbd> を押すと、該当項目を選択できます。</td> + </tr> + </tbody> +</table> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p><code>accesskey</code> 属性は、ブラウザーの対応が貧弱であることに加え、数々の考慮事項があります。</p> + +<ul> + <li><code>accesskey</code> の値はシステムやブラウザーのショートカットキーや支援技術の機能と競合する可能性があります。あるオペレーティングシステム、支援技術、ブラウザーの組み合わせで動作しても、他の組み合わせでは動作しない可能性があります。</li> + <li>特に国際化を考慮している場合、特定の <code>accesskey</code> の値が特定のキーボードに存在しないことがあります。そのため、特定の言語において更なる問題が発生する可能性があります。</li> + <li>数字に依存した <code>accesskey</code> の値は、認知障碍を持つ人に混乱を招く可能性があります。数字には、起動する機能と論理的な関連性がありません。</li> + <li><code>accesskey</code> が存在することをユーザーに通知することで、ユーザーはその機能を認識します。システムがその機能について知らされる方法がない場合は、 <code>accesskey</code> が誤って有効になる可能性があります。</li> +</ul> + +<p>これらの問題のため、一般用途のウェブサイトやウェブアプリの多くでは、 <code>accesskey</code> を使用しないよう一般的にアドバイスされています。</p> + +<ul> + <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM: Keyboard Accessibility - Accesskey</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>現実の実装のためにもっと現実的な振る舞いを記述。</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新の W3C の {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML4.01')}} から <code>accesskey</code> に設定できる文字が増えました。また、任意の要素に設定できるようになりました。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }} 要素のみ対応。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.accesskey")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts">aria-keyshortcuts</a></code></li> +</ul> 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 +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><span class="seoSummary"><strong><code>autocapitalize</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は列挙型の属性で、ユーザーによって入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうか、どのように行われるかを制御します。</span>以下の値を指定することができます。</p> + +<ul> + <li><code>off</code> または <code>none</code>: 自動的な大文字化は適用されません (すべての文字は既定で小文字です)。</li> + <li><code>on</code> または <code>sentences</code>: 各文の最初の文字を既定で大文字にします。それ以外の文字は既定で小文字です。</li> + <li><code>words</code>: 各語の最初の文字を既定で大文字にします。それ以外の文字は既定で小文字です。</li> + <li><code>characters</code>: すべての文字は既定で大文字になります。</li> +</ul> + +<p><code>autocapitalize</code> 属性は、物理キーボードからの入力時の挙動には影響しません。モバイル端末の仮想キーボードや音声入力など、他の入力方式の挙動に影響します。その様な方式では、文の最初の文字を自動的に大文字化することでユーザーを補助することがよくあります。 <code>autocapitalize</code> 属性は要素単位の挙動を上書きすることができます。</p> + +<p><code>autocapitalize</code> 属性では、 {{HTMLElement("input")}} 要素の {{htmlattrxref("type", "input")}} の値が <code>url</code>, <code>email</code>, <code>password</code> の場合は自動大文字化が有効になりません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.autocapitalize")}}</p> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>class</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、要素のクラスを空白区切りで並べたリストで、大文字小文字を区別します。クラスは CSS の <a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a> や JavaScript の DOM メソッド {{domxref("document.getElementsByClassName")}} といった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>仕様書ではクラス名の要件を示していませんが、ウェブ開発者は要素の外見ではなく、意味論的な目的を表す名前を使用することが推奨されます。例えば、あるクラスの要素が<em>斜体</em>で表示されるとしても、クラス名は<em>斜体</em>であることではなく<em>特性</em>を表すようにします。意味論的な名前は、ページの外見を変更した場合でも論理的であり続けます。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML5 W3C')}} から変更はありません。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。<code>class</code> 属性は、{{SpecName('HTML4.01')}} よりも真にグローバルな属性になりました。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}} 以外の要素で対応</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.class")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> + <li>{{domxref('element.className')}}</li> + <li>{{domxref('element.classList')}}</li> + <li><a href="/ja/docs/Learn/CSS/">CSS 入門</a></li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>contenteditable</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、ユーザーによる要素の編集が可能かを示す列挙型属性です。可能である場合、ブラウザーは要素のウィジェットを編集可能なものに変更します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>この属性は、以下の値のうち一つを取る必要があります。</p> + +<ul> + <li><code>true</code> または <em>空文字列</em>: 要素が編集可能であることを示す</li> + <li><code>false</code>: 要素が編集不可であることを示す</li> +</ul> + +<p>この属性が値なしで指定された場合、たとえば <code><label contenteditable>Example Label</label></code> のような場合、値は空文字列として扱われます。</p> + +<p>この属性が存在しないか、値が無効であった場合、値は親要素から<em>継承</em>されます。したがって、親が編集可能であればこの要素は編集可能になります。</p> + +<p>なお、許可されている値は <code>true</code> と <code>false</code> ですが、この属性は<em>列挙型</em>であり、<em>論理型</em>ではありません。</p> + +<p>{{Glossary("caret", "キャレット")}}の挿入文字列を描画するのに使用される色は、 {{cssxref("caret-color")}} プロパティで設定できます。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>最新のスナップショットである {{SpecName("HTML5.2")}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット、 {{SpecName("HTML5.1")}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット、 {{SpecName("HTML5 W3C")}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット、初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.contenteditable")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツを編集可能にする</a></li> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} および {{domxref("HTMLElement.isContentEditable")}}</li> + <li>CSS の {{cssxref("caret-color")}} プロパティ</li> + <li><a href="/ja/docs/Web/API/HTMLElement/input_event"><code>HTMLElement</code> <code>input</code> イベント</a></li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="warning"> +<p><a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">contextmenu 属性は廃止</a>されており、今後、すべてのブラウザーから削除される予定です。</p> +</div> + +<p><code><strong>contextmenu</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、当該要素のコンテキストメニューとして使用する {{HTMLElement("menu")}} 要素の <a href="/ja/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a> です。</p> + +<p><em>コンテキストメニュー</em>は、右クリックなどユーザーの操作によって現れます。 HTML5 ではこのメニューをカスタマイズできます。以下は入れ子のメニューを含む実装例です。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML" name="HTML">HTML</h3> + +<pre class="brush: html highlight:[1,10,15] notranslate"><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> +</pre> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">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"; +}</pre> + +<h3 id="Result" name="Result">表示結果</h3> + +<p>{{EmbedLiveSample("Example", "100%", 400)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#context-menus", "contextmenu")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショットであり、初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.contextmenu")}}</p> + +<p>[1] コマンドラインオプション <code>--enable-blink-features=ContextMenu</code> を使用して、実験的な実装を使用できます。 Chrome 52 および Opera 39 までは<em>試験運用版のウェブプラットフォームの機能</em>フラグでも有効化できましたが、<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=412945">ウェブ互換性の問題</a> のために削除されました。この機能の対応は <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=87553">Chrome bug 87553</a> で要望されています。</p> + +<p>[2] Firefox モバイルから <code>contextmenu</code> 属性の対応が削除されました ({{bug(1424252)}})。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li>{{domxref("HTMLElement.contextMenu")}}</li> +</ul> 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-* +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>data-*</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は<strong>カスタムデータ属性</strong>と呼ばれる属性の組を作り、<a href="/ja/docs/Web/HTML" title="HTML">HTML</a> と、スクリプトによる <a href="/ja/docs/Web/API/Document_Object_Model" title="DOM">DOM</a> 表現との間で、固有の情報を交換できるようにします。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>すべてのカスタムデータは、属性を設定した要素の {{domxref("HTMLElement")}} インターフェイスを通して使用できます。 {{domxref("HTMLElement.dataset")}} プロパティがそれらへのアクセス手段を提供します。<br> + <code>*</code> は、 <a href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">XML 名の作成規則</a>に加えて以下の制約に従う名前に置き換えることができます。</p> + +<ul> + <li>大文字小文字にかかわらず、名前を <code>xml</code> で始めてはならない。</li> + <li>名前にセミコロン (<code>U+003A</code>) を含めてはならない。</li> + <li>名前に大文字を含めてはならない。</li> +</ul> + +<p>なお、 {{domxref("HTMLElement.dataset")}} プロパティは {{domxref("DOMStringMap")}} であり、またカスタムデータ属性名のハイフン (<code>U+002D</code>) はその次の文字を大文字化したもの (キャメルケース) に変換されるので、 <em>data-test-value</em> は <code>HTMLElement.dataset.testValue</code> (または <code>HTMLElement.dataset["<em>testValue</em>"]</code>) としてアクセスできます。</p> + +<h3 id="Usage" name="Usage">使用方法</h3> + +<p><code>data-*</code> 属性を追加すると通常の HTML 要素でも、より複雑で強力なプログラムオブジェクトになります。例えばゲームで宇宙船の "<a href="https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%97%E3%83%A9%E3%82%A4%E3%83%88_(%E6%98%A0%E5%83%8F%E6%8A%80%E8%A1%93)">スプライト</a><em>"</em> を、単純な {{HTMLElement("img")}} 要素に <a href="/ja/docs/Web/HTML/Global_attributes/class"><code>class</code></a> 属性といくつかの <code>data-*</code> 属性を設定したもので表すことができるでしょう。</p> + +<pre class="brush: html notranslate"><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()"> +</pre> + +<p>もっと深い HTML のデータ属性の使用については、<a href="/ja/docs/Learn/HTML/Howto/Use_data_attributes">データ属性の使用</a>を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#element-attrdef-global-data", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット、 {{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#element-attrdef-global-data", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.data_attributes")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> + <li>これらの値を読み書きできる {{domxref("HTMLElement.dataset")}} プロパティ</li> + <li><a href="/ja/docs/Learn/HTML/Howto/Use_data_attributes">データ属性の使用</a></li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>dir</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素のテキストの書字方向を示す列挙型属性です。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}</div> + +<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>次の値を使用することができます。</p> + +<ul> + <li><code>ltr</code>: <em>left to right</em> を表し、左書きの言語 (英語など) に対して使用します。</li> + <li><code>rtl</code>: <em>right to left</em> を表し、右書きの言語 (アラビア語など) に対して使用します。</li> + <li><code>auto</code>: ユーザーエージェントに決定させます。書字方向が明確な文字が見つかるまで要素内の文字を解釈して、その方向を要素全体に適用する基本的なアルゴリズムを使用します。</li> +</ul> + +<div class="note"> +<p><strong>使用上の注意:</strong> この属性は、意味論的な位置づけが異なる場所を示す {{HTMLElement("bdo")}} 要素で必須です。</p> + +<ul> + <li> + <p>この属性は {{HTMLElement("bdi")}} 要素に<em>継承されません</em>。属性を設定しない場合の値は <code>auto</code> になります。</p> + </li> + <li> + <p>この属性は、 CSS の {{cssxref("direction")}} プロパティや {{cssxref("unicode-bidi")}} プロパティで上書きできます。ただし、 CSS が有効かつ要素がこれらのプロパティに対応する場合に限ります。</p> + </li> + <li> + <p>テキストの書字方向はその表示ではなく、内容に対して意味論的な関係がありますので、ウェブ開発者には、可能であれば関連する CSS プロパティの代わりにこの属性を使用することを推奨します。これにより、 CSS に対応しないブラウザーや CSS を無効化したブラウザーでもテキストが正しく表示されます。</p> + </li> + <li> + <p>値 <code>auto</code> は、ユーザーが入力して最終的にデータベースへ保存するデータなど、書字方向が不定のデータに対して使用してください。</p> + </li> +</ul> +</div> + +<div class="note"> +<p>ブラウザーではユーザーが {{ HTMLElement("input") }} や {{ HTMLElement("textarea") }} の書字方向を変更することを許可して、コンテンツの執筆を支援していることがあります。 Chrome と Safari は入力フィールドのコンテキストメニューに書字方向のオプションを提供している一方、 Internet Explorer と Edge はキーバインド <kbd>Ctrl</kbd> + <kbd>Left Shift</kbd> および <kbd>Ctrl</kbd> + <kbd>Right Shift</kbd> を使用します。 Firefox は <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> を使用しますが、 <code><strong>dir</strong></code> 属性の値は変更しません。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML5 W3C')}} から変更はありません。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML4.01')}} の仕様に値 <code>auto</code> を追加、および真にグローバルな属性になりました。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} を除くすべての要素で対応します。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.dir")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべて<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> + <li>{{domxref("HTMLElement.dir")}} は、この属性を反映します。</li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong>draggable</strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は列挙型属性で、要素がブラウザーの本来の動作と <a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML ドラッグ＆ドロップ API</a> のどちらの動作でドラッグするかを示す列挙型属性です。</span></p> + +<p><code>draggable</code> は以下の値を取ることができます。</p> + +<ul> + <li><code>true</code>: 要素がドラッグ可能であることを示す</li> + <li><code>false</code>: 要素はドラッグ不可であることを示す</li> +</ul> + +<div class="blockIndicator warning"> +<p>この属性は<em>列挙型</em>であり、<em>論理型</em>ではありません。 <code>true</code> または <code>false</code> の値が必須であり、 <code><img draggable></code> のような省略形は認められません。正しい使用法は <code><img draggable="false"></code> です。</p> +</div> + +<p>この属性が設定されなかった場合の既定値は <code>auto</code> であり、ブラウザーの既定のドラッグ動作であることを意味します。テキストの選択範囲、画像、リンクのみがドラッグ可能です。他の要素では、ドラッグ＆ドロップできるようにするためには {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} イベントを設定する必要があります (こちらの<a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations">包括的なサンプル</a>にあるように)。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.draggable")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div> + +<p><strong><code>dropzone</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、 <a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用できます。</p> + +<ul> + <li><code>copy</code>: ドロップにより、ドロップした要素のコピーを生成することを示す</li> + <li><code>move</code>: ドロップされた要素は新しい場所に移動されることを示す</li> + <li><code>link</code>: ドラッグしたデータへのリンクを生成する</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.dropzone")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>hidden</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、要素はまだ、あるいはもはや<em>関連性</em>がないことを示す論理型属性です。例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。</span>ブラウザーは、 <code>hidden</code> 属性を設定している要素を表示しません。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p><code>hidden</code> 属性は、 1 つの表現方法からのみコンテンツを隠す目的で使用してはいけません。何かが hidden とマークされている場合、それは、例えば読み上げアプリを含むすべての表現方法から隠されます。</p> + +<p>隠された要素は隠されていない要素からリンクするべきではありません。隠された要素の子孫である要素はまだアクティブであり、スクリプト要素はまだ実行でき、フォーム要素はまだ送信できることを意味します。しかし、要素とスクリプトは、他の文脈で隠された要素を参照することがあります。</p> + +<p>例えば、 <code>href</code> 属性を使用して <code>hidden</code> 属性が設定された部分にリンクを張るのは不適切です。コンテンツが利用できないか無関係ならば、リンクする理由がないからです。</p> + +<p>しかし、 ARIA の <code>aria-describedby</code> 属性を使って隠された要素の記述を参照することは良いことです。記述を隠すことは、それ自身では役に立たないことを意味しますが、記述された要素から参照される特定の文脈に限っては有用であるように記述することができます。</p> + +<p>同様に、 canvas 要素に <code>hidden</code> 属性をつけたものはオフスクリーンバッファーとしてグラフィックエンジンを記述することができますし、フォーム制御では hidden のフォーム要素をフォーム属性を使用して参照することができます。</p> + +<div class="note"> +<p><strong>注:</strong> <code>hidden</code> 属性を持つ要素について、 CSS の {{cssxref("display")}} プロパティの値を変更すると、挙動を上書きします。例えば <code>display: flex</code> を設定した要素は、 <code>hidden</code> 属性が存在しても表示されます。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>CSS による <code>hidden</code> 属性のデフォルトレンダリング方法の案を定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、この属性を初めて定義しました。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.hidden")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute"><code>aria-hidden</code> 属性</a></li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>id</code> {{glossary("global attribute", "グローバル属性")}}</strong>は、文書全体で一意でなければならない識別子 (ID) を定義します。この属性の用途は、リンク (<a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment">フラグメント識別子</a>を使用)、スクリプト、スタイル ({{glossary("CSS")}} を使用) で要素を特定することです。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<div class="blockIndicator warning"> +<p>この属性の値は不伝導性の文字列です。つまり、ウェブ作者は人間が理解するための情報を伝えるためにこの情報を使用するべきではありません (ただし、 ID を人間が理解できるようにすることは、コードを理解するために有用です。例えば、 <code>ticket-18659</code> と <code>r45tgfe-freds&$@</code> を比べてみてください)。</p> +</div> + +<p><code>id</code> の値に{{glossary("whitespace", "ホワイトスペース")}}文字 (空白やタブなど) を含めてはいけません。ブラウザーはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れる {{htmlattrxref("class")}} 属性とは対照的に、要素は ID の値をひとつだけ持つことができます。</p> + +<div class="note"> +<p><strong>注:</strong> {{glossary("ASCII")}} 英文字、数字、<code>'_'</code>、<code>'-'</code>、<code>'.'</code> 以外の文字は HTML 4 で許容されていなかったため、使用した場合に互換性の問題を引き起こす可能性があります。この制約は {{glossary("HTML5")}} で外されましたが、互換性のために ID は文字で始めるようにしましょう。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、 {{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、先頭の文字以外で <code>'_'</code>、<code>'-'</code>、<code>'.'</code> が使用可能になった。また、真にグローバルな属性になった。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}} を除くすべての要素で対応。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.id")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li>{{domxref("Element.id")}} は、この属性を反映します。</li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong>グローバル属性</strong>は、すべての HTML 要素で共通の属性です。すべての要素で使用できますが、要素によっては効果がないこともあります。</p> + +<p>グローバル属性は、<em>標準仕様で未定義の要素を含む</em> すべての <a href="/ja/docs/Web/HTML/Element">HTML 要素</a>で指定することができます。つまり、その要素を使用することで文書が HTML5 に準拠しなくなるような標準外の要素であっても、これらの属性は受け入れなければなりません。例えば <code><foo></code> は妥当な HTML 要素ではありませんが、 HTML5 準拠のブラウザーは <code><foo hidden>...</foo></code> とマークアップされたコンテンツを非表示にします。</p> + +<p>基本的な HTML グローバル属性に加えて、以下のグローバル属性も存在します。</p> + +<ul> + <li>{{HTMLAttrDef("xml:lang")}} と {{HTMLAttrDef("xml:base")}}。これらは XHTML 仕様から継承したもので非推奨ですが、互換性のために残されています。</li> + <li>アクセシビリティを向上するために使用する、複数の <strong><code><a href="/ja/docs/Web/Accessibility/ARIA">aria-*</a></code></strong> 属性。</li> + <li><a href="/ja/docs/Web/Guide/Events/Event_handlers">イベントハンドラー</a>属性: <strong><code>onabort</code></strong>, <strong><code>onautocomplete</code></strong>, <strong><code>onautocompleteerror</code></strong>, <strong><code>onblur</code></strong>, <strong><code>oncancel</code></strong>, <strong><code>oncanplay</code></strong>, <strong><code>oncanplaythrough</code></strong>, <strong><code>onchange</code></strong>, <strong><code>onclick</code></strong>, <strong><code>onclose</code></strong>, <strong><code>oncontextmenu</code></strong>, <strong><code>oncuechange</code></strong>, <strong><code>ondblclick</code></strong>, <strong><code>ondrag</code></strong>, <strong><code>ondragend</code></strong>, <strong><code>ondragenter</code></strong>, <strong><code>ondragexit</code></strong>, <strong><code>ondragleave</code></strong>, <strong><code>ondragover</code></strong>, <strong><code>ondragstart</code></strong>, <strong><code>ondrop</code></strong>, <strong><code>ondurationchange</code></strong>, <strong><code>onemptied</code></strong>, <strong><code>onended</code></strong>, <strong><code>onerror</code></strong>, <strong><code>onfocus</code></strong>, <strong><code>oninput</code></strong>, <strong><code>oninvalid</code></strong>, <strong><code>onkeydown</code></strong>, <strong><code>onkeypress</code></strong>, <strong><code>onkeyup</code></strong>, <strong><code>onload</code></strong>, <strong><code>onloadeddata</code></strong>, <strong><code>onloadedmetadata</code></strong>, <strong><code>onloadstart</code></strong>, <strong><code>onmousedown</code></strong>, <strong><code>onmouseenter</code></strong>, <strong><code>onmouseleave</code></strong>, <strong><code>onmousemove</code></strong>, <strong><code>onmouseout</code></strong>, <strong><code>onmouseover</code></strong>, <strong><code>onmouseup</code></strong>, <strong><code>onmousewheel</code></strong>, <strong><code>onpause</code></strong>, <strong><code>onplay</code></strong>, <strong><code>onplaying</code></strong>, <strong><code>onprogress</code></strong>, <strong><code>onratechange</code></strong>, <strong><code>onreset</code></strong>, <strong><code>onresize</code></strong>, <strong><code>onscroll</code></strong>, <strong><code>onseeked</code></strong>, <strong><code>onseeking</code></strong>, <strong><code>onselect</code></strong>, <strong><code>onshow</code></strong>, <strong><code>onsort</code></strong>, <strong><code>onstalled</code></strong>, <strong><code>onsubmit</code></strong>, <strong><code>onsuspend</code></strong>, <strong><code>ontimeupdate</code></strong>, <strong><code>ontoggle</code></strong>, <strong><code>onvolumechange</code></strong>, <strong><code>onwaiting</code></strong>。</li> +</ul> + +<h2 id="List_of_global_attributes" name="List_of_global_attributes">グローバル属性の一覧</h2> + +<dl> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/accesskey">{{HTMLAttrDef("accesskey")}}</a></dt> + <dd>現在の要素に対するキーボードショートカットを生成するヒントを与えます。この属性の値は、空白区切りの文字のリストです。ブラウザーは、この文字リストの中から、コンピューターのキーボードレイアウトに存在する最初の文字を使用します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/autocapitalize">{{HTMLAttrDef("autocapitalize")}}</a></dt> + <dd>ユーザーが入力／編集したとき、入力文字列の大文字化を自動的に行うか、どこを大文字化するかを制御します。以下の値を指定することができます。 + <ul> + <li><code>off</code> または <code>none</code>: 自動的な大文字化は行いません (すべての文字は小文字のままです)。</li> + <li><code>on</code> または <code>sentences</code>: 各文の最初の文字を大文字にします。それ以外の文字は小文字のままです。</li> + <li><code>words</code>:各単語の最初の文字を大文字にします。それ以外の文字は小文字のままです。</li> + <li><code>characters</code>: すべての文字を大文字にします。</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/class">{{HTMLAttrDef("class")}}</a></dt> + <dd>要素のクラスの空白区切りリストです。 CSS の <a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a> や JavaScript の {{DOMxRef("Document.getElementsByClassName()")}} メソッドのような関数を使えば、特定の要素を選択したりアクセスしたりすることができます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/contenteditable">{{HTMLAttrDef("contenteditable")}}</a></dt> + <dd>ユーザーによる要素の編集が可能かどうかを示す列挙型属性です。編集可能な場合、ブラウザーはその要素を編集可能なものに変更します。この属性の値は、以下のどちらかでなければなりません。 + <ul> + <li><code>true</code> または <em>空文字列</em>: 要素が編集可能であることを示す</li> + <li><code>false</code>: 要素は編集不可であることを示す</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/contextmenu">{{HTMLAttrDef("contextmenu")}}</a> {{Obsolete_Inline}}</dt> + <dd>その要素のコンテキストメニューとして使用する {{HTMLElement("menu")}} の <code><a href="#attr-id"><strong>id</strong></a></code> を指定します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/data-*">{{HTMLAttrDef("data-*")}}</a></dt> + <dd>これらの属性はカスタムデータ属性と呼ばれており、 <a href="/ja/docs/Web/HTML">HTML</a> とその {{glossary("DOM")}} 表現との間で、固有の情報を交換できるようにします。すべてのカスタムデータは、その属性を設定した要素の {{DOMxRef("HTMLElement")}} インターフェイスを通して使用することができます。 {{DOMxRef("HTMLElement.dataset")}} プロパティでカスタムデータにアクセスできます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/dir">{{HTMLAttrDef("dir")}}</a></dt> + <dd>要素のテキストの書字方向を示す、列挙型属性です。以下の値を使用することができます。 + <ul> + <li><code>ltr</code>: <em>left to right</em> を表し、左から右へ記述する言語 (日本語、英語など) に対して使用します。</li> + <li><code>rtl</code>: <em>right to left</em> を表し、右から左へ記述する言語 (アラビア語など) に対して使用します。</li> + <li><code>auto</code>: ユーザーエージェントに決定させます。要素の中の文字を、書字方向を強く決定する文字が見つかるまで解析し、その方向を要素全体に適用する基本的なアルゴリズムを使用します。</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/draggable">{{HTMLAttrDef("draggable")}}</a></dt> + <dd><a href="/ja/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a> を使用して要素をドラッグすることができるかを示す列挙型属性です。以下の値を使用することができます。 + <ul> + <li><code>true</code>: 要素がドラッグ可能であることを示す</li> + <li><code>false</code>: 要素がドラッグ不可であることを示す</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/dropzone">{{HTMLAttrDef("dropzone")}}</a> {{deprecated_inline}}</dt> + <dd><a href="/ja/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a> を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用することができます。 + <ul> + <li><code>copy</code>: ドラッグした要素をドロップすることで、コピーを生成することを示す</li> + <li><code>move</code>: ドラッグした要素を新しい場所に移動することを示す</li> + <li><code>link</code>: ドラッグしたデータへのリンクを生成する</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/exportparts">{{HTMLAttrDef("exportparts")}}</a> {{Experimental_Inline}}</dt> + <dd>シャドウ部品を入れ子になったシャドウツリーから軽いツリーへ変換しながらエクスポートするために使用します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/hidden">{{HTMLAttrDef("hidden")}}</a></dt> + <dd>要素はまだ、あるいはもはや<em>関連性</em>がないことを示す、論理属性です。例えば、ログイン処理が完了するまで使えない要素を隠すために使用できます。ブラウザーはこの要素を表示しません。この属性は、表示することが正当なコンテンツを隠すために使用してはいけません。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/id">{{HTMLAttrDef("id")}}</a></dt> + <dd>文書全体で一意でなければならない識別子 (ID) を定義します。(フラグメント識別子を使った) リンク、スクリプト、 (CSS での) スタイルづけなど要素を特定するために使用されます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/inputmode">{{HTMLAttrDef("inputmode")}}</a></dt> + <dd>この要素やその内容を編集する時に使用する仮想キーボードの種類の構成に関するヒントをブラウザーに与えます。主に {{HTMLElement("input")}} 要素で使用されますが、 {{htmlattrxref("contenteditable")}} モードにあるすべての要素で使用することができます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/is">{{HTMLAttrDef("is")}}</a></dt> + <dd>標準の HTML 要素が、登録したカスタム内蔵要素のようにふるまうように指定できます（詳しくは<a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタム要素の使用</a>を参照）。</dd> +</dl> + +<div class="note"> +<p><strong>注:</strong> <code>item*</code> 属性は、 <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata 機能</a>の一部です。</p> +</div> + +<dl> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/itemid">{{HTMLAttrDef("itemid")}}</a></dt> + <dd>項目の一意でグローバルな識別子です。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/itemprop">{{HTMLAttrDef("itemprop")}}</a></dt> + <dd>項目にプロパティを追加するために使用します。すべての HTML 要素で <code>itemprop</code> 属性を指定することができ、この <code>itemprop</code> は名前と値の組で構成されます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/itemref">{{HTMLAttrDef("itemref")}}</a></dt> + <dd><code>itemscope</code> 属性を持つ要素の子孫以外のプロパティは、 <code>itemref</code> を使用して項目に関連付けることができます。文書中の他の場所で追加のプロパティがある要素の id (<code>itemid</code> ではない) の一覧を提供します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/itemscope">{{HTMLAttrDef("itemscope")}}</a></dt> + <dd><code>itemscope</code> は (通常) {{htmlattrxref("itemtype")}} とともに、ブロックに含まれている HTML が特定の項目に関するものであることを指定します。 <code>itemscope</code> は項目を作成し、それに関連付けられる <code>itemtype</code> のスコープを定義します。 <code>itemtype</code> は、項目やそのプロパティの文脈を説明するボキャブラリー (<a class="external external-icon" href="https://schema.org/">schema.org</a> など) の有効な URL です。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/itemtype">{{HTMLAttrDef("itemtype")}}</a></dt> + <dd>データ構造内の <code>itemprop</code> （項目のプロパティ）を定義するために使う、ボキャブラリーの URL を指定します。 {{htmlattrxref("itemscope")}} は、 <code>itemtype</code> で設定したボキャブラリーがデータ構造内でアクティブになるスコープを設定するために使用します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/lang">{{HTMLAttrDef("lang")}}</a></dt> + <dd>要素の言語を定義します。編集不可能な要素を記述している言語、または編集可能な要素に記述されるべき言語を定義します。この属性の値は、 <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> で定義された形式の「言語タグ」（ハイフン区切りの「言語サブタグ」列）です。<a href="#attr-xml:lang"><strong>xml:lang</strong></a> はこの要素より優先します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/part">{{HTMLAttrDef("part")}}</a></dt> + <dd>要素のパート名の空白区切りによるリストです。パート名を利用すると、 CSS がシャドウツリー内にある特定の要素を {{CSSxRef("::part")}} 擬似要素を使用することで選択し、スタイル付けすることができます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/slot">{{HTMLAttrDef("slot")}}</a></dt> + <dd><a href="/ja/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> のシャドウツリー内のスロットを、要素に割り当てます。<code>slot</code> 属性を持つ要素は、<code>slot</code> 属性の値と一致する {{htmlattrxref("name", "slot")}} 属性の値を持つ {{HTMLElement("slot")}} 要素が生成したスロットに割り当てられます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/spellcheck">{{HTMLAttrDef("spellcheck")}}</a></dt> + <dd>要素でスペルチェックを行うかどうかを定義する、列挙型属性です。以下の値が使えます: + <ul> + <li><code>true</code>: 可能であればその要素でスペルチェックを行うことを示す</li> + <li><code>false</code>: その要素でスペルチェックを行わないことを示す</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/style">{{HTMLAttrDef("style")}}</a></dt> + <dd>要素に適用する <a href="/ja/docs/Web/CSS">CSS</a> スタイル宣言を設定します。なお、スタイルは別のファイルで定義することが推奨されます。この属性と {{HTMLElement("style")}} 要素の主な用途は、例えばテストのために、すばやくスタイルを適用することです。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/tabindex">{{HTMLAttrDef("tabindex")}}</a></dt> + <dd>要素が入力フォーカスを受け付ける (<em>focusable</em>) 場合に、順番的なキーボードナビゲーションに参加するかどうか、参加するならばどの位置に入るかを示す、整数値属性です。いくつかの値を取ることができます。 + <ul> + <li><em>負数</em>: 要素はフォーカスを受け付けますが、順番的なキーボードナビゲーションでは到達できません。</li> + <li><code>0</code>: 要素はフォーカスを受け付けて、順番的なキーボードナビゲーションで到達できます。その順番はプラットフォームの慣習に従って定義されます。</li> + <li><em>正数</em>: 要素はフォーカスを受け付けて、順番的なキーボードナビゲーションで到達できることを表します。その相対的な順序は属性の値で定義され、 <a href="#attr-tabindex"><strong>tabindex</strong></a> の数値の昇順にフォーカスを移します。複数の要素が同じ tabindex の値を持っている場合は、文書内における要素の相対的な位置に従います。</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/title">{{HTMLAttrDef("title")}}</a></dt> + <dd>要素に関するアドバイザリー情報を表すテキストを設定します。この情報は通常、ツールチップとしてユーザーに表示されますが、必ず表示されるとは限りません。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/translate">{{htmlattrdef("translate")}}</a> {{Experimental_Inline}}</dt> + <dd>要素の属性値や子孫 {{DOMxRef("Text")}} ノードの値が、ページをローカライズするときに翻訳対象となるか、あるいは変更せずにおくかを指定する、列挙型属性です。以下の値を使用することができます。 + <ul> + <li>空文字列または <code>yes</code>: 要素が翻訳対象になることを示します。</li> + <li><code>no</code>: 要素が翻訳対象にならないことを示します。</li> + </ul> + </dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td> + <td>{{Spec2("CSS Shadow Parts")}}</td> + <td><code>part</code> および <code>exportparts</code> の各グローバル属性を追加。・</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット。 {{SpecName("HTML5.1")}} に <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code> を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット。 {{SpecName("HTML5 W3C")}} に <code>spellcheck</code>, <code>draggable</code>, <code>dropzone</code>, <code>spellcheck</code> を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット。 {{SpecName("HTML4.01")}} に、グローバル属性の概念を導入し、 <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, <code>title</code> が真にグローバルな属性になった。<br> + 当初は XHTML の一部であった <code>xml:lang</code> が、HTML に組み込まれた。<br> + <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code>, <code>translate</code> を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>グローバル属性の定義なし。後の仕様書でグローバル属性になるいくつかの属性を、要素のサブセットで定義。<br> + <code>class</code> および <code>style</code> は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}<br> + <code>dir</code> は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}<br> + <code>id</code> は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}<br> + <code>lang</code> は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}<br> + <code>tabindex</code> は、次の要素のみで対応しています。 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}<br> + <code>accesskey</code> は、次の要素のみで対応しています。 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}<br> + <code>title</code> は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{DOMxRef("Element")}} および {{DOMxRef("GlobalEventHandlers")}} インターフェイスで、ほとんどのグローバル属性を調べることができます。</li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>inputmode</code></strong> は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>で、ユーザーが要素やその内容を編集する際に入力されるデータの型のヒントとなる列挙型属性です。</span>下記の値が存在します。</p> + +<dl> + <dt><code>none</code></dt> + <dd>仮想キーボードなし。ページが独自のキーボード入力を実装している場合のためのものです。</dd> + <dt><code>text</code> (既定値)</dt> + <dd>ユーザーの現在のロケールにおける標準的な入力キーボードです。</dd> + <dt><code>decimal</code></dt> + <dd>実数を入力するキーボードで、数字とユーザーのロケール上で適切な区切り文字 (ふつうは <kbd>.</kbd> または <kbd>,</kbd>) を含みます。負号キー (<kbd>-</kbd>) を表示するかどうかは端末によります。</dd> + <dt><code>numeric</code></dt> + <dd>数字を入力するキーボードですが、数字の 0 から 9 までのみを必要とするものです。負号キーを表示するかどうかは端末によります。</dd> + <dt><code>tel</code></dt> + <dd>電話番号を入力するテンキーで、 0 から 9 までの数字と、アスタリスク (<kbd>*</kbd>)、シャープ (<kbd>#</kbd>) キーがあります。電話番号を<em>要求する</em>入力欄は、ふつうは代わりに <code>{{HTMLElement("input/tel", '<input type="tel">')}}</code> を使用してください。</dd> + <dt><code>search</code></dt> + <dd>検索入力に最適化された仮想キーボードです。例えば、 <a href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute">return/submit</a> キーのラベルが「検索」になっていたり、他の最適化が行われている可能性もあります。検索クエリを<em>要求する</em>入力欄は、ふつうは代わりに <code>{{HTMLElement("input/search", '<input type="search">')}}</code> を使用してください。</dd> + <dt><code>email</code></dt> + <dd>電子メールアドレスの入力に最適化された仮想キーボードです。ふつう <kbd>@</kbd> の文字を含むなどの他の最適化が行われます。メールアドレスの入力を<em>要求する</em>入力欄は、ふつうは代わりに <code>{{HTMLElement("input/email", '<input type="email">')}}</code> を使用してください。</dd> + <dt><code>url</code></dt> + <dd>URL の入力に最適化された仮想キーボードです。例えば <kbd>/</kbd> キーが目立つ場所に配置されているなどです。履歴へのアクセス機能などの拡張機能が含まれている場合もあります。 URL の入力を<em>要求する</em>入力欄は、ふつうは代わりに <code>{{HTMLElement("input/url", '<input type="url">')}}</code> を使用してください。</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.inputmode")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>一覧</li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>is</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>で、標準の HTML 要素が定義されたカスタム内蔵要素のように振舞うよう指定することができます (詳しくは <a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタム要素の使用</a> を参照してください)。</span></p> + +<p>この属性は、指定されたカスタム要素名が現在の文書で正常に<a href="/ja/docs/Web/API/CustomElementRegistry/define">定義され</a>、適用されている要素型が拡張されている場合にのみ使用します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードは、 <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> の例から取得されたものです (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">ライブで参照</a>)。</p> + +<pre class="brush: js notranslate">// 要素のクラスを作成 +class WordCount extends HTMLParagraphElement { + constructor() { + // Always call super first in constructor + super(); + + // Constructor contents ommitted for brevity + ... + + } +} + +// 新しい要素を定義 +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html notranslate"><p is="word-count"></p></pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.is")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>itemid</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、項目の固有でグローバルな識別子の形でマイクロデータを提供します。</span> <code>itemid</code> 属性は、 {{htmlattrxref("itemscope")}} および {{htmlattrxref("itemtype")}} 属性のある要素にだけ指定することができます。また <code>itemid</code> は、グローバル識別子に対応する語彙を参照または定義する <code>itemtype</code> に関係した <code>itemscope</code> 属性を持つ要素でのみ使用することができます。</p> + +<p><code>itemtype</code> のグローバル識別子の正確な意味は、それを特定する語彙の中で識別子の定義が提供されます。語彙は同じグローバル識別子を持つ複数の項目が共存できるかどうか、もしそうであれば、同じ識別子を持つ項目がどのように扱われるかを定義します。</p> + +<p class="note"><strong>注:</strong> {{glossary("WHATWG")}} の定義では、 <code>itemid</code> が {{glossary("URL")}} でなければならないと指定しています。しかし、以下の例では {{glossary("URN")}} も使用されることを明らかに示しています。この矛盾はマイクロデータ仕様の不完全性を反映したものかもしれません。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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></pre> + +<h3 id="Structured_data" name="Structured_data">構造化データ</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1"> + <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('HTML', '', '', '', 'Web/HTML/Global_attributes/itemid')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.itemid")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">他のグローバル属性</a></li> + <li>マイクロデータに関連する他のグローバル属性 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>itemprop</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、アイテムにプロパティを追加するために使用します。すべての HTML 要素に <code>itemprop</code> 属性を設定することができ、 <code>itemprop</code> は名前と値の組み合わせで構成されます。名前と値の組み合わせは<strong>プロパティ</strong>と呼ばれ、1つまたは複数のプロパティで<strong>アイテム</strong>を構成します。プロパティ値は文字列又は URL のどちらかで、 {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}}, {{HTMLElement("video")}} など、広範にわたる要素と関連付けすることができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例は <code>itemprop</code> 属性でマークアップされた要素のセットのソースと、その後で結果の構造化データを表す表を示します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Movie"> + <h1 <strong>itemprop="name"</strong>>Avatar</h1> + <span>Director: + <span <strong>itemprop="director"</strong>>James Cameron</span> + (born August 16, 1954)</span> + <span <strong>itemprop="genre"</strong>>Science fiction</span> + <a href="../movies/avatar-theatrical-trailer.html" + <strong>itemprop="trailer"</strong>>Trailer</a> +</div></pre> + +<h3 id="Structured_data" name="Structured_data">構造化データ</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="2"></td> + <th colspan="2" rowspan="1"><strong>Item</strong></th> + </tr> + <tr> + <th><strong>itemprop name</strong></th> + <th><strong>itemprop value</strong></th> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>trailer</td> + <td>../movies/avatar-theatrical-trailer.html</td> + </tr> + </tbody> +</table> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p>プロパティは、文字列か URL のどちらかの形で値を持ちます。文字列の値が URL である場合、 {{HTMLElement("a")}} 要素とその {{htmlattrxref("href", "a")}} 属性、 {{HTMLElement("img")}} 要素とその {{htmlattrxref("src", "img")}} 属性、または外部リソースにリンクしたり埋め込んだりするその他の要素を用いて表現されます。</p> + +<h3 id="Three_properties_with_values_that_are_strings" name="Three_properties_with_values_that_are_strings">文字列の値を持つ3つのプロパティ</h3> + +<pre class="brush: html"><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></pre> + +<h3 id="One_property_image_whose_value_is_a_URL" name="One_property_image_whose_value_is_a_URL">値が URL である "image" による1つのプロパティ</h3> + +<pre class="brush: html"><div itemscope> + <img itemprop="image" + src="google-logo.png" alt="Google"> +</div></pre> + +<p>文字列の値が人間にとって読んだり理解したりするのが簡単ではない場合（例えば、数字や文字による長い文字列）、 data 要素の中身にもっと人間理解しやすいもの（これは構造化データの一部ではありません。―以下の例を参照）を入れた上で、 value 属性を使用して表現することができます。</p> + +<h3 id="An_item_with_a_property_whose_value_is_a_product_ID" name="An_item_with_a_property_whose_value_is_a_product_ID">値がプロダクト ID であるプロパティがあるアイテム</h3> + +<p>ID が人間にとって読みやすくない場合、 ID の代わりに製品名が人間から見える文字列になります。</p> + +<pre class="brush: html"><h1 itemscope> + <data itemprop="product-id" + value="9678AOU879">The Instigator 2000</data> +</h1></pre> + +<p>数値データの場合、 meter 要素とその value 属性を使用することができます。</p> + +<h3 id="A_meter_element" name="A_meter_element">meter 要素</h3> + +<pre class="brush: html"><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></pre> + +<p>同様に、日付や時間に関連するデータについては、 time 要素と datetime 属性を使用することができます。</p> + +<h3 id="An_item_with_one_property_birthday_whose_value_is_a_date" name="An_item_with_one_property_birthday_whose_value_is_a_date">値が日付であるプロパティ、 "birthday" を1つだけ持つアイテム</h3> + +<pre class="brush: html"><div itemscope> + I was born on <time + itemprop="birthday" + datetime="2009-05-10">May 10th 2009</time>. +</div></pre> + +<p>プロパティはまた、プロパティを宣言する要素で itemscope 属性を置くことによって、名前と値の組のグループを持つことができます。それぞれの値は、文字列か名前と値の組（すなわちアイテム）のグループのいずれかです。</p> + +<h3 id="An_outer_item_representing_a_person_and_an_inner_one_representing_a_band" name="An_outer_item_representing_a_person_and_an_inner_one_representing_a_band">外側のアイテムは人物を表し、内側のアイテムはバンドを表す</h3> + +<pre class="brush: html"><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></pre> + +<p>上の外側のアイテムは、 "name" と "band" の2つのプロパティを持ちます。 "name" は "Amanda" であり、 "band" はそれ自身がアイテムであり、2つのプロパティ "name" と "size" を持ちます。バンドの "name" は "Jazz Band" であり、 "size" は "12" です。この例における外側のアイテムは、トップレベルのマイクロデータアイテムです。他の一部でないアイテムは、トップレベルマイクロデータアイテムと呼ばれます。</p> + +<h3 id="All_the_properties_separated_from_their_items" name="All_the_properties_separated_from_their_items">プロパティがすべてアイテムから分離された例</h3> + +<p>この例は前のものと同じですが、すべてのプロパティがアイテムから分離されています。</p> + +<pre class="brush: 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></pre> + +<p>これは1つ前の例と同じ結果になります。最初のアイテムは2つのプロパティを持ちます、 "name" は "Amanda" に設定され、 "band" はもう1つのアイテムに設定されます。2つ目のアイテムはさらに2つのプロパティを持ち、 "name" は "Jazz Band" に設定され、 "size" は "12" に設定されます。</p> + +<p>アイテムは同じ名前で異なる値をもつ複数のプロパティを持つことができます。</p> + +<h3 id="Ice_cream_with_two_flavors" name="Ice_cream_with_two_flavors">2つの味のアイスクリーム</h3> + +<pre class="brush: html"><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></pre> + +<p>この結果は2つのプロパティを持つアイテムになり、どちらも名前は "flavor" で、値は "Lemon sorbet" および "Apricot sorbet" になります。</p> + +<p>プロパティを導入する要素は、複数のプロパティが同じ値を持つ場合に重複を避けるために、一度に複数のプロパティを導入することもできます。</p> + +<h3 id="An_item_with_two_properties_favorite-color_and_favorite-fruit_both_set_to_the_value_orange" name='="An_item_with_two_properties_favorite-color_and_favorite-fruit_both_set_to_the_value_orange"'>2つのプロパティ "favorite-color" 及び "favorite-fruit" を持ち、どちらも "orange" の値に設定されるアイテム</h3> + +<pre class="brush: html"><div itemscope> + <span + itemprop="favorite-color + favorite-fruit">orange</span> +</div></pre> + +<div class="note"> +<p>メモ: マイクロデータとマイクロデータがマークアップされる文書のコンテンツに関係はありません。</p> +</div> + +<h3 id="Same_structured_data_marked_up_in_two_different_ways" name="Same_structured_data_marked_up_in_two_different_ways">2つの異なる方法でマークアップされた同じ構造化データ</h3> + +<p id="There_is_no_semantic_difference_between_the_following_two_examples">以下の2つの例には意味的な違いはありません。</p> + +<pre class="brush: html"><figure> + <img src="castle.jpeg"> + <figcaption><span + itemscope><span + itemprop="name">The Castle</span></span> + (1986)</figcaption> +</figure></pre> + +<pre class="brush: html"><span itemscope><meta + itemprop="name" + content="The Castle"></span> +<figure> + <img src="castle.jpeg"> + <figcaption>The Castle + (1986)</figcaption> +</figure></pre> + +<p>どちらも caption を伴う figure を持ち、両者とも、 figure に完全に関連しない、名前 "name" と値 "The Castle" をもつ名前と値の組を持つアイテムを持ちます。唯一の違いは、ユーザーが文書の外に figcaption をドラッグする場合、アイテムがドラッグ＆ドロップデータに含まれることです。アイテムに関連付けられる画像は含まれません。</p> + +<h2 id="Names_and_values" name="Names_and_values">名前と値</h2> + +<p>プロパティは、大文字・小文字を区別して名前と値の組を表す一意なトークンの順序なしセットです。下記の例で、それぞれのデータセルはトークンです。</p> + +<h3 id="Names_examples" name="Names_examples">名前の例</h3> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col"></th> + <th colspan="2" rowspan="1" scope="col">Item</th> + </tr> + <tr> + <th scope="col">itemprop <strong>name</strong></th> + <th scope="col">itemprop <strong>value</strong></th> + </tr> + </thead> + <tbody> + <tr> + <th>itemprop</th> + <td>country</td> + <td>Ireland</td> + </tr> + <tr> + <th>itemprop</th> + <td>Option</td> + <td>2</td> + </tr> + <tr> + <th>itemprop</th> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + <td>Ring of Kerry</td> + </tr> + <tr> + <th>itemprop</th> + <td>img</td> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + </tr> + <tr> + <th>itemprop</th> + <td>website</td> + <td>flickr</td> + </tr> + <tr> + <th>itemprop</th> + <td>(token)</td> + <td>(token)</td> + </tr> + </tbody> +</table> + +<p><strong>トークン</strong>は、文字列か URL のいずれかです。アイテムは、 URL の場合に<strong>型付きアイテム</strong>と呼ばれます。そうでなければ文字列です。文字列は、ピリオドまたはコロンを含むことができません (下記参照)。</p> + +<ol> + <li>アイテムが型付きアイテムの場合、次のいずれかでなければなりません。 + <ol> + <li>定義されたプロパティ名。</li> + <li>または、妥当な URL。これは、語彙定義を参照します。</li> + <li>独自のアイテムプロパティ名を表す妥当な URL (つまり、公式な私用で定義されていないもの)。</li> + </ol> + </li> + <li>アイテムが型付きアイテムでない場合は、次のようになります。 + <ol> + <li>"<code>.</code>" (U+002E FULL STOP)文字と "<code>:</code>" (U+003A COLON) 文字を含まず、所有者のアイテムプロパティ名 (公式な仕様で定義されないもの) として使用される文字列。</li> + </ol> + </li> +</ol> + +<p class="note"><strong>メモ: </strong> 上記の規則では、 URL ではない値では ":" が許可されていません。なぜならそうでなければ URL と区別できないからです。 "." 文字をもつ値は、将来の拡張のために予約されています。空白文字は複数のトークンとして解析されるために許可されません。</p> + +<h2 id="Values" name="Values">値</h2> + +<p>名前と値の組のプロパティ値は、次のリストで最初に一致するものに与えられます。</p> + +<ul> + <li>要素が <code>itemscope</code> 属性を持つ場合 + + <ul> + <li>値は要素によって作成された<strong>アイテム</strong>を持つ</li> + </ul> + </li> + <li>要素が <code>meta</code> 要素である場合 + <ul> + <li>値は、要素の <code>content</code> 属性の値である</li> + </ul> + </li> + <li>要素が <code>audio</code>, <code>embed</code>, <code>iframe</code>, <code>img</code>, <code>source</code>, <code>track</code>, <code>video</code> 要素である場合 + <ul> + <li>値は、属性が設定される時に要素のノード文書 (<a href="https://developer.mozilla.org/ja/docs/Web/API/Microdata_DOM_API">Microdata DOM API</a>の一部) に関連する要素の src 属性の解析する値に由来する結果の URL 文字列である</li> + </ul> + </li> + <li>要素が <code>a</code>, <code>area</code>, <code>link</code> 要素である場合 + <ul> + <li>値は、属性が設定される時に要素のノード文書に関連する要素の href 属性の解析する値に由来する結果の URL 文字列である</li> + </ul> + </li> + <li>要素が <code>object</code> 要素である場合 + <ul> + <li>値は、属性が設定される時に要素のノード文書に関連する要素の data 属性の解析する値に由来する結果の URL 文字列である</li> + </ul> + </li> + <li>要素が <code>data</code> 要素である場合 + <ul> + <li>値は、要素の value 属性の値である</li> + </ul> + </li> + <li>要素が <code>meter</code> 要素である場合 + <ul> + <li>値は、要素の <code>value</code> 属性の値である</li> + </ul> + </li> + <li>要素が <code>time</code> 要素である場合 + <ul> + <li>値は、要素の <code>datetime</code> 値である</li> + </ul> + </li> +</ul> + +<p>それ以外</p> + +<ul> + <li>値は、要素の <var>textContent</var> である。</li> +</ul> + +<p>プロパティの値が <code>URL</code> である場合、プロパティは URL プロパティ要素を使用して指定されなければなりません。 URL プロパティ要素は、 <code>a</code>, <code>area</code>, <code>audio</code>, <code>embed</code>, <code>iframe</code>, <code>img</code>, <code>link</code>, <code>object</code>, <code>source</code>, <code>track</code>, <code>video</code> 要素です。</p> + +<h3 id="Name_order" name="Name_order">名前の順序</h3> + +<p>名前は互いに順不同ですが、特定の名前が複数の値を持つ場合、その値は相対的な順序を持ちます。</p> + +<p>以下の例では、 "a" プロパティは "1" 及び "2" の値を<em>その順番で</em>持ちますが、 "a" プロパティが "b" プロパティの前にくることは重要ではありません</p> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="a">2</p> + <p itemprop="b">test</p> +</div></pre> + +<p>以下のものは同等です</p> + +<pre class="brush: html"><div itemscope> + <p itemprop="b">test</p> + <p itemprop="a">1</p> + <p itemprop="a">2</p> +</div></pre> + +<p>以下も同等です</p> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div></pre> + +<p>以下も同等です</p> + +<pre class="brush: html"><div id="x"> + <p itemprop="a">1</p> +</div> +<div itemscope itemref="x"> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div> +</pre> + +<h2 id="Other_examples" name="Other_examples">その他の例</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="Structured_data_2" name="Structured_data_2">構造化データ</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1">http://vocab.example.net/book: urn:isbn:0-330-34032-8</td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td>Peter F. Hamilton</td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.itemprop")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes">他のグローバル属性</a></li> + <li>マイクロデータに関連する他のグローバル属性 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>の <strong><code>itemref</code></strong> プロパティは、 <code>itemscope</code> 属性を持つ要素の子孫でない場合、 <code><strong>itemref</strong></code> を使用してアイテムと関連付けができます。</span></p> + +<p><code>itemref</code> は文書内のどこかにある追加のプロパティがある要素の ID （<code>itemid</code> ではない）のリストを提供します。</p> + +<p><code>itemref</code> 属性は <code>itemscope</code> 属性が指定された要素のみで指定することができます。</p> + +<p class="note"><strong>メモ: </strong> <code>itemref</code> 属性は、マイクロデータのデータモデルの一部ではありません。注釈づけるデータが扱いやすいツリー構造に従っていないページにおいて、注釈を追加することを助けるための単なる構文構造です。例えば、テーブル内のデータをマークアップするために、セル内のプロパティを維持しながらそれぞれの列に別々なアイテムを定義することができます。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="Structured_data" name="Structured_data">構造化データ</h3> + +<p><small>(in <a href="https://json-ld.org/" rel="external">JSON-LD</a> format)</small></p> + +<pre class="brush: json">{ + "@id": "amanda", + "name": "Amanda", + "band": { + "@id": "b", + "name": "Jazz Band", + "size": 12 + } +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Example', '', '', '', 'Web/HTML/Global_attributes/itemref')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.itemref")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes">他のグローバル属性</a></li> + <li>マイクロデータに関連する他のグローバル属性 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>itemscope</code></strong> は論理型の<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>で、関連付けられたメタデータのスコープを定義します。 <code>itemscope</code> 属性を要素に指定すると、要素に関連付けられた数々の名前と値の組み合わせを持つ新しいアイテムを作成します。</span>関連する属性である {{htmlattrxref("itemtype")}} は、アイテム及びそのプロパティの文脈を記述する語彙 (<a href="http://schema.org/">schema.org</a> など) の妥当な URL を指定するために使用されます。以下のそれぞれの例では、語彙は <a href="https://schema.org/">schema.org</a> からのものです。</p> + +<p>あらゆる HTML 要素に <code>itemscope</code> 属性を設定することができます。 <code>itemscope</code> 要素が <code>itemtype</code> を持たない場合は、関連付けられた <code>itemref</code> を持つ必要があります。</p> + +<div class="note"> +<p><strong>注:</strong> <code>itemtype</code> 属性についての詳細は、 <a href="http://schema.org/Thing">http://schema.org/Thing</a> をご覧ください</p> +</div> + +<h3 id="Simple_example" name="Simple_example">単純な例</h3> + +<h4 id="HTML">HTML</h4> + +<p>以下の例では、 <code>itemscope</code> 属性を指定しています。この例では <code>itemtype</code> を "http://schema.org/Movie" に設定し、三つの関連する <code>itemprop</code> 属性を定義します。</p> + +<pre class="brush:html notranslate"><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> +</pre> + +<h4 id="Structured_data" name="Structured_data">構造化データ</h4> + +<p>以下の表は前の例の構造化データを示しています。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="6">itemscope</td> + <td>Itemtype</td> + <td colspan="2">Movie</td> + </tr> + <tr> + <td>itemprop</td> + <td>(itemprop name)</td> + <td>(itemprop value)</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science Fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>https://youtu.be/0AY1XIkX7bY</td> + <td>Trailer</td> + </tr> + </tbody> +</table> + +<h3 id="itemscope_id_attributes" name="itemscope_id_attributes">itemscope id 属性</h3> + +<p>要素に <code>itemscope</code> 属性を指定したとき、新しいアイテムが作成されます。アイテムは名前と値の組のグループで構成されます。 <code>itemscope</code> 属性及び <code>itemtype</code> 属性のついた要素には、 {{htmlattrxref("id")}} 属性を指定することもできます。 <code>id</code> 属性は新しいアイテムにグローバル識別子を設定するために使用することができます。グローバル識別子によって、アイテムをウェブ中のページにあるほかのアイテムに結び付けることができます。</p> + +<h3 id="Example" name="Example">例</h3> + +<p>以下の例には四つの <code>itemscope</code> 属性があります。それぞれの <code>itemscope</code> 属性は、対応する <code>itemtype</code> 属性のスコープを設定しています。以下の例にある <code>Recipe</code>, <code>AggregateRating</code>, <code>NutritionInformation</code> の <code>itemtype</code> は、レシピのための <a href="www.schema.org">schema.org</a> 構造化データの一部であり、最初の <code>itemtype</code>, http://schema.org/Recipe として定義されています。</p> + +<pre class="brush: html notranslate"><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></pre> + +<h3 id="Results" name="Results">結果</h3> + +<h4 id="HTML_2">HTML</h4> + +<p>以下のものは、先ほどのコードの例を表示するものです。</p> + +<p>{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}</p> + +<h4 id="Structured_data_2" name="Structured_data_2">構造化データ</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Recipe</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Grandma's Holiday Apple Pie</td> + </tr> + <tr> + <td>itemprop</td> + <td>image</td> + <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td> + </tr> + <tr> + <td>itemprop</td> + <td>datePublished</td> + <td>2009-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>description</td> + <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td> + </tr> + <tr> + <td>itemprop</td> + <td>prepTime</td> + <td>PT30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>cookTime</td> + <td>PT1H</td> + </tr> + <tr> + <td>itemprop</td> + <td>totalTime</td> + <td>PT1H30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeYield</td> + <td>1 9" pie (8 servings)</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>Thinly-sliced apples: 6 cups</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>White sugar: 3/4 cup</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeInstructions</td> + <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">author [Person]</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Carol Smith</td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.0</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount</td> + <td>35</td> + </tr> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td> + </tr> + <tr> + <td>itemprop</td> + <td>servingSize</td> + <td>1 medium slice</td> + </tr> + <tr> + <td>itemprop</td> + <td>calories</td> + <td>250 cal</td> + </tr> + <tr> + <td>itemprop</td> + <td>fatContent</td> + <td>12 g</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注</strong>: HTML からマイクロデータを抽出するには、 Google の<a href="https://developers.google.com/structured-data/testing-tool/">構造化データテストツール</a>が便利です。上の HTML で試してみてください。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.itemscope")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes">他のグローバル属性</a></li> + <li>マイクロデータに関連する他のグローバル属性: + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a><strong>の <code>itemtype</code></strong> は、データ構造の中で <code>itemprop</code> （項目のプロパティ）を定義するのに使われる語彙の URL を指定します。</span> {{htmlattrxref("itemscope")}} は <code>itemtype</code> が有効になるデータ構造の語彙の対象範囲を設定するために使用します。</p> + +<p>Google などの主要な検索エンジンは、構造化データのために <a href="http://schema.org/">schema.org</a> の語彙に対応しています。この語彙は標準の型名とプロパティ名の組み合わせを定義しています。例えば、 <code><a href="http://schema.org/MusicEvent">MusicEvent</a></code> はコンサートを示し、 <code><a href="http://schema.org/startDate">startDate</a></code> プロパティや <code><a href="http://schema.org/location">location</a></code> プロパティでコンサートの主要な詳細を示します。この場合、 <a href="http://schema.org/MusicEvent"><code>MusicEvent</code></a> は <code>itemtype</code> で URL として使用し、 <code>startDate</code> や <code>location</code> は <code><a href="http://schema.org/MusicEvent">MusicEvent</a></code> が定義する <code>itemprop</code> となります。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code>itemtype</code> 属性についての詳細は、 <a href="http://schema.org/Thing">http://schema.org/Thing</a> をご覧ください</p> +</div> + +<ul> + <li><strong>itemtype</strong> 属性には値が必要で、値は大文字小文字を区別する一意のトークンを順不同で並べたもので、それぞれが妥当な絶対 URL であり、すべてが同じ語彙を使用して定義する必要があります。属性の値は1つ以上のトークンを含む必要があります。</li> + <li>項目型はすべて、（<a href="http://schema.org/">schema.org</a> などの）適用可能な仕様書で定義された型であり、すべて同じ語彙を使用して定義する必要があります。</li> + <li>itemtype 属性は itemscope 属性が指定されている要素の中でのみ指定できます。</li> + <li>itemid 属性は、 itemscope 属性と itemtype 属性の両方を指定された要素でのみ指定することができます。これらは itemscope 属性を持つ要素で、語彙の仕様によって定められるとおり、その itemtype が項目のグローバル識別子に対応しない語彙を指定している場合にのみ指定する必要があります。</li> + <li>グローバル識別子の正確な意味は、語彙の仕様によって決定されます。これは、同じグローバル識別子をもつ複数の項目が存在することが許可されるかどうか（同じページか異なるページ上かどうか）、そしてその語彙に対する処理規則が同じ ID をもつ複数のアイテムの場合の取り扱いに関するものを定義するのはそのような仕様次第です。</li> +</ul> + +<h3 id="Simple_example" name="Simple_example">単純な例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="brand">ACME</span> + <span itemprop="name">Executive Anvil</span> +</div></pre> + +<h4 id="Structured_data" name="Structured_data">構造化データ</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="4">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">schema.org Product</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Executive Anvil</td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">brand [Thing]</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>ACME</td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: 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></pre> + +<h3 id="Result" name="Result">結果</h3> + +<h4 id="HTML_3">HTML</h4> + +<p>{{EmbedLiveSample('HTML_2', '300', '400', '', 'Web/HTML/Global_attributes/itemtype')}}</p> + +<h4 id="Structured_data_2" name="Structured_data_2">構造化データ</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="7">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Product (http://schema.org/Product)</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Executive Anvil</td> + </tr> + <tr> + <td>itemprop</td> + <td>image</td> + <td>https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png</td> + </tr> + <tr> + <td>itemprop</td> + <td>description</td> + <td>Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.</td> + </tr> + <tr> + <td>itemprop</td> + <td>mpn</td> + <td>925872</td> + </tr> + <tr> + <td>itemprop</td> + <td>brand [Thing]</td> + <td> </td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>ACME</td> + </tr> + <tr> + <td colspan="1" rowspan="9">itemscope</td> + <td>itemprop[itemtype]</td> + <td>aggregateRating[AggregateRating]</td> + <td> </td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.4</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount</td> + <td>89</td> + </tr> + <tr> + <td>itemprop</td> + <td>offers [Offer]</td> + <td>http://schema.org/Offer</td> + </tr> + <tr> + <td>itemprop</td> + <td>priceCurrency</td> + <td>USD</td> + </tr> + <tr> + <td>itemprop</td> + <td>price</td> + <td>119.99</td> + </tr> + <tr> + <td>itemprop</td> + <td>priceValidUntil</td> + <td>2020-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>itemCondition</td> + <td>http://schema.org/UsedCondition</td> + </tr> + <tr> + <td>itemprop</td> + <td>availability</td> + <td>http://schema.org/InStock</td> + </tr> + <tr> + <td colspan="1" rowspan="2">itemscope</td> + <td>itemprop[itemtype]</td> + <td>seller [Organization]</td> + <td>http://schema.org/Organization</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Executive Objects</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: HTML からマイクロデータを抽出するには、 Google の<a href="https://developers.google.com/structured-data/testing-tool/">構造化データテストツール</a>が便利です。上の HTML で試してみてください。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.itemtype")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes">他のグローバル属性</a></li> + <li>マイクロデータに関連する他のグローバル属性 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>lang</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素の言語の定義に使われます。編集不可の要素では記述されている言語、また、編集可能な要素ではユーザーが書き込むべき言語です。属性には単一の「言語タグ」を <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> で定義された書式で持ちます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>属性値が<em>空文字列</em> (<code>lang=""</code>) の場合、言語は <em>unknown</em> に設定されます。言語タグが BCP47 に準拠していない場合は、 <em>invalid</em> に設定されます。</p> + +<div class="note"> +<h2 id="Language_tag_syntax" name="Language_tag_syntax">言語タグの構文</h2> + +<p>BCP47 の完全な構文は、細かい特定の言語の方言まで示せるようにとても複雑になっていますが、ほとんどの使い方ではずっと単純です。</p> + +<p>言語タグはハイフンで区切られた<em>言語サブタグ</em>より成り、それぞれのサブタグは言語の特定の特性を示します。３つのサブタグがもっともよく使われます。</p> + +<dl> + <dt>言語サブタグ</dt> + <dd>必須です。基本言語を定義する２～３文字のコードで、ふつうすべて小文字で書かれます。例えば、英語の言語コードは <code>en</code> であり、バデシ語のコードは <code>bdz</code> です。</dd> + <dt>書記体系サブタグ</dt> + <dd>任意です。このサブタグは、言語で使われる書記体系を定義し、常に４文字の長さで、最初の文字は大文字です。例えば、ブライユ (点字) のフランス語は <code>fr-Brail</code> であり、 <code>ja-Kana</code> はカタカナで書かれた日本語です。言語がとても一般的な方法で記述される場合、例えば英語でアルファベットを使う場合などは、このサブタグを使用する必要はありません。</dd> + <dt>地域サブタグ</dt> + <dd>任意です。このサブタグは基本言語の特定の場所における方言を定義し、国コードを示す大文字２文字または地域を示す３桁の数字です。例えば、 <code>es-ES</code> はスペインで使われているスペイン語であり、 <code>es-013</code> は中央アメリカで使われているスペイン語です。「国際スペイン語」は単なる <code>es</code> になります。</dd> +</dl> + +<p>両方がある場合、書式体系サブタグは地域サブタグよりも先に置きます。 — <code>ru-Cyrl-BY</code> はベラルーシで使われているキリル文字によるロシア語です。</p> + +<p>言語の正しいサブタグコードを探すには、 <a href="https://r12a.github.io/app-subtags/" rel="external">the Language Subtag Lookup</a> を見てみてください。</p> +</div> + +<p><strong>lang</strong> 属性が設定されていても、 <a href="/ja/docs/Web/HTML/Global_attributes/xml:lang"><strong>xml:lang</strong></a> 属性の方が優先するので、効果がないことがあります。</p> + +<p>CSS 疑似クラスの {{cssxref(":lang")}} においては、名前が異なると二つの無効な言語名を区別します。ですから、 <code>:lang(es)</code> は <code>lang="es-ES"</code> 及び <code>lang="es-419"</code> にも一致しますが、 <code>:lang(xyzzy)</code> は <code>lang="xyzzy-Zorp!"</code> とは一致しません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。{{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。<code>xml:lang</code> の振る舞いと言語判断のアルゴリズムを定義。真にグローバルな属性となった。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}} を除くすべての要素で対応。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.lang")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> + <li><a href="/ja/docs/Web/HTTP/Headers/Content-Language">HTTP の <code>Content-Language</code> ヘッダー</a></li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>part</code></strong> は <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>で、要素のパート名のスペース区切りのリストが含まれています。 CSS はパート名を使用して、 {{CSSxRef("::part")}} 擬似要素を介してシャドウツリー内の特定の要素の選択およびスタイルの設定を行うことができます。</p> + +<p>使用例については <a href="https://mdn.github.io/web-components-examples/shadow-part/">Shadow part example</a> をご覧ください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#part-attr", "part")}}</td> + <td>{{Spec2('CSS Shadow Parts')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.part")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>slot</code></strong> は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>で、<a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">シャドウ DOM</a> のシャドウツリー内にあるスロットをある要素に割り当てます。 <code>slot</code> 属性をもつ要素は、{{htmlattrxref("name", "slot")}} 属性の値がその <code>slot</code> 属性の値と一致する {{HTMLElement("slot")}} 要素により生成されたスロットに割り当てられます。</p> + +<p>例えば、<a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">テンプレートとスロットの使用</a>ガイドをみてください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.slot")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>spellcheck</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素でスペルミスのチェックを行うかを定義する列挙型属性です。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div> + +<div class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>以下の値を使用できます。</p> + +<ul> + <li><code>true</code>: 可能であればその要素でスペルチェックを行うことを示す</li> + <li><code>false</code>: その要素でスペルチェックを行わないことを示す</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code>spellcheck</code> 属性は<em>列挙型</em>であり、<em>論理属性</em>ではありません。これは、 <code>true</code> または <code>false</code> のどちらかを明確に使用することが必須であり、 <code><textarea spellcheck></textarea></code> のような省略形は使用できないということです。正しい使い方は <code><textarea spellcheck="true"></textarea></code> です。</p> +</div> + +<p>この属性を設定しなかった場合の既定値は、要素の種類やブラウザーによって定義されます。既定値は<em>継承</em>されます。つまりもっとも近い祖先要素の <em>spellcheck</em> が <code>true</code> である場合にのみ、自身もスペルチェックを受けることがあります。</p> + +<p>この属性は単に、ブラウザーに対する助言です。ブラウザーがスペルチェックを有効にすることを求められてはいません。一般的に編集不可能な要素は、 <code>spellcheck</code> 属性を <code>true</code> に設定してブラウザーがスペルチェックに対応していても、スペルチェックされません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}}、初回定義のスナップショット</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.spellcheck")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>style</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素に適用する <a href="/ja/docs/Web/CSS">CSS</a> スタイル宣言を包含します。なお、スタイルは別のファイルで定義することが推奨されます。この属性と {{HTMLElement("style")}} 要素の主な用途は、例えばテストのために、すばやくスタイルを適用できるようにすることです。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<div class="note"> +<p><strong>使用上のメモ:</strong> この属性は、意味的な情報を伝えるために使用してはいけません。すべてのスタイルが削除されたとしても、ページは依然として意味的にが正しくあるべきです。特に、無関係な情報を隠すために使用しないようにしてください。これには <a href="/ja/docs/Web/HTML/Global_attributes/hidden"><strong>hidden</strong></a> 属性を使用してください。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、 {{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。 {{SpecName("HTML4.01")}} から、真にグローバルな属性になりました。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}} を除くすべての要素で対応。</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Style", "", "")}}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td><code>style</code> 属性の内容を定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.style")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>tabindex</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素が入力フォーカスを持てることと、キーボードの順次ナビゲーション (ふつうは名前の由来である <kbd>Tab</kbd> キーによる) に加わるかどうか、どの位置に加わるかを示します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>値としては整数値を受け付け、値によって次のような様々な結果になります。</p> + +<ul> + <li><em>負の数</em> (ふつう <code>tabindex="-1"</code>) は、その要素がキーボードの順次ナビゲーションでは到達できませんが、 JavaScript や視覚的にフォーカスを持つことができるという意味です。これは主に、 JavaScript で操作可能なウィジェットを作成するのに有用です。 + + <div class="note"> + <p>負の値はオフスクリーンのコンテンツで特定のイベントにより現れる場合に有用です。ユーザーは負の <code>tabindex</code> が付いた要素に、キーボードを使用してフォーカスを与えることはできませんが、スクリプトは <code>focus()</code> <a href="/ja/docs/Web/API/HTMLElement/focus">メソッド</a>を呼び出すことでフォーカスを与えることはできます。</p> + </div> + </li> + <li><code>tabindex="0"</code> は、要素がキーボードの順次ナビゲーションでフォーカスを持つことが可能ですが、その順序は文書のソース内の順序で決定されることを表します。</li> + <li><em>正の数</em>は、要素がキーボードの順次ナビゲーションでフォーカスを持つことが可能であり、その順序は数値で定義されることを表します。つまり、 <code>tabindex="4"</code> は <code>tabindex="5"</code> よりも前にフォーカスが来ますが、 <code>tabindex="3"</code> よりも後だということです。複数の要素に同じ正の数の <code>tabindex</code> が指定された場合は、文書のソース内の互いの位置に従った順序になります。 <code>tabindex</code> の最大値は32767です。指定されなかった場合、既定値の0を取ります。 + <div class="warning"> + <p><code>tabindex</code> の値に0よりも大きな値を使用することは避けてください。そうすると、支援技術に頼っている人がページコンテンツを移動したり操作したりすることが難しくなります。代わりに、論理的な順序で要素を並べて文書を書いてください。</p> + </div> + </li> +</ul> + +<p><code>tabindex</code> 属性を{{htmlelement("div")}} に設定する場合は、子のコンテンツにも <code>tabindex</code> を設定しなければ、矢印キーを使用して子のコンテンツをスクロールできなくなります。 <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/"><code>tabindex</code> のスクロール効果を理解するには、こちらの fiddle を確認してください</a>。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p>キーボード入力で対話的にフォーカスを設定できるようにするために、 <a href="/ja/docs/Web/Guide/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>ではないものに <code>tabindex</code> 属性を組み合わせて使用することは避けてください。例えば、 {{HTMLElement("button")}} 要素を使用する代わりに {{HTMLElement("div")}} 要素を使用してボタンを記述する場合などです。</p> + +<p>対話的要素でないものを使用して対話的コンポーネントを記述すると、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>に掲載されません。これは、支援技術によって移動や操作を行うことを阻害します。このようなコンテンツは、代わりに ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, などの) 対話型要素を使用して意味的に記述するべきです。これらの要素には、 <a href="/ja/docs/Web/Accessibility/ARIA">ARIA</a> によって管理しなければならないアクセシビリティにステータスを伝える、組み込みのロールと状態があります。</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Using the tabindex attribute | The Paciello Group</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、 {{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。 {{SpecName("HTML4.01")}} との違いは、すべての要素でこの属性に対応したこと (グローバル属性化)。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素でのみ対応。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.tabindex")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li>{{domxref("HTMLElement.tabIndex")}} は、この属性を反映します。</li> + <li>tabindex に関するアクセシビリティの問題について、 Adrian Roselli による <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don’t Use Tabindex Greater than 0</a> を参照。</li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>title</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素に関するアドバイザリー情報を表すテキストを含みます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>典型的な用途は以下の通りです。</p> + +<ul> + <li>{{HTMLElement("iframe")}} 要素の支援技術のためのラベル付け</li> + <li>プログラム的に関連付けれた{{HTMLElement("input")}} 要素のためのラベルを、実際の {{HTMLElement("label")}} の代替として提供</li> + <li><a href="/ja/docs/Web/HTML/Element/table">データ表</a>内のコントロールのラベル付け</li> +</ul> + +<p><code>title</code> 属性は {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}}, {{HTMLElement("menuitem")}} の各要素において、追加の意味を持ちます。</p> + +<h2 id="Multiline_titles" name="Multiline_titles">複数行のタイトル</h2> + +<p><code>title</code> 属性は複数の行を含むことができます。それぞれの <code>U+000A LINE FEED</code> (<code>LF</code>) 文字が改行を表します。いくつか注意しなければならないのは、これが次のように二行にわたって描画されることです。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Newlines in <code>title</code> should be taken into account, +like <abbr title="This is a +multiline title">example</abbr>.</p></pre> + +<h3 id="Result" name="Result">結果</h3> + +<div>{{EmbedLiveSample('Multiline_titles')}}</div> + +<h2 id="Title_attribute_inheritance" name="Title_attribute_inheritance">title 属性の継承</h2> + +<p>要素に <code>title</code> 属性がない場合、属性値は親ノードから継承され、さらにそれはその親ノードから継承されるというようになります。</p> + +<p>この属性が空文字列に設定されると、その祖先の <code>title</code> が関係なく、この要素のツールチップとして使用するべきではないことを意味します。</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html notranslate"><div title="CoolTip"> + <p>Hovering here will show “CoolTip”.</p> + <p title="">Hovering here will show nothing.</p> +</div></pre> + +<h3 id="Result_2" name="Result_2">結果</h3> + +<div>{{EmbedLiveSample('Title_attribute_inheritance')}}</div> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p><code>title</code> 属性を使用することは、次のような人々にとって大きな問題になります。</p> + +<ul> + <li>タッチのみの機器を使用している人々</li> + <li>キーボードで操作している人々</li> + <li>読み上げソフトや拡大鏡などの支援技術で操作している人々</li> + <li>細かい運動制御障碍を経験している人々</li> + <li>認知障碍のある人</li> +</ul> + +<p>これは、ブラウザーが表示するページを追加支援技術が解釈することによる複合性について、ブラウザーの互換性に一貫性がないためです。ツールチップ効果が必要であれば、上記の閲覧方法でもアクセスできる<a href="https://inclusive-components.design/tooltips-toggletips/">もっとアクセシブルな技術を使用する</a>方が効果的です。</p> + +<ul> + <li><a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> + <li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips & Toggletips - Inclusive Components</a></li> + <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">The Trials and Tribulations of the Title Attribute - 24 Accessibility</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。 {{SpecName("HTML4.01")}} から、真にグローバルな属性になりました。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("title")}} を除くすべての要素で対応。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.title")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li>{{domxref("HTMLElement.title")}} は、この属性を反映します。</li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>translate</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は列挙型属性で、要素の<em>翻訳可能な属性</em>の値や {{domxref("Text")}} 子ノードを、ページをローカライズする際に翻訳するべきか、あるいは変更せずにおくかを指定します。</span>以下の値を使用することができます。</p> + +<ul> + <li>空文字列または "<code>yes</code>": ページをローカライズする際に翻訳すべきであることを示します。</li> + <li>"<code>no</code>": 要素を翻訳してはならないことを示します。</li> +</ul> + +<p>すべてのブラウザーがこの属性を認識しているわけではありませんが、 Google 翻訳のような自動翻訳システムがこれを尊重しており、人間の翻訳者によって使用されるツールによっても尊重される可能性があります。そのため、ウェブ制作者がこの属性を使用して、翻訳されるべきではないコンテンツをマークすることが重要です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では <code>translate</code> 属性を使用して、翻訳ツールにフッターの企業ブランド名を翻訳しないように依頼しています。</p> + +<pre class="notranslate"><footer> + <small>© 2020 <span translate="no">BrandName</span></small> +</footer></pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更な。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.translate")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li>{{domxref("HTMLElement.translate")}} プロパティは、この属性を反映します。</li> + <li><a href="https://www.w3.org/International/questions/qa-translate-flag">Using HTML's translate attribute</a>.</li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div> + +<p><code><a href="https://docs.microsoft.com/en-us/previous-versions/dn337007(v%3Dvs.85)">x-ms-format-detection</a></code> 属性は、電話番号の様な要素のテキスト内データ形式が自動的にフォロー可能なリンクに変換されるかどうかを決定します。</p> + +<p><code>tel:</code> スキームのリンクなど既存のリンクは影響を受けません。</p> + +<div class="blockIndicator note"> +<p>format detectionによって作成されたリンクはDOMに表示されません。</p> +</div> + +<p>{{Non-standard_inline}} この独自プロパティは Internet Explorer と Microsoft Edge に固有です。</p> + +<h2 id="構文">構文</h2> + +<pre class="brush: html notranslate"><html x-ms-format-detection="none"> +</pre> + +<h2 id="Value" name="Value">値</h2> + +<dl> + <dt><code>all</code></dt> + <dd>サポートされているすべてのデータ形式が検出されます。</dd> + <dt><code>none</code></dt> + <dd>Format detection はオフになっています。</dd> + <dt><code>phone</code></dt> + <dd>電話番号パターンは自動的にリンクされます。</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Microsoft_API_extensions">Microsoft API 拡張</a></li> + <li><a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">Safari Supported Meta Tags</a></li> +</ul> |