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

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  第19号  第20号
目次

プレーンテキスト版バックナンバー

今週<第21号>マガジンのおさらい

                   毎週金曜日配信 What's New 2002/10/4
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題 ■ ヘッダ情報:meta要素 及び link要素について
             ■ スタイルシートの利用に関するTips

今週号より今までお伝えしてきた基礎講座の応用編になります。
 内容として、今までお伝えできなかったことやHTML、スタイルシートの応用な
どを中心に進めていきたいと考えています。あわせてスクリプトも併用していく
予定です。
 今回は、ヘッダとCSSに関する応用を詳しく解説します。

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

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

HTML文書の構成 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号)のメールマガジンをお読みください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆スタイルシート(CSS)の利用に関するTips
本誌第2号および第5号でスタイルシートについて述べましたが、もう1度おさ
らいの意味で解説します。

スタイルシートの基本

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

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

クラス属性と id属性

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

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

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

クラス属性の応用

クラス属性を記述する方法は2つあります。
1.要素名 + ピリオド + クラス名   p.test { color: #f00 }
2.ピリオド + クラス名             .test { color: #f00 }

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

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

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

スタイルシートをHTMLに実装する方法は3つあります。
  1. 外部にCSSを置いてlink要素で読み込むリンキング方式
  2. HTMLのヘッダに記述するエンベッド方式
  3. 要素内に直接書き込むインライン方式

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

最優先にする記述方法

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

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要素のみに適用され、2番目以降のstrong要素には適用されません。要素の前後関係でスタイルを設定する方法です。
(MSIEではこの機能には対応していません。Netscapeは 6.0より対応)

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

スタイルシートの応用

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

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

<サンプル>
CSS:  p,h1,span { color: #009 }
HTML: <p>文字が青くなります。</p>
       <h1>文字が青くなります。</h1>
       文字が<span>青く</span>なります。
結果は割愛させていただきます。


Copyright(C) 2002-2003 banban@scollabo.com