まぬねこの足跡。。。

備忘録＋たのしさ＋ひっそりと

トップ > HTML > <meta>タグ：メタデータ要素

<meta>タグ：メタデータ要素

HTML

概要

・メタデータを表す。

・下記以外のメタデータ要素で表現できないもの

　　base、link、script、style、title要素

属性の解説

charset属性：文書の文字エンコーディングを指定

＜meta charset="UTF-8"(文字エンコード)＞

※実際に文章に使われているエンコーディングと同一にする：文字化け防止。

※HTML Living Standarでは、「UTF-8」を指定。

※title要素（日本語使用）より前に記述。１つの文書に１つのみ。

http-equiv属性(default-style)＋content属性：デフォルトスタイルの指定

※プラグマディレクティブを定義

＜meta http-equiv="default-style"(デフォルトスタイル) content="main-style"(設定したスタイル名)＞

※指定できる場所：head要素の子要素または、head要素内noscript要素内

※スタイルシートを用意し、link又はstyle要素で設定しておくこと。

使い方：style要素を使ったとき

書き方：「main-style」をデフォルトスタイルに指定
<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta http-equiv="default-style" content="main-style">・・・「main-style」をデフォルトスタイルに設定
        <title>デフォルトスタイルセット</title>
        <style title="main-style">・・・・・styel要素で、titleを「main-style」を設定
            h4 { color: red; }
        </style>
        <style title="sub-style">・・・・・styel要素で、titleを「sub-style」を設定
            h4 { color: green; }
        </style>
    </head>
    <body>
        <h4>何色でしょう</h4>
    </body>
</html>
表示イメージ

何色でしょう

使い方：link要素を使ったとき

書き方：「main-style」をデフォルトスタイルに指定

◆index.html

<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta http-equiv="default-style" content="main-style">・・・「main-style」をデフォルトスタイルに設定
        <link rel="stylesheet" href="styleA.css">・・・・・・・・・・・・・・line要素で，通常のスタイルシートを設定
        <link rel="stylesheet" href="styleB.css" title="main-style">・・・・・・line要素で、titleを「main-style」を設定
        <link rel="stylesheet alternate" href="styleC.css" title="sub-style">・・line要素で、titleを「main-style」を設定
        <title>デフォルトスタイルセット</title>
    </head>
    <body>
        <h4>何色でしょう</h4>
    </body>
</html>

◆styleA.css

h4 { color: orange; }

◆styleB.css

h4 { color: red; }

◆styleC.css

h4 { color: green; }
表示イメージ

何色でしょう

使い方：link要素をnoscript要素内で使ったとき・・・非対応スクリプトブラウザのとき

書き方：「main-style」をデフォルトスタイルに指定
<!DOCTYPE html>
    <html lang="ja">
    <head>
        <noscript>
            <meta http-equiv="default-style" content="noscript-style">・・・「noscript-style」をデフォルトスタイルに設定
        </noscript>
        <link rel="stylesheet" href="styleA.css">・・・・・・・・・・・・・・line要素で，通常のスタイルシートを設定
        <link rel="stylesheet" href="styleB.css" title="noscript-style">・・・・・・line要素で、titleを「noscript-style」を設定
        <link rel="stylesheet alternate" href="styleC.css" title="sub-style">・・line要素で、titleを「sub-style」を設定
        <title>デフォルトスタイルセット</title>
    </head>
    <body>
        <h4>何色でしょう</h4>
    </body>
</html>

◆styleA.css

h4 { color: orange; }

◆styleB.css

h4 { color: red; }

◆styleC.css

h4 { color: green; }
表示イメージ

何色でしょう

http-equiv属性(refresh)＋content属性（＋url属性）：文章の再読込み、（別文章の読込み）

※プラグマディレクティブを定義

＜meta http-equiv="refresh"(再読込み) content="300"(再読込みまでの秒数)＞

＜meta http-equiv="refresh"(再読込み) content="300; (再読込みまでの秒数)　URL=https://ww(別文章URL)w,XXXXX.com/"＞

※指定できる場所：head要素の子要素または、head要素内noscript要素内

書き方：５分後に再読み込み
<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta http-equiv="refresh" content="300">・・・5分（300秒）後設定
        <title>再読込み</title>
    </head>
    <body>
        <h1>５分後に再読込み</h1>
    </body>
</html>
書き方：別文章を５分後に再読み込み
<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta http-equiv="refresh" content="300"; URL=https://www.XXXX.com/">・・・5分（300秒）後、別文書URL設定
        <title>再読込み</title>
    </head>
    <body>
        <h1>５分後に別文章を再読込み</h1>
    </body>
</html>

http-equiv属性(content-security-policy)＋content属性
　：コンテンツセキュリティポリシー（CSP）の指定

※プラグマディレクティブを定義

＜meta http-equiv="content-security-policy"(コンテンツセキュリティポリシー(CSP)) content="defa(CSP値)ult-src 'self'"＞

※指定できる場所：head要素の子要素または、head要素内noscript要素内

※CSP値：「CSP名」と「１つ以上の値」で構成

　　例１(CSP名と値)：”default-src 'self' ”・・・半角スペースで区切る

　　例２(値が１つ以上)：”default-src 'self'” ; https://www,XXXX,com; XXX.net" ・・・セミコロ(「；」)ンで区切る

ちょこっとメモ

コンテンツセキュリティポリシー（CSP）

・クロスサイトスクリプティング (Cross-site_scripting) やデータインジェクション攻撃などの攻撃を検知し、影響を軽減

・Content-Security-Policy HTTPヘッダーでも指定可能。

コンテンツセキュリティポリシー（CSP）命令

フェッチ命令：特定のリソース種別を読み込むことができる場所を制御
CSP名 対象
child-src Webワーカーと、iframe要素（frame要素）などの入れ子の閲覧コンテキスト用ソース
※複合コンテンツ・ワーカの時、frame-src、worker-srcを使用
connect-src スクリプトインターフェイスを使用して読込まれるURL
default-src 代替フェッチ命令のデフォルト値：CSPヘッダーに命令がない時、デフォルトになる
font-src @font-faceで読み込まれるフォント用ソース
frame-src iframe要素（frame要素）などの入れ子の閲覧コンテキスト用ソース
img-src 画像やファビコン用のソース
manifest-src アプリケーションマニフェスト用ソース
media-src メディア（video、audio、track要素）用ソース
object-src プラグインコンテンツ（object、embed、applet要素）のソース
※古いHTML要素の制限用、標準化済み新HTML要素が利用不可
よって推奨。例：object-src 'none'
script-src 全JavaScript用ソース
style-src 全スタイルシートのソース

ちょこっとメモ

ウェブワーカー (Web Worker)

バックグラウンドでの実行を可能にする仕組み

文書命令：文書またはワーカー環境のプロパティ管理
CSP名 対象
base-uri base要素に指定されるURL
sandbox iframe要素＋sandbox属性と類似リソースにサンドボックスを有効
ナビゲーション命令：ユーザが移動する場所やフォームを送信する場所を管理
CSP名 対象
form-action フォームの送信先となるURL
frame-ancestors iframe、object、embed、applet要素の親URL
その他の命令
CSP名 対象
upgrade-insecure-requests 「HTTP」URLを「HTTPS」として扱う
※「HTTP」URLが大量にあるWebサイト用

コンテンツセキュリティポリシー（CSP）の値

キーワード値
値 内容
none 全リソース読込み不可
salf 現オリジンからのみリソース読込みOK
unsafeキーワード値
値 内容
unsafe-inline インラインリソースの使用OK
unsafe-eval eval のような動的コード評価OK
ホストキーワード値
値 内容
Host 指定ホストからの読込みOK
※オプションでスキーム、ポート番号、パス指定OK
例：https://*.XXX.com:12/path/to/file.js
Scheme: 特定のスキームによるリソースの読込みのみOK
終端は「：」
例：https:、http:、data:
その他の値
値 内容
nonce-* スクリプト許可用ノンス
※script要素+nonce属性と組合わせて使用
sha*-* sha256、sha384、sha512
※その後、ダッシュと「sha*」
例：sha256-jzgBGA4UWFFmpOBq0JpdsySukE1FrEN5bUpoK8Z29fY=

ちょこっとメモ

ノンス：nonce

暗号通信で用いられる、使い捨てのランダムな値

http-equiv属性(x-ua-compatible)＋content属性(IE=edge)
　：Internet Explorer（IE）への互換性モードを指定

＜meta http-equiv="x-ua-compatible"content="IE=edge'"＞

name属性＋content属性：文書のメタデータを「メタデータ名」と「値」をペアで設定

＜meta name="auth(メタデータ名)or" content="ドキュメント作者名"(値)＞

標準メタデータ名一覧

メタデータ名 値
application-name アプリケーション名
※アプリケーション識別時、追加で文書名、状態など含む
※単なるWebサイトには定義しない
author 文書の著者名
description ページの内容を短く正確に要約したもの
※Firefox や Opera などブラウザは、ブックマークページの既定の説明として使用
generator ページを生成したソフトウェア識別子
keywords ページのコンテンツに関連する語句
※カンマ区切りで複数OK
referrer この文書からリクエストを送信するための HTTP の Referer ヘッダーの内容
※document.write() または appendChild() で挿入すると、リファラーの動作が予測不能
※相反する複数のポリシーが定義時、no-referrer適用
no-referrer リファラーを送信しない
origin リファラーのオリジン情報のみを送信
no-referrer-when-downgrade HTTP(S)からHTTPSへ リファラーとしてURL全体を送信
HTTPSからHTTPへ 送信しない
origin-when-cross-origin 同一のオリジン間 リファラー全体を送信
異なるオリジン間 リファラーのオリジン情報のみを送信
same-origin 同一のオリジン間 全リファラー送信
異なるオリジン間 リファラー送信しない
strict-origin-when-cross-origin https から http へ 送信しない（既定値）
同一のオリジン間 リファラー全体を送信
異なるオリジン間 リファラーのオリジン情報のみを送信
unsafe-url リファラー全体を送信する（安全ではない）
theme-color ページの表示や周辺のユーザーインターフェースをカスタマイズするための推奨色
color-scheme 1 つ以上のカラースキーム
※ライトモードとダークモードの互換性と優先順位を示す
normal 既定のカラーパレット
[light | dark]+ １つ以上の配色、同配色を２回以上指定と同一効果
※複数配色指定時、最初が優先、ユーザ希望時、２番目でもOK
only light ライトモードにのみ対応
※背景色：明るい、前景色：暗い　（主要ブラウザのデフォルト）

他メタデータ名一覧

※CSS Device Adaptation 仕様書にて　非標準、主要モバイルブラウザ採用。

　　　 　　　 　　　
メタデータ名 値
viewport ビューポートの初期の寸法の大きさについてのヒントを指定（モバイル端末用）
width 正の整数値、または device-width のテキスト ピクセル単位の幅を定義
initial-scale 0.0 と 10.0 の間の正の実数 端末の幅 (縦長画面で device-width、横長画面で device-height) とビューポートの寸法の比率を定義
maximum-scale 0.0 と 10.0 の間の正の実数 拡大縮小インする最大値。minimum-scale 以上の値
ブラウザー（iOS 10 以降）の設定で無視可能。
minimum-scale 0.0 と 10.0 の間の正の実数 拡大縮小インする最小値。maximum-scale 以下の値
ブラウザー（iOS 10 以降）の設定で無視可能。
user-scalable yes または no no：ページの拡大縮小ができない。
（デフォルト：yes）
ブラウザー（iOS 10 以降）の設定で無視可能。
viewport-fit auto：Webページ全体表示
contain：ディスプレイに内接する最大長方形によって拡大
cover：ディスプレイいっぱいになるように縮小
※ safe-area-inset-* 変数：重要コンテンツはみだし防止に必須

使い方

書き方

<!DOCTYPE html>･･･「HTMLで記述」を宣言。
<html lang="ja">･･･DOCTYPE宣言の次　使用言語：日本語（ja）
  <head>・・・・・・・＜html＞タグの次
    <meta charset="UTF-8">･･･使用文字コード
    <meta http-equiv="X-UA-Compatible" content="IE=edge">･･･IE互換
    <meta name="viewport" content="width=device-width, initial-scale=1.0">･･･モバイル端ビューポート指定
    <meta name="description" content="この文章の説明">･･･ページ説明
    <title>タイトル</title>･･･ページタイトル
  </head>
    <body>･･･ページ本編

    </body>
</html>

参考

【MDNMDN Web Docs】<meta>タグ：メタデータ要素

【MDNMDN Web Docs】<Content-Security-Policy>タグ：コンテンツセキュリティポリシー（CSP）