ヘッダ、複合メディア別CSS/メールマガジン第102号今週のおさらい

初心者のためのホームページ作り

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方までメールにてご質問ください。

＜第102号＞ 今週のおさらい
　　　　　　　　　　　　　毎週金曜日配信　What's New 2004年10月1日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　  ■ 正しい文法のために  第５回 --- ヘッダ
　　■ CSS講座　第21回 --- メディア別複合スタイルシート

◆ 正しい文法のために --- ヘッダ

HTMLは、大きく分けてヘッダ部と本体の２つの構造に分けられます。本体とは、実際に表現するコンテンツを表し、そのすべては body要素の中に配置されます。

一方、ヘッダは文書の情報を示し、基本的に head要素内に置かれます。

■ ヘッダ情報の利用

ヘッダで示される情報の中では、ほとんど表面に現れることがありません。唯一、title要素で囲まれた「タイトル」だけが Webブラウザに表示されます。

それ以外の文書情報は、HTTPサーバやユーザエージェントなどに伝達する情報となります。つまり、コンピュータやソフトウェアが解釈する情報となるわけです。

ただし、ヘッダで記述される情報がすべての HTTPサーバやユーザエージェントなどで正確に解釈されるかは疑問です。それを踏まえて説明します。

検索サーチ型ロボットは、ヘッダにあるメタ情報を拾ってデータベースに格納することがあります。ページのタイトルやキーワードなど、様々な情報を扱います。

■ 文書情報

ヘッダで配置される情報はタイトルのほかに、利用する文字符号コード、他の文書との関係や作者の情報など様々です。特に meta要素で示されるメタ情報は、人間よりもコンピュータに理解可能な情報となっています。

ヘッダで利用される要素とその属性は以下の表のとおりです。

ヘッダで利用する要素と属性の一覧
要素名	属性	意味
meta	htt-equiv	HTTPサーバ用プロパティを指定
	content	プロパティの値を指定
	name	プロパティを指定
link	rel	外部文書との関係を示す
	rev	外部文書から見た関係を示す
	type	外部文書のMIMEタイプを示す
	href	外部文書の所在 (URI)を示す
script	src	外部スクリプト文書の所在を示す
script	type	スクリプトのMIME対応を示す
style	type	スタイルシートのMIME対応を示す
title	なし	文書のタイトルを示す

例えば、以下のような記述の場合、

<html lang="ja">
 <head>
  <title>初心者のためのホームページ作り</title>
 </head>

文字コードの指定はしていませんが、たいていの場合はこれでも正確に表示されることがあります。しかし、あらゆる環境を考えると、必ずしもこれだけでは不十分です。

メタ情報があらゆる環境に適応するとは限りませんが、どのような環境であっても、様々な情報を配置しておくことは重要なことです。

◆ CSS講座 --- メディア別複合スタイルシート

前回はメディア別に独立した外部スタイルシートの取り込みで、@import について解説しましたが、今回は１つのスタイルシートに複数のメディア向けのスタイル設定を解説します。

ここでいうメディアとは、HTMLデータの出力先を表します。通常考えられているのはコンピュータのディスプレイモニター (スクリーン) ですが、その他にプリンターや音声出力デバイス、点字プリンター、携帯通信機、プロジェクター、テレビなどがあります。

ただし、すべての機器でそれらがサポートされているわけではありません。それらを駆動するドライバやソフトウェアに依存しているのが現状です。

■ メディア別に設定するスタイルシート

例えば、スクリーンと印刷用のスタイルシートを１つのスタイルシートで作成する場合には、以下のように @media という形でメディアを指定し、その中でそれぞれのスタイルを設定します。

@media screen {
  body { font-size: 1em }
  }

@media print {
  body { font-size: 12pt }
  }

この記述で注意すべき点は、{ と } の入れ子の関係です。各メディア別に括弧を閉じるようにしなければなりません。閉じ忘れた場合、各メディア別のスタイルがそれぞれにうまく適用できません。

次回は実際に印刷用などの須田オイルシートを学びながら、メディア別のスタイルシートを作成します。

初版公開日 2004年10月4日

初心者のためのホームページ作り 第102号

初心者のためのホームページ作り　第102号