[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でシェアされたときの「サムネイル画像や説明文などのセット」を表示させます。
参考：
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>要素を使います。
- 関連記事
-
- [49-3] input要素で ラジオボタン や チェックボックスを作ろう (radio, checkbox)
- [49-2] input要素でテキストを入力してもらおう ( text, search, tel, url, email, password )
- [49-1] input要素の属性一覧・ type属性の値一覧
- [48] フォーム部品のグループ化のための fieldset要素と legend要素
- [47] form要素で「送信先」と「送信方法」を指定しよう
- [46] template要素でテンプレートを作ろう
- [45-5] meta要素で OGPを設定しよう
- [45-4] meta要素の http-equiv属性で動作を指示しよう
- [45-3] meta要素の name属性でサイトの情報を指定しよう
- （ちょっとメモ）文字コード、文字集合、エンコードについて（2）
- （ちょっとメモ）文字コード、文字集合、エンコードについて（1）
- [45-2] meta要素の charset属性で文字コードを指定しよう
- [45-1] meta要素で基本情報（メタデータ）を指定しよう
- [44] script要素で HTMLにスクリプトを読み込む or 直接書く
- [43] style要素で CSS を HTML文書内に書こう
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
勉強させてもらってます
いつもすばらしい内容の記事をありがとうございます。
開発する際によく参考にさせてもらっています。 m(_ _)m
姉妹サイトのCSS Layoutもよく見ています。
メタデータ系の記事すごく勉強になりました。
これからも期待しています :)
Re: 勉強させてもらってます
お役にたてて良かった。本当に励みになります。(^^ゞ
自分の勉強のために始めたブログですが、だんだん中だるみになっていました。
読んでくださっている方がいるという思いで、また頑張るエネルギーをいただきました！ありがとう。
実は今、本業が忙しくて更新が遅れていますが、12月には再開する予定です。
今後ともどうぞよろしくお願いいたします。
