From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/meta/index.html | 475 +++++++++++++++++++++++++ files/ja/web/html/element/meta/name/index.html | 312 ++++++++++++++++ 2 files changed, 787 insertions(+) create mode 100644 files/ja/web/html/element/meta/index.html create mode 100644 files/ja/web/html/element/meta/name/index.html (limited to 'files/ja/web/html/element/meta') diff --git a/files/ja/web/html/element/meta/index.html b/files/ja/web/html/element/meta/index.html new file mode 100644 index 0000000000..667a3eb42b --- /dev/null +++ b/files/ja/web/html/element/meta/index.html @@ -0,0 +1,475 @@ +--- +title: ': 文書レベルメタデータ要素' +slug: Web/HTML/Element/meta +tags: + - HTML + - HTML マイクロデータ + - HTML 文書メタデータ + - 'HTML:フローコンテンツ' + - 'HTML:メタデータコンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - ウェブ + - メタデータ + - リファレンス + - 文書 + - 要素 +translation_of: Web/HTML/Element/meta +--- +
{{HTMLRef}}
+ +

HTML の <meta> 要素は、他のメタ関連要素 ({{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}) で表すことができない任意の{{Glossary("Metadata","メタデータ")}}を提示します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリメタデータコンテンツ。 {{htmlattrxref("itemprop")}} 属性がある場合はフローコンテンツおよび記述コンテンツ。
許可されている内容なし。これは{{Glossary("empty element", "空要素")}}です。
タグの省略空要素であるため開始タグは必須であり、終了タグは置いてはいけません。
許可されている親要素<meta charset> および <meta http-equiv>: {{HTMLElement("head")}} 要素。{{htmlattrxref("http-equiv", "meta")}} がエンコーディング宣言ではない場合は、{{HTMLElement("head")}} 要素内にある {{HTMLElement("noscript")}} 要素の内部にも配置できます。
許可されている ARIA ロールなし
DOM インターフェイス{{domxref("HTMLMetaElement")}}
+ +

属性

+ +

この要素はグローバル属性を持ちます。

+ +
+

メモ: {{htmlattrxref("name", "meta")}} 属性は {{HTMLElement("meta")}} 要素において特別な意味を持ちます。また、 {{htmlattrxref("itemprop")}} 属性は、 <meta> 要素にすでに {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}}, {{htmlattrxref("charset", "meta")}} のいずれかがある場合は設定してはいけません。

+
+ +
+
{{htmlattrdef("charset")}}
+
この属性は、ページで使用している文字エンコーディングを宣言します。この属性は 文字エンコーディングの標準 IANA MIME name のひとつであることが必要です。標準仕様では特定の文字エンコーディングを要求していませんが、以下の推奨事項があります。 +
    +
  • UTF-8 を使うことを強く推奨します。
    • +
  • セキュリティ上のリスクを防ぐために、 ASCII との互換性がないエンコーディングを使用するべきではありません。その様な文字コードに対応していないブラウザーでは、有害なコンテンツを HTML として解釈する可能性があります。該当するものは、 JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, ISO-2022 ファミリー, EBCDIC ファミリーなどです
    • +
+ +
+

メモ: ASCII と互換性がないエンコーディングとは、8ビットのコードポイント 0x20 から 0x7E が Unicode のコードポイント 0x0020 から 0x007E に対応していないエンコーディングです。

+
+ +
+
    +
  • CESU-8, UTF-7, BOCU-1, SCSU を使用してはいけません。これらのエンコーディングでクロスサイトスクリプティング攻撃が実証されています。
    • +
  • UTF-32 を使用すべきではありません。これは、 HTML5 のエンコーディングアルゴリズムで UTF-16 と区別できないものがあるからです。
    • +
+
+ +
メモ: + +
    +
  • 文字化けやセキュリティホールの発生を避けるため、宣言した文字エンコーディングはページを保存した文字エンコーディングと一致しなければなりません。
    • +
  • エンコーディングを宣言する {{HTMLElement("meta")}} 要素は {{HTMLElement("head")}} 要素の内部かつ HTML の始めから 1024 バイト以内に配置しなければなりません。これは、ページの文字集合を選択するまでに始めの部分しか確認しないブラウザーがあるためです。
    • +
  • この {{HTMLElement("meta")}} 要素はブラウザーが提供する、ページの ページの文字セットを判断するアルゴリズム の一部でしかありません。特に、HTTP の {{HTTPHeader("Content-Type")}} ヘッダーや{{Glossary("Byte-Order Mark","バイトオーダーマーク")}}はこの要素より優先します。
    • +
  • この属性を使用して文字エンコーディングを定義することを強く推奨します。ページで文字エンコーディングを定義しない場合は UTF-7 fallback cross-scripting technique のような、ページの利用者を攻撃するクロスサイトスクリプティング手法が実現する可能性があります。
    • +
  • charset 属性を持つ {{HTMLElement("meta")}} 要素は、 HTML5 より前の <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset"> (IANAcharset は、同様の {{htmlattrxref("charset", "meta")}} 属性の値に対応します) と同義です。この構文はまだ許容されていますが、今後は推奨されません。
    • +
+
+
+
{{htmlattrdef("content")}}
+
この属性は状況に応じて、{{htmlattrxref("http-equiv", "meta")}} 属性または {{htmlattrxref("name", "meta")}} 属性に関連付けられた値を持ちます。
+
{{htmlattrdef("http-equiv")}}
+
プラグマディレクティブを定義します。属性名が http-equiv(alent) なのは、利用できる値のすべてが特定の HTTP ヘッダーの名前だからです。 +
    +
  • content-language {{obsolete_inline}}
    + ページの既定の言語を定義します。これはすべての要素の lang 属性に置き換えられました。 +
    +

    警告: この値は廃止されたため、使用しないでください。 {{HTMLElement("html")}} 要素で lang 属性を使用することを推奨します。

    +
    +
    • +
  • content-security-policy
    + この値により、ページ作者がページのコンテンツポリシーを定義できます。いくつかの例外を除き、ポリシーはサーバーオリジンやスクリプトのエンドポイントの指定に関与します。これは、クロスサイトスクリプティング攻撃の対策になります。
    • +
  • content-type {{obsolete_inline}}
    + 文書の MIME type を定義するもので、後に文字エンコーディングの定義が続きます。これは HTTP の content-type エンティティヘッダーフィールドと同じ構文に従いますが、 HTML ページ内にあるため text/html を除くほとんどの値は使用できません。従って、この content として有効な構文は文字列 'text/html' に、 '; charset=IANAcharset という構文による文字集合を続けたものになります。 IANAcharset は、IANA で定義 されている文字集合の preferred MIME name です。 +
    +

    警告: この値は廃止されたので使用しないでください。 {{HTMLElement("meta")}} 要素の {{htmlattrxref("charset", "meta")}} 属性を使用してください。

    +
    + +
    +

    メモ: XHTML や HTML5 の XHTML シリアライズにおいて、 {{HTMLElement("meta")}} は文書の型を変更できないので、 <meta> の MIME 型に XHTML の MIME 型を設定しないでください。

    +
    +
    • +
  • refresh
    + これは以下の指示をします。 +
      +
    • {{htmlattrxref("content", "meta")}} 属性に正の整数が1つだけ含まれている場合は、ページを再読み込みするまでの秒数。
      • +
    • {{htmlattrxref("content", "meta")}} 属性に正の整数と、その後に文字列 ';url=' と有効な URL がある場合は、別のページにリダイレクトするまでの秒数。
      • +
    +
    • +
  • set-cookie {{non-standard_inline}} {{obsolete_inline}}
    + ページの Cookie を定義します。属性の値は IETF の HTTP Cookie 仕様書で定義している構文に従わなければなりません。 +
    +

    警告: この方法は廃止されたため、使用しないでください。代わりに HTTP ヘッダーの {{HTTPHeader("Set-Cookie")}} を使用してください。すでに標準から削除され、すでに Firefox 68 および Chrome 65 のどちらも対応していません。

    +
    +
    • +
+
+
{{htmlattrdef("name")}}
+
+

この属性は、文書レベルのメタデータの名前を定義します。 {{htmlattrxref("itemprop")}}, {{htmlattrxref("http-equiv", "meta")}}, {{htmlattrxref("charset", "meta")}} 属性のいずれかが設定されている場合は設定するべきではありません。

+ +

このメタデータの名前は、 {{htmlattrxref("content", "meta")}} 属性が持つ値と関連づけられます。 name 属性で使用できる値には以下のものがあります。

+ +
    +
  • application-name は、ウェブページで実行するアプリケーションの名前を定義します。 + +
    メモ: + +
      +
    • ブラウザーは、これをアプリケーションの識別に使用することがあります。これは {{HTMLElement("title")}} 要素とは異なります。title 要素もアプリケーション名を持ちますが、文書の名前や状態といった特別な情報も含むことがあります。
      • +
    • 単純なウェブページで application-name を定義するべきではありません。
      • +
    +
    +
    • +
  • author は、文書の作者名を定義します。
    • +
  • description は、ページのコンテンツに関する簡潔で正確な概要を保持します。 Firefox や Opera など一部のブラウザーは、ページをブックマークに追加した際の既定の説明文として使用します。
    • +
  • generator は、ページを生成したソフトウェアの識別名を定義します。
    • +
  • keywords は、ページのコンテンツに関連する単語をカンマ区切りの文字列で保持します。
    • +
  • referrer {{experimental_inline}} は、この文書からリクエストを送信する場合に HTTP の {{HTTPHeader("Referer")}} ヘッダーへ付加する内容を制御します。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    <meta name="referrer"> の content 属性の値
    no-referrerHTTP の Referer ヘッダーを送信しません。
    origin文書のオリジンを送信します。
    no-referrer-when-downgrade現在のページと同等の安全性の URL (https→https) にはリファラーとしてオリジンを送信しますが、安全性が低い URL (https→http) には送信しません。これは既定の動作です。
    origin-when-crossorigin同一オリジンへのリクエストでは URL 全体（引数を除く）を送信しますが、他の場合はオリジンのみ送信します。
    same-origin同一オリジンにはリファラーを送信しますが、オリジン間リクエストにはリファラー情報を含めません。
    strict-origin安全性が同等とみられる宛先 (HTTPS->HTTPS) に対しては、リファラーとして文書のオリジンのみを送信しますが、安全性が劣る宛先 (HTTPS->HTTP) には送信しません。
    strict-origin-when-cross-origin文書と同一のオリジンへのリクエストを行う際には完全な URL を送信し、安全性が同等とみられる宛先 (HTTPS->HTTPS) に対しては、リファラーとして文書のオリジンのみを送信し、安全性が劣る宛先 (HTTPS->HTTP) にはヘッダーを送信しません。
    unsafe-URL同一オリジンおよびオリジン間のリクエストで URL 全体 (パラメーターは除く) を送信します。
    + +
    +

    メモ:

    + +
      +
    • ブラウザーによっては、 referrer に非推奨の値である always, default, never に対応していることがあります。
      • +
    • (document.write や appendChild により) 動的に <meta name="referrer"> を挿入すると、リファラーを送信するかの決定権を持たないものになります。
      • +
    • 競合するポリシーをいくつか定義すると、No-referrer ポリシーが適用されます。
      • +
    +
    +
    • +
  • theme-color はページや周囲のユーザーインターフェイスの表示をカスタマイズするために、ユーザーエージェントが使用する推奨される色を示します。 content 属性は有効な CSS の <color> が入ります。
    • +
  • color-scheme: +

    文書が互換性を持つ1つ以上の色系統を指定します。ブラウザーはこの情報をユーザーのブラウザーや端末の設定と組み合わせて、背景・前景からフォームコントロールやスクロールバーまですべての色を作成するために使用します。 <meta name="color-scheme"> の主な使用法としては、明色モードや暖色モードの互換性と優先順位を示すというものがあります。

    + +

    color-scheme の {{htmlattrxref("content", "meta")}} プロパティの値は以下のうちの一つになります。

    + +
    +
    normal
    +
    文書が色系統を意識しておらず、単に既定のカラーパレットを使用して描画されます。
    +
    [light | dark]+
    +
    文書が対応している1つ以上の色系統です。同じ色系統を2回以上指定した場合は、1回だけ指定した場合と同じ効果になります。複数の色系統を指定すると、最初の色系統が文書で推奨されますが、ユーザーの好みによって2つ目の色系統を使用することができます。
    +
    only light
    +
    この文書が明色モード、つまり明色の背景色に暗色の前景色の組み合わせのみに対応していることを示します。仕様書によれば、 only dark は暗色モードに対応していない文書に強制すると、内容が読めなくなる可能性があるので有効ではありません。主要なブラウザーはすべて、設定がない限りは明色モードです。
    +
    + +

    例えば、文書で暗色モードを推奨しているが、明色モードでも機能する場合は次のようにします。

    + + 
    <meta name="color-scheme" content="dark light">
    + +

    これは CSS の {{cssxref("color-scheme")}} プロパティでそれぞれの要素に推奨または受付可能な色系統を指定するのと同じ方法で文書レベルに動作します。スタイルを現在の色系統に合わせるには、 CSS メディア特性の {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} を使用します。

    +
    • +
+ +

この属性では、 WHATWG Wiki の MetaExtensions ページで定義されている拡張リストの値も使用できます。まだ正式には承諾されていませんが、一般的に使用される名前があります。

+ +
    +
  • creator は、文書の制作者を定義します。これは組織名にできることに注意してください。複数の制作者がいる場合は、 {{HTMLElement("meta")}} 要素を複数使用すべきです。
    • +
  • googlebot は robots と同義ですが、 Google のインデックス作成クローラーである Googlebot だけが従います。
    • +
  • publisher は、文書の発行者の名前を定義します。
    • +
  • robots は、協力的なクローラーあるいは "robot" がページ上で行うべき動作を定義します。これは、以下のリストにある値をコンマ区切りで並べます: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    <meta name="robots"> の content の値
    値説明使用対象
    indexrobot にページのインデックス作成を許可する (既定値)すべて
    noindexページのインデック作成を行わないことを robot に要求するすべて
    followrobot がページ上のリンクをたどることを許可する (既定値)すべて
    nofollowページ上のリンクをたどらないことを robot に要求するすべて
    nonenoindex, nofollow と同義Google
    noodpOpen Directory Project に説明文がある場合、検索結果のページでその説明文をサイトの説明として使用しないようにする +

    Google, Yahoo, Bing

    +
    noarchiveページのコンテンツをキャッシュしないことを検索エンジンに要求する。Google, Yahoo, Bing
    nosnippet検索結果のページでページの説明を表示しないようにする。Google, Bing
    noimageindexインデックス登録された画像の参照元としてページを表示しないように要求するGoogle
    nocachenoarchive と同義Bing
    + +
    メモ: + +
      +
    • 協力的なロボットしかこれらの規則には従いません。電子メールを収集するようなものを寄せつけないようにするとは考えないでください。
      • +
    • これらの規則を読み取るため、ロボットがページにアクセスする必要があります。ネットワーク帯域の消費を抑えたい場合は、 {{Glossary("robots.txt")}} ファイルを使用してください。
      • +
    • インデックスからページを削除したい場合は、meta を noindex に変更すれば実現できますが、robot が再びページを訪れたときになります。robots.txt ファイルが再訪問を妨げないようにしてください。一部の検索エンジンは、ページを早急に削除するための開発者ツールを用意しています。
      • +
    • index と noindex、または follow と nofollow など、互いに排他的な値があります。同時使用した場合の robot の動作は未定義であり、robot により大きく異なるかもしれません。
      • +
    • Google、Yahoo、Bing など一部の検索エンジンのクローラー robot は、 HTTP の X-Robots-Tag ヘッダーで同じ値をサポートしています。これにより、画像など HTML 文書以外でも規則を使用できます。
      • +
    +
    +
    • +
  • slurp は robots と同義ですが、 Yahoo 検索のクローラーである Slurp のみが従います。
    • +
  • viewport は、{{glossary("viewport", "ビューポート")}}の初期サイズに関する助言を与えます。モバイル端末のみで使用されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    <meta name="viewport"> の content の値
    値設定可能な値説明
    width正の整数または文字列 device-widthウェブサイトを描画したいビューポートの幅をピクセル数で定義します。
    height正の整数またはテキスト device-heightビューポートの高さを定義します。どのブラウザーでも使用されていません。
    initial-scale0.0 から 10.0 までの、正の数値デバイスの幅 (ポートレートモードでの device-width またはランドスケープモードでの device-height) とビューポートの寸法との比率を定義します。
    maximum-scale0.0 から 10.0 までの、正の数値ズームの最大値を定義します。この値は minimum-scale と同じまたはより大きくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。
    minimum-scale0.0 から 10.0 までの、正の数値ズームの最小値を定義します。この値は maximum-scale と同じまたはより小さくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。
    user-scalableyes または nono を設定すると、ユーザーはページのズームができなくなります。既定値は yes です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。
    + + + + + + + + + + + + + + + + +
    仕様書状態備考
    {{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}{{Spec2('CSS3 Device')}}Viewport META 要素について、非規範的な説明を掲載
    + +
    {{cssxref("@viewport")}} もご覧ください。
    + +
    メモ: + +
      +
    • この属性は標準化されていませんが、事実上優勢であるためほとんどのモバイルブラウザーで使用されています。
      • +
    • 既定値は端末やブラウザーにより異なる可能性があります。
      • +
    • モバイル版 Firefox におけるこの宣言について詳しく知るには、こちらの記事をご覧ください。
      • +
    +
    +
    • +
+
+
{{htmlattrdef("scheme")}} {{obsolete_inline}}
+
この属性は、メタデータを説明するスキーマを定義します。スキーマは、フォーマットなど {{htmlattrxref("content", "meta")}} の値を正しく解釈するように導くコンテキストです。 +
+

メモ: この属性は廃止されたため使用しないでください。実際の使用例がなかったため、代替策はありません。

+
+
+
+ +

メモ

+ +

属性の組み合わせに応じて、メタデータの種類は以下のいずれかになります。

+ + + +

例

+ +
<meta charset="utf-8">
+
+<!-- 3秒後にページをリダイレクト -->
+<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
+
+ +

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

+ +

コンテンツの更新

+ +

refresh の値が設定されたページには、時間が短すぎるというリスクがあります。読み上げソフトのような支援技術を使用して操作している人は、全文を読むことができず、自動的にリダイレクトされる前のページの内容を理解できない可能性があります。いきなりで予告なしのページコンテンツの更新は、弱視の人々を惑わせる可能性もあります。

+ + + +

ビューポートの拡大縮小

+ +

user-scalable の値を no に設定してズーム機能を無効にすると、弱視の人々がページのコンテンツを読んだり理解したりすることを妨げます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '<meta name="referrer">')}}{{Spec2('Referrer Policy')}}<meta name="referrer"> の値やセマンティクスを定義
{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}{{Spec2('HTML WHATWG')}}itemprop 属性を追加
{{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '<meta>')}}{{Spec2('HTML5 W3C')}}charset 属性を追加
{{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '<meta>')}}{{Spec2('HTML4.01')}}
+ +

ブラウザーの互換性

+ +

以下の情報は MDN の Github (https://github.com/mdn/browser-compat-data) から取得したものです。

+ + + +
{{Compat("html.elements.meta")}}
+ +

関連情報

+ + diff --git a/files/ja/web/html/element/meta/name/index.html b/files/ja/web/html/element/meta/name/index.html new file mode 100644 index 0000000000..ba8b717ea7 --- /dev/null +++ b/files/ja/web/html/element/meta/name/index.html @@ -0,0 +1,312 @@ +--- +title: 標準メタデータ名 +slug: Web/HTML/Element/meta/name +tags: + - Attribute + - HTML + - HTML document metadata + - Reference + - metadata +translation_of: Web/HTML/Element/meta/name +--- +
{{HTMLRef}}
+ +

{{htmlelement("meta")}} 要素を使用して、文書のメタデータを名前と値の組み合わせで提供することができ、 {{htmlattrxref("name", "meta")}} 属性はメタデータ名を指定し、 {{htmlattrxref("content", "meta")}} 属性は値を指定します。

+ +

HTML 仕様書で定義されている標準メタデータ名

+ +

HTML 仕様書は、以下の一連の標準メタデータ名を定義しています。

+ + + +

他の仕様書で定義されている標準メタデータ名

+ +

The CSS Color Adjustment specification defines the following metadata name:

+ + + +

The CSS Device Adaptation specification defines the following metadata name:

+ + + +

その他のメタデータ名

+ +

The WHATWG Wiki MetaExtensions page contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書
{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}
{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}
{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}
{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.meta.name")}}

-- cgit v1.2.3-54-g00ecf