[45-4] meta要素の http-equiv属性で動作を指示しよう

最終更新日:2017年12月08日  (初回投稿日:2012年10月18日)

<meta>要素の「http-equiv属性」を使って、ブラウザの動作を指定できます。
必ず「content属性」と一緒に使います。

「http-equiv」の読み方は、「エイチティーティーピー イクイヴ」。
「http」は当然「hypertext transfer protocol」のこと。「equiv」は「equivalent」の略です。equivalent は「相当の・同義の」といった意味。
サーバ側の HTTPヘッダーでやるのと同じことができるって意味でしょうね。

使用する要素 <meta>
使用する属性 http-equiv属性 content属性 url属性

<meta>要素は内容が多いため 記事を数回に分けています。

[45-1] meta要素で基本情報を指定しよう
<meta>要素のルールと、属性のルール
[45-2] meta要素の charset属性で文字コードを指定しよう
charset属性で文字エンコードを指定します。
[45-3] meta要素の name属性でサイトの情報を指定しよう
name属性でサイトの説明文、クローラーへの指示、ビューポートの指定などをします。
[45-4] meta要素の http-equiv属性で動作を指示しよう ←今日はココ
http-equiv属性でページのリダイレクトを指定できます。
[45-5] meta要素で OGPを設定しよう
Facebook などの SNSでシェアされたときの「サムネイル画像や説明文などのセット」を表示させます。
本日のINDEX
  1. <meta>要素の「http-equiv属性」のルール
  2. <meta>要素の「http-equiv属性」の「キーワード」
    1. ページ情報(著者名・説明文など)
    2. クローラー(検索エンジンの検索ロボットの挙動)
    3. viewport(レスポンシブ対応の指定)
    4. その他(電話番号の自動リンク無効・テーマカラー)

参考:
The meta element - HTML 5.1 2nd Edition | W3C Recommendation
The meta element - HTML Living Standard | WHATWG
meta 要素 - HTML | MDN

<meta>要素の「http-equiv属性」のルール

<meta>要素は「http-equiv属性」が指定されると プラグマ指示子(pragma directive)となります。
プラグマ指示子とは、ブラウザに対して HTML文書の「状態・動作」を指示するもの。
通常ウェブサーバー(側のプログラム HTTPヘッダー)が担当している「どのようにウェブページを提供するか」についての情報を、HTML上で指定することができるんだそうです。

<meta http-equiv="種類(キーワード)" content="内容">というカタチで、必ず「content属性」とペアで使います。
「http-equiv属性」で プラグマ指示子の種類(キーワード)を指定。
その内容を「content属性」で指定するというわけです。

そして必ず <head>内に書きます。

<meta>要素の「http-equiv属性」の「キーワード」

「http-equiv属性」の「キーワード」も、条件付きですが、WHATWG Wiki PragmaExtensions ページで登録することができるそうです。

WHATWGの仕様書に載っている「キーワード」を一覧にしておきます。

refresh(時限リダイレクト)

「http-equiv="refresh"」で時限リダイレクトとして動作します。
下のサンプルは、このページが 5分おきに自動的にサーバーからリロードされるようにしています。

<meta http-equiv="refresh" content="300">

下のサンプルは、20秒おきに次のページへリフレッシュさせています。「url属性」を使ってジャンプするページのURLを指定します。自動スライドショーのように使えるそうです。

<meta http-equiv="refresh" content="20; url=◯◯◯.html">

default-style(デフォルトスタイル)

これは、外部CSSのデフォルトスタイルを<link>要素の「title属性」以外でも指定する方法です。
<link>要素の「title属性」で使った「セット名」でデフォルトCSSを指定します。

<meta http-equiv="default-style" content="default">
<link rel="stylesheet" href="default.css" title="default">
<link rel="stylesheet" href="2nd.css" title="2nd">
<link rel="stylesheet" href="3rd.css" title="3rd">

CSSファイル名でも指定できます。

<meta http-equiv="default-style" content="default.css">
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="2nd.css" title="2nd">
<link rel="stylesheet" href="3rd.css" title="3rd">

content-type(文字エンコーディング)

HTML5での文字エンコーディングの指定は <meta>要素の「charset属性」を使います。この「http-equiv属性」を使う方法は、その代替でしかありません。
「charset属性」の文字エンコーディング指定と一緒に使ってはいけません(どっちか1つ)。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Content-Security-Policy(コンテンツ セキュリティ ポリシー)

クロスサイト スクリプティング攻撃の対策のため、コンテンツ セキュリティ ポリシーを適用します。

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">

X-UA-Compatible(IE のレンダリング方式を 標準モードに)

IEの互換表示設定の指示です。「content属性」の値を「IE=Edge」とすることで、IE がそのバージョンの標準モードでレンダリングするよう促します。
CSSを読み込んでいる <link>要素、Javascriptを読み込んでいる <script>要素より前に書く必要があります。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

content-language(言語の指定)= 非準拠

ページのデフォルトの言語を定義します。
これは非準拠。HTML5では「lang属性」(<html lang="ja">)に置き換えられました。
過去(HTML4、XHTML1)の指定を HTML5 でも使えるように残してあるだけです。

<meta http-equiv="content-language" content="ja">

set-cookie(クッキーの設定)= 非準拠

ページの Cookie を定義します。
これは非準拠。代わりに HTTPヘッダーの「Set-Cookie」を使用すべきだそうです。

<meta http-equiv="set-cookie" content="name=値; expires=値; domain=値; path=値;">

次回予告

次回は、OGP(Open Graph Protocol)の設定を見てみましょう。
OGPとは、Facebook、Google+、Twitter などの SNSの共通の機能で、シェアしてもらったとき、そのページの「タイトル・抜粋文・イメージ・URL」を表示する仕組みです。
この設定でも <meta>要素を使います。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

勉強させてもらってます

はじめまして。
いつもすばらしい内容の記事をありがとうございます。
開発する際によく参考にさせてもらっています。 m(_ _)m
姉妹サイトのCSS Layoutもよく見ています。

メタデータ系の記事すごく勉強になりました。
これからも期待しています :)

Re: 勉強させてもらってます

コメントありがとうございます!!
お役にたてて良かった。本当に励みになります。(^^ゞ
自分の勉強のために始めたブログですが、だんだん中だるみになっていました。
読んでくださっている方がいるという思いで、また頑張るエネルギーをいただきました!ありがとう。

実は今、本業が忙しくて更新が遅れていますが、12月には再開する予定です。
今後ともどうぞよろしくお願いいたします。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.