今週のおさらい/第21号/初心者のためのホームページ作り

HTMLにおけるヘッダに記述される多くが、title要素以外はブラウザに表示されることはありません。ほとんどがHTTPサーバに送信されたり、ブラウザ側でチェックされる情報を記述します。

■ ヘッダにのみ記述する要素

HTML文書は左図のような構成になっており、大きくヘッダ部と本文に分かれています。

今回は、ヘッダ部 <head> ～ </head> の中で記述する要素とその働きについて詳しく解説します。

HTML文書におけるヘッダの大きな役割として、HTML文書がリクエストするHTTPサーバへのレスポンスを期待します。HTTPサーバはHTMLからのリクエストに応えて、ユーザに返す言語、文書構成、情報を調整し正しくブラウザに伝えます。

しかしながら多くのヘッダ部の記述は必ずしもHTTPサーバに送信されるわけではなく、実際にはブラウザ側でチェックする情報とも言われています。

■ meta要素

meta要素は、文書に関する情報（メタデータ）を指定する場合に使います。この要素の基本的なものとして、name属性で指定されたプロパティと、content属性で指定された値によって表わします。

ただし、HTML4.01の仕様では、特に標準となる「メタデータ」のプロパティを定義していません。メタデータに関する詳細は W3C の「Resouce Description Fremework (RDF) Model and Syntax Specification」を参照してください。日本語版はこちらです。 W3C HTML4.01仕様書和訳/文書のヘッダ

属性の解説
  content="プロパティの値"
　　　メタデータのプロパティに対する値を指定します。

  name="プロパティ名"
　　　メタデータのプロパティ名を指定します。

  htt-equiv="HTTPヘッダ用プロパティ名"
　　　メタデータを HTTPヘッダとしてサーバから送信させたい場合に
　　　name属性の代わりに使用します。ただし、すべてのサーバが必ず
　　　しもHTTPヘッダとして送信するわけではなく、実際にはブラウザ
　　　でこの要素内容をチェックするものが多いようです。

  schame="値の形式名"
　　　プロパティの値を正しく解釈するための補助的な情報として値の
　　　形式を設定します。

■ link要素

この要素は、文書間の関係を定義するもので、ヘッダ部のみに記述します。その多くがリンクタイプを記述し、他の文書との関係を表わします。

属性の解説
  rel="リンクタイプ"
　　　この文書から見た、href属性で指定される別の文書との関係を
　　　示します。空白で区切って複数設定できます。

  rev="リンクタイプ"
　　　href属性で指定された文書から見た、この文書との関係を示し
　　　ます。空白で区切って複数設定できます。

  href="URL"
　　　関連する別の文書のURLを指定します。

  hreflang="文字コード"
  　　リンク先として指定した場合の関連する別の文書の文字コード
　　　を指定します。

  charset="文字コード"
　　　文書を読み込む場合の関連する別の文書の文字コードを指定し
　　　ます。

  type="MIMEタイプ"
　　　関連する別の文書のMIMEタイプを指定します。ブラウザが対応
　　　していない形式のデータを無駄にロードしてしまうことを避け
　　　るためなどの目的があります。

■ リンクタイプ

**link要素における、rel、rev属性の値と機能**
値	値の機能
altemate	リンクがある文書の代替バージョン
stylesheet	外部スタイルシート
start	指定する文書が最初の文書であることを示す
next	指定する文書が次の文書であることを示す
prev	指定する文書が前の文書であることを示す
contents	指定する文書が全体の目次であることを示す
index	指定する文書が索引であることを示す
glossary	指定する文書が用語解説であることを示す
copyright	著作権に関する部分の記述
chapter	ひとまとまりの文書中で、「章」にあたる文書
section	ひとまとまりの文書中で、「節」にあたる文書
subsection	ひとまとまりの文書中で、「項」にあたる文書
appendix	ひとまとまりの文書中で、「付録」にあたる文書
help	ヘルプのある文書

現在、 Internet Explorer や Netscape では、スタイルシートを外部から読み込む場合を除いて上記の各機能には対応していません、念のため。

その多くが非視覚系ブラウザに対応しており、アクセシビリティの一環として記述を求められているものがあります。

なお、mata要素に関する使用法は今週（第21号）のメールマガジンをお読みください。

■ スタイルシートの基本

スタイルシートの構造は下記の図のようになっています。

スタイルシートの記述は、セレクタ（選択部）と宣言部から成り立ち、セレクタには要素名、クラス名あるいは拡張子などを記述して、宣言部の設定を反映させる要素などを選びます。このことを踏まえて解説します。

■ クラス属性と id属性

クラス属性とは、使用するセレクタの「分類名」として区別され、同一のHTML　内で何度も使用可能です。なお、厳密にはクラス名は大文字と小文字が区別さ　れますので、注意してください。

id属性は、セレクタに対して固有の「拡張子」として区別され、同一のHTML内では１回しか利用できません。ここで付ける名前は大文字と小文字を区別しますので、注意してください。

CSS	属性	HTML記述
p.test { color: #f00 }	class	<p class="test">
p#test { color: #f00 }	id	<p id="test">

■クラス属性の応用

クラス属性を記述する方法は２つあります。

１．要素名 ＋ ピリオド ＋ クラス名　  p.test { color: #f00 }
２．ピリオド ＋ クラス名　            .test { color: #f00 }

上記下段の要素名を特定しない設定方法は、いろいろな要素に使える汎用性の高い方法です。状況に応じて使いこなせれば便利です。

■ スタイルシートの優先順位

スタイルシートの実装方法

スタイルシートをHTMLに実装する方法は３つあります。

外部にCSSを置いてlink要素で読み込むリンキング方式
HTMLのヘッダに記述するエンベッド方式
要素内に直接書き込むインライン方式

上記のスタイルシートの実装の中で、最も優先順位が高いのがインライン方式で、次いでエンベッド方式、最後にリンキング方式となります。

最優先にする記述方法

その中でも、下記の記述があればそれが最も優先されるスタイルシートになります。

p.red { color: #f00 !important }

!important を追記することで最も高い優先順位となり、これによって他の実装中で記述された同一のスタイルシートは無視されます。

■ セレクタの組み合わせ

ここまで説明したセレクタは、シンプルセレクタと呼ばれており、それらをさらに組み合わせることで、特定の親子要素関係にある要素などに対してスタイルを適用させることができます。

◆ p em { color: #f00 } スペースで区切って設定します。
これは、p要素内にあるem要素に対してのみスタイルを適応させています。そのため、他の同じ要素には反映されません。要素の相関関係でスタイルを設定する方法です。

＜サンプル＞
CSS：  p em { color: #f00 }
HTML： <p>要素の<em>相関関係</em>でスタイルを設定する方法です。</p>

＜結果＞

要素の相関関係でスタイルを設定する方法です。

◆ div > em { color: #009 } > で区切って設定します。
これは div要素内の直接の子要素である em要素にのみスタイルが適用します。他のブロックレベル要素内での em要素には適用されません。要素の相関関係でスタイルを設定する方法です。
（MSIEではこの機能には対応していません。Netscapeは 6.0より対応）

＜サンプル＞
CSS：  div > em { color: #069 }
HTML： <div>
　　　 要素の<em>相関関係</em>でスタイルを設定する方法です。
       </div>
       <p>他のブロックレベル要素では、
       <em>強調文字</em>に色は付きません。</p>

＜結果＞
要素の相関関係でスタイルを設定する方法です。

他のブロックレベル要素では、強調文字に色は付きません。

◆ h2 + em { color: #f00 } +（プラス記号）を用いて設定します。
これは、h2要素の直後に来る strong要素のみに適用する前後関係の設定です。つまり、h2要素後の最初に来る strong要素のみに適用され、２番目以降のstrong要素には適用されません。要素の前後関係でスタイルを設定する方法です。
（MSIEではこの機能には対応していません。Netscapeは 6.0より対応）

＜サンプル＞
CSS：  div + strong { color: #009 }
HTML： 
<h2>スタイルシートの応用</h2>
h2要素後の最初に来る <strong>strong要素</strong>のみに適用され、
２番目以降の <strong>strong要素</strong>には適用されません。

＜結果＞

スタイルシートの応用

h2要素後の最初に来る strong要素のみに適用され、
２番目以降のstrong要素には適用されません。

◆ p,h1 { color: #00f } カンマ「,」で区切って設定します。
この場合、p要素とh1要素の２つが同時にスタイルを適用します。複数の要素に同じ設定をする場合に利用します。

＜サンプル＞
CSS：  p,h1,span { color: #009 }
HTML： <p>文字が青くなります。</p>
       <h1>文字が青くなります。</h1>
       文字が<span>青く</span>なります。

結果は割愛させていただきます。

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

スタイルシートの応用

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