[45-4] <meta http-equiv=" " content=" ">で動作を指示しよう

<meta>要素の「http-equiv属性」を使って、HTMLの動作や状態を指定しましょう。

ただこの「http-equiv属性」、HTML5になって以前よりあまり使わないかんじです。
使えるのは「refresh」くらいではないでしょうか。

昔(HTML4やXHTML1以前)は、サイトの主言語指定や文字コード指定も、この「http-equiv属性」を使っていて、けっこうおなじみでした。
しかしHTML5で各要素や属性が整理され、コレは使用頻度が低くなったように感じます。

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

<meta http-equiv=" " content=" ">必ず「content属性」とペアで使います 。

「http-equiv」の読み方は、「エイチティーティーピー イクイヴ」。
「http」は当然「hypertext transfer protocol」のこと。「equiv」は「equivalent」の略です。

<meta http-equiv="refresh" >でページの再読み込みを指定

何秒後に再読み込みする。または他のページに行くなどの、ページのリフレッシュ方法を指定します。
「content属性」では「何秒後に実行するか」の「秒数」を指定。
他のページに行くなら「url属性」を使ってジャンプするページのURLを指定します。「url属性」無しなら、同じページを再読み込みします。

例えば、3秒後に new.html というページに行くなら、下のように指定します。

<meta http-equiv="refresh" content="3;url=new.html">

5秒後に同じページを再読み込みするなら、下のように「url属性」無しで指定します。

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

<meta http-equiv="default-style" >で優先外部CSSを指定

これは、外部CSSの優先度を<link>要素以外でも指定する方法です。
<link>要素で指定するなら、<link>要素に「title属性」を使います。詳細は「[42-1] link で外部CSSファイルの読み込み、グループ化をしよう」をご覧ください。

「title属性」を使った「セット名」で優先CSSを指定します。
<link>要素で複数の外部CSSファイルに「title属性」でセット名を指定している場合、その中の優先セット名を、<meta>要素で指定する方法です。
これで指定した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">

「title属性」無しでも優先のデフォルト外部CSSファイルを指定できます。
<link>要素で複数の外部CSSファイルを指定している場合、その中のデフォルトのCSSを指定します。
<link>要素に title属性を使わずに、<meta>要素で優先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="2nd">

私感ですが、
<link>要素を使えば済むので、このhttp-equiv="default-style"って使うかな?と思ってます…。

過去の遺物、"content-language" と "content-type"

このあとは、過去(HTML4 または XHTML1)の指定を、HTML5 でも使えるように残してあるだけの「http-equiv属性」の値(2つ)です。

<meta http-equiv="content-language" content="○">
「content-language」は、かつてはページ全体の「言語の指定」で使われました。
しかし、HTML5から言語の指定は、<html>要素の「lang属性」を使います。
「http-equiv="content-language"」は、過去(HTML4 または XHTML1)で使っていた指定を HTML5 でも使えるように残してあるだけです。

<meta http-equiv="content-language" content="ja">
 ↓
<!DOCTYPE html>
<html lang="ja"> <!--html要素のlang属性で言語指定をする。jaは日本語。-->
<head>
<title>サイトのタイトル</title>
</head>
<body></body> 
</html>

<meta http-equiv="content-type" content="text/html; charset=○">
「content-type」は、かつて「文字コード」を指定しました。
HTML5での文字コードの指定は<meta>要素の「charset属性」を使いますね!
「http-equiv="content-type"」も過去の指定方法を HTML5 でも使えるように残してあるだけ。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 ↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
</head>
<body></body> 
</html>

次回予告

これでやっと<meta>要素が終わりました。(長かったですね!)

次回からは、フォームに関する要素をやっていきましょう。
フォームは、サイト上でビジターから情報を得られる、重要な要素群です。
ただし、実際にフォームで情報を得る機能は、CGIやPHPなどのプログラムが必要です。で、とりあえずそのプログラム関連には触れず、フォーム関連要素の組み立て方のみをやっていく予定です。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

勉強させてもらってます

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

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

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

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

実は今、本業が忙しくて更新が遅れていますが、12月には再開する予定です。
今後ともどうぞよろしくお願いいたします。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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