トップ > スキル : Web > HTML5

Web

各要素のリファレンス2

メタデータ関連要素(続き)

meta要素(ドキュメントのメタデータ)

カテゴリ メタデータ・コンテンツ
コンテンツモデル
利用可能な場所 各コンテンツ属性によって期待される場所
開始タグ 必須
終了タグ 禁止
要素固有のコンテンツ属性 name(メタデータの名前を指定)
http-equiv(プラグマ指示子を指定)
content(メタデータの値やプラグマ指示子の値を指定)
charset(ドキュメントの文字エンコーディング名を指定)
デフォルトスタイル meta{
    display:none;
}

meta要素は、nameコンテンツ属性やhttp-equivコンテンツ属性にセットされる値に応じて、それを表すメタ情報が変わり、メタ情報はcontentコンテンツ属性を使って表します。
HTML5では、新たにcharsetコンテンツ属性が規定され、ドキュメントの文字エンコーディングを表すことができます。

◆ nameコンテンツ属性

meta要素にnameコンテンツ属性がセットされている場合は、メタ情報の値をcontentコンテンツ属性を使って指定します。nameコンテンツ属性では、メタ情報の種類を以下のように規定しています。

説明
application-name ドキュメントを作成した、ウェブアプリケーション名を指定します。一般的なウェブページでは使うことないです。
description ドキュメントの概要を表します。検索エンジンなどの検索結果として使われるので、どのような内容なのかが分かるように適切な文章を入力します。
author ページの作成者を表します。
generator ドキュメントを生成したソフト名を表します。ホームページ用のソフトを使わなかったときは、この値は使ってはいけません。
■利用例
  <meta name="description" content="ここにサイトの説明を記述します。" />
  <meta name="generator content="Dreamweaver CS5" />
    

◆ http-equivコンテンツ属性

meta要素にhttp-equivコンテンツ属性がセットされている場合は、このmeta要素はプラグマ指示子を表すことになります。そのプラグマ指示子の値は、contentコンテンツ属性を使って指定します。http-equivコンテンツ属性で利用できる値は以下の通りです。

説明
content-language ドキュメント全体のデフォルトの言語をセットするプラグマです。
content-type ドキュメントのMIMEタイプや文字エンコーディングを指定します。
default-style デフォルトの優先スタイルシートのセット名を指定します。
refresh contentコンテンツ属性にセットされた秒数が過ぎると、ページを再読み込みされます。
■http-equivコンテンツ属性にdefault-styleがセットされる例

複数のスタイルシートが用意されている場合、そのうちの1つを優先スタイルシートとして定義することができます。そのためには、meta要素のhttp-equivコンテンツ属性に"default-style"をセットして、contentコンテンツ属性に、優先スタイルシートを読み込むlink要素のtitleコンテンツ属性の値をセットします。

例えば、meta要素のhttp-equivコンテンツ属性に"default-style"をセットして、そのcontentコンテンツ属性に「normal」と指定していたら、link要素のスタイルシート指定でtitleコンテンツ属性に「normal」が指定されている方を優先スタイルシートとして適用します。もし、http-equivコンテンツ属性に"default-style"をセットされていなければ、両方のスタイルシートを適用します。

  <meta http-equiv="default-style" content="normal" />
  <link rel="stylesheet" href="base.css" type="text/css" title="normal" />
  <link rel="stylesheet" href="change.css" type="text/css" title="change" />
    

いくつかのブラウザでは、ユーザがスタイルを選択できるインターフェイスが用意されていて、ユーザ自身が他のスタイルを指定できるようになります。

meta要素

■http-equivコンテンツ属性にrefreshがセットされる例

http-equivコンテンツ属性に"refresh"がセットされていると、ページの再読み込みを行います。contentコンテンツ属性に数字がセットしておけば、その数字が表す秒数が過ぎると、該当のページが再読み込みされます。

  <meta http-equiv="refresh" content="15" />
    

この例では、同じページを15秒後に再読み込みされますが、結局は15秒おきに再読み込みされることになります。また、秒数だけでなく、URLをセットしておけば、その秒数後にURLに指定されたページへ遷移することができます。

  <meta http-equiv="refresh" content="15; URL="http://www.sample.com/" />
    

◆ charsetコンテンツ属性

meta要素にcharsetコンテンツ属性をセットしたら、ドキュメントの文字エンコーディングを宣言できます。また、このcharsetコンテンツ属性はドキュメントに1つしか入れてはいけません。

■利用例
  <meta charset="utf-8" />
    

style要素(スタイル情報)

カテゴリ メタデータ・コンテンツ
scoped属性がある場合はフロー・コンテンツ
コンテンツモデル typeコンテンツ属性に依存する
利用可能な場所 各コンテンツ属性によって期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 type(スタイリング言語のMIMEタイプを指定)
media(スタイルを適用するメディアを表すキーワード)
scoped(この属性を指定すると、指定のスタイル情報が該当のstyle要素の親要素とその子要素だけに適用される。指定しなければ、ドキュメント全体に適用される)
デフォルトスタイル style{
    display:none;
}

style要素の中にスタイルをマークアップすると、そのスタイルのドキュメント全体、またはstyle要素が含まれている領域のみに適用できます。

◆ typeコンテンツ属性

スタイリング言語のMIMEタイプを表し、指定がない時のMIMEタイプは"text/css"となる。通常、ウェブ・ページで使われているスタイルシートの場合は、style要素にtypeコンテンツ属性を入れる必要はありません。


◆ mediaコンテンツ属性

style要素の中に記述されたスタイル情報を、どのメディアに適用するかを表します。このmediaコンテンツ属性が省略されている場合は、media コンテンツ属性に"all"が指定されているものとして処理されます。

■利用例
  <style media="screen"> <!--画面だけに適用 -->
  ・・・
  </style>
  <style media="print"> <!--印刷だけに適用 -->
  ・・・
  </style>
    

◆ scopedコンテンツ属性

scopedコンテンツ属性は論理属性です。もし、このscopedコンテンツ属性が指定されていれば、style要素の親要素の中にあるコンテンツだけに、style要素の中に記述されたスタイル情報が適用されます。

■利用例
  <p>最初の段落です。</p>
  <div>
    <style scoped="scoped">
    	p {color:red;}
    </style>
    <p>2つ目の段落です。</p>
  </div>
    

利用例とみると、最初のp要素にはスタイルは適用されませんが、2つ目のp要素では、親要素であるdiv要素にスタイルが指定されているので、スタイル情報が適用されます。

scopedコンテンツ属性は、そのstyle要素はフロー・コンテンツが期待される場所にしかマークアップできません。例えば、div要素の中であれば問題ありません。しかし、p要素のように、そのコンテンツ・モデルがフロー・コンテンツを認めていない要素の中では、scopedコンテンツ属性をセットしたstyle要素を使うことはできません。
なお、scopedコンテンツ属性が指定されていないstyle要素は、head要素の中だけしか利用できません。

【各要素のリファレンス2】