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

                  毎週金曜日配信 What's New 2002/10/4
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第21号>

             banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのHPを作ることが出来ます。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。

 当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。

 今週の課題 ■ ヘッダ情報:meta要素 及び link要素について
             ■ スタイルシートの利用に関するTips

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

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

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ヘッダにのみ記述する要素
HTMLはヘッダ <head> 〜 </head> と、本文 <body> 〜 </body> から成り立って
います。
 ヘッダ部には title要素以外はブラウザに表示されることはありません。ほと
んどが、HTTPサーバに送られる情報や、他の文書との関係を示す情報などを示し
ます。その中でよく使われる meta要素と link要素について解説します。

◆ヘッダに記述する meta要素

■ meta要素 (終了タグはありません)
 meta要素は、その文書に関する情報である「メタデータ」を指定する要素です。
基本的には、属性(name属性で指定)とそれに対する値(content属性で指定)
によってあらわします。ヘッダ内でのみ使われる要素です。

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

content="プロパティ(属性)の値"
  メタデータのプロパティに対する値を指定します。ここでのプロパティとは、
 meta要素に、http-equiv属性、あるいは、name属性が設定された場合に、その
 値を指定します。

name="プロパティ名"
 メタデータのプロパティ名を指定し、HTTPサーバに送信します。

scheme="値の形式"
 プロパティの値を正しく解釈するための補助的な情報として、値の形式を設定
 します。例えば「9-1-02」という値が設定されていた場合、それが年月日であ
 ることを正しく伝えるために、「Manth-Day-Year」と指定することで、2002年
 9月1日であることが明確になります。あまり使われることはありません。

■ 応用
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
 この文書はシフト JISを使って、HTML形式で書かれたテキスト文書であること
 を、HTTPサーバに伝えます。文字コードの設定で必須の項目です。
  日本語の文字コードはこの他に、ISO-2022-JP、ECU-JPがあります。

<meta http-equiv="Content-Style-Type" content="text/css">
 この文書では、スタイルシートを記述したテキストを使用することを、HTTPサ
 ーバに伝えます。スタイルシートを利用する場合には必須の項目です。

<meta http-equiv="Content-Script-Type" content="text/javascript">
  この文書では、JavaScriptを使用することを、HTTPサーバに伝えます。スクリ
 プトを利用する場合には必須の項目です。

<meta http-equiv="Pragma" content="no-cache">
 訪問するユーザのブラウザにページがキャッシュされないことを期待します。
  通常ブラウザは訪れたページをハードディスクに書き込む「一時ファイル」
 を作ります。これを「キャッシュ」と呼んで2度目の訪問時にはサーバからダ
 ウンロードしなくてもハードディスクから読み込むために体感的に「速く」表
 示できます。
  常に更新を行っているサイトでは、訪問者に新しい情報を提供するには不便
 なために「キャッシュされない」状態にする必要があります。その時に使用す
 るメタデータですが、サーバやブラウザによっては対応しない場合もあり、必
 ずしも絶対ではありません。あくまでも「期待」程度です。

<meta name="generated" content="notepad">
 この文書を「ノートパッド」というソフトで作られたことをあらわします。
 特に設定する必要はないと思いますが、ホームページ作成ソフトを使用した場
 合には、勝手に書き込まれる場合が多いようです。必要なければ削除しても特
 に問題ありません。

<meta name="author" content="ばんばん/banban@scollabo.com">
<meta name="discription" content="HTMLにおけるmeta情報についての解説">
<meta name="keyword" content="meta,HTML,メタデータ,ヘッダ情報">
  上からこの文書の制作者、文書内容の要約、キーワードを示しています。特に
 文書の要約とキーワードは、多くの検索型ロボットにサーチしてもらって、そ
 の結果が検索エンジンに表示させることを期待します。
  ただし、すべてのロボットに対応しているわけではありません。本当に淡い
 期待程度です。キーワードは半角カンマで区切っていくつでも記述できます。
 また、各ページで記述することも可能です。

  大手検索エンジンである「Google」では、meta要素を無視しています。ヘッ
 ダに記述する title要素内のテキスト、あるいは、body要素直下のテキストに
 基づいてキーワードとしているようです。

<meta name="robots" content="index,follow">
 検索エンジンのサーチロボットに文書の登録を期待する場合に用います。登録
 を拒否する場合は
 content="noindex,nofollow"  と記述します。これもすべてのロボットに対応
 しているわけではありません。あくまでも「期待」程度です。

<meta name="copyright" content="Copyright (C) 2002 banban@scollabo.com">
 著作権があるということを設定します。著作権は、公開された時点で発生しま
 すので、これを指定する必要はないと思います。

<meta http-equiv="refresh" content="10,URL=test.html">
 この文書が10秒後に、「test.html」へ移動することを指定します。
 ただし、すべてのブラウザに対応しているわけではありません。最近増えてい
 るのがこのようなページです。いわゆる「スプラッシュ・ページ」と呼ぶもの
 で、サイトを訪問したときに表紙のようなグラフィックで示されたページを表
 示した後に、本来のトップページに移動させるときに使います。

  スプラッシュ・ページに関する論議はいろいろありますが、面白いことに大
 手のサイト・コンテストで上位に並ぶものの多くがこの手法を用いています。
 私の個人的な意見としては、ユーザのリソースを無駄に消費させるだけで意味
 のないページを見せるのはあまり感心できません。
  ユーザが元のページに戻ろうとして「戻るボタン」を押しても効果がなく、
 すべての表示を待つしかありません。
  また、スプラッシュ・ページにスクリプトが組んであると最悪です。スクリ
 プトに対応していないブラウザでは、戻ることも進むこともできなくなります。
 これは訪れるユーザにとっても、制作者にとっても悲劇です。
  制作者が精魂込めたグラフィックを見せたい気持ちは分かりますが、別のペ
 ージで見せるようにすることもユーザビリティ、アクセシビリティにつながり
 ます。(スプラッシュとは泥跳ねの意味)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ヘッダに記述する link要素
 他の文書との関係を示すもので、外部のスタイルシートを呼ぶ場合や、非視覚
 系ブラウザに対してのリンクを設定する場合にも使われます。

■ link要素 (終了タグはありません)
 この要素はヘッダ内でのみ使われ、その文書に関連する他の文書との関係を示
 すものです。
  ただし、今のところ視覚系ブラウザでは、外部スタイルシートを読み込む以
 外は下記のほとんどをサポートしておりません。

link要素の属性とその働き
rel="リンクタイプ"
 この文書から見た、href属性で指定される別の文書との関係を示します。空白
 で区切って複数設定できます。
 リンクタイプについては、下記にある応用を参照してください。

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

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

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

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

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

■ 応用
<link rel="stylesheet" href="samplesheet.css" type="text/css">
 外部にあるスタイルシート文書を読み込みます。
 MIMEタイプはテキストで書かれたCSS(Cascading Style Sheet)であることを
 示します。視覚系ブラウザではほとんどがこの機能に対応しています。

<link rel="index" href="sitemap.html" type="text/html">
 索引をあらわすページのリンク先を指定します。

<link rel="start" title="HomePage" type="text/html" href="index.html">
 一番最初のページを指定します。title属性でページの名前を記述することに
 よって、検索エンジンにサーチしてもらうことを期待します。

<link rel="shortcut icon" href="favicon.ico">
 ショートカット・アイコンを指定します。MSIEで「お気に入り」に登録したと
 きには、このアイコンがブラウザのブックマークに登録されます。

<link rel="contents" href="sitemap.html" type="text/html">
 目次のページを指定します。一般的にはサイト全体のリンク先が明確に記述し
 てあるページを指定します。

<link rel="alternate" media="print" title="The manual in postscript"
 type="application/postscript" href="manual/postscript.ps">
 別バージョンの文書をあらわし、プリンターへの出力媒体を指定します。
 ここではポストスクリプトによってプリンターへの出力が可能なページである
 ページを指定しています。

<link rev="made" title="ばんばん" href="mailto:banban@scollabo.com">
 この文書の作成者を示します。一般的にはメールアドレスが値として記述され
 ます。

<link rel="prev" title="前のページ" href="back.html" type="text/html">
 この文書から見た前のページを指定します。テキストブラウザなどの非視覚系
 ブラウザでは title属性で示されたテキストがリンク先として表示します。

<link rel="next" title="次のページ" href="next.html" type="text/html">
 この文書から見た次のページを指定します。テキストブラウザなどの非視覚系
 ブラウザでは title属性で示されたテキストがリンク先として表示します。


*HTTPに関する解説はこちらをご覧ください。
 用語解説・HTTP
 http://www.scollabo.com/banban/tips/diction.html#http

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

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

■スタイルシートの基本的な構造の復習
スタイルシートの構造はセレクタ(選択部)と宣言部により構成され、宣言部は
属性と値で構成されています。
 例えば、
 body   { background-color: #ffffcc }

 セレクタ部  body スタイル付けする要素やクラス名、拡張子を記述します。
 宣言部    { background-color: #ffffcc }   宣言部は { } で囲みます。

宣言部には、スタイルの属性とその値を記述します。複数設定する場合は、セミ
コロン「;」で区切って記述します。

■クラス属性と id属性におけるスタイルシートの区別
 下記のCSSを参照してください。特にセレクタ部の違いに注目してください。

  div.body { margin: 10px 50px; padding: 1em }
    div#body { margin: 10px 50px; padding: 1em  }

 両者ともまったく同じ内容のスタイルシートです。前者をclass属性によって
 読み込み、後者は id属性によって読み込まれます。
 HTMLでの記述は、
 クラス属性 <div class="body">  1つのHTML文書中何度も利用できます。
 id属性   <div id="body">     1つのHTML文書では1回しか使えません。

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

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

■クラス属性の応用
 下記のCSSを参照してください。

  div.body { background-color: #ffc }
    .body    { background-color: #ffc }

 前者のセレクタには、「要素名」+「ピリオド」+「クラス名」が記述され、
 後者のセレクタには 「ピリオド」+「クラス名」しか記述されていません。

 前者の利用方法はご存知ですので省きますが、後者の場合にはいろいろな要素
 で使用可能になります。

  <h1 class="body">
    <p class="body">
    <td class="body"> などなど・・

 共通して利用できるスタイルシートであれば、「ピリオド」+「クラス名」の
 ように、汎用性を持った方法が利用できます。いろいろとお試しください。

■スタイルシートの優先順位
スタイルシートの実装方法は3つあります。
 1.外部に置いたスタイルシートを読み込むリンク方法(上記 link要素参照)
 2.ヘッダ部に記述する埋め込み型(エンベッド方式)
 3.要素中に style属性を使って直接設定する方式(インライン方式)

 この中で優先順位は、リンク方式→エンベッド方式→インライン方式 となり
 インライン方式が一番優先されます。

 例えば、外部CSSやヘッダ部のCSSで
  div { color: #000 } と文字色を黒と指定してあっても、HTML内で記述した
  <div style="color:#009">  では文字色を濃い青に優先されて表示します。

■最も優先されるスタイルシートの記述方法
どのような方式のスタイルシートであっても、中には「絶対これでなければ」と
いう場合があります。スタイルシートの内容を「絶対」の最優にする方法は、
  body { background-color: #fff !important } と記述します。

 !important はすべてのスタイルシートの中で最も優先される記述方式です。

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

   p em { color: #f00 } スペースで区切って設定します。
  これは、p要素内にあるem要素に対してのみスタイルを適応させています。
  そのため、他の同じ要素には反映されません。要素の相関関係でスタイルを
  設定する方法です。本誌サイトのトップページでも採用しています。
   なお、この使い方については第23号で予定しています。

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

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

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

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆アクセシビリティについて
Web創生期には、W3Cの存在が危うい時がありました。仕様書の策定がなかなか決
まらずに、あまりにも対応が遅かったのです。そうした中で Web制作者やソフト
メーカーのイラつきはピークに達していました。
 W3Cの仕様書が遅れたことで、当時のソフトメーカーはブラウザに独自仕様を
持ち込んできました。つまりブラウザ独自のタグを利用できるようにしました。
それに多くの制作者はこぞって飛びつきました。(私もその1人です)

 1996〜1999年当時、入り乱れた要素や属性が一人歩きして、あたかもそれが標
準仕様と勘違いした人もたくさんいました。(私もその1人です)
 その後、D-HTML(ダイナミックHTML)が登場した時には、混乱はさらに拍車が
かかりました。MSIEとNetscapeではまったく記述の違う仕様で、当時の制作者は
はからずも2つのHTMLを用意しなければなりませんでした。(私もその1人です)

 1999年12月、混乱とブラウザ間の熾烈な競争が行われている中で W3Cは新たな
仕様書を発表しました。それは全世界の制作者が待っていたHTML4.0でした。
 その前の年にW3Cが発表されていたWAI(Web Accessibility Initiative)のガ
イドライン1.1草案は、多くの制作者やブラウザメーカーにはあまり気にもかけま
せんでした。(私もその1人です)
 その意味でも、HTML4.0 の登場はセンセーショナルなものだったのです。

 独自に作られたタグ、見栄えを構成する要素や属性を使わないように勧告しま
した。また、ハードに影響する物理タグの使用も控えるように勧告しました。そ
れは前年に発表された WAIを実現させる目的が込められていたのです。

 話は変わりますが、私にはたくさんの「障害者」の仲間がいます。目や耳、肢
体が不自由な方がたくさんいます。当時の(今も)インターネット環境は、そう
した人たちには敷居が高く、誰もが自由に閲覧することは困難でした。

 大変高価ですが、特殊な機械を接続して点字で操作するパソコンや、音声によ
って操作するパソコン、目の瞳の動きだけで操作可能なパソコンなどの技術進歩
とその普及で、瞬く間に「障害者」にとってハード、ソフトの両面で支えること
ができる今日、果たしてインターネットのリソースは彼らにも自由に享受できる
のかは、かなり疑問です。

 昨年6月に 米国でリハビリテーション法第508条が施行されて以来、米国にお
ける政府機関のウェブサイトをアクセシブルなものにすることが義務付けられま
した。それは同時に多くの企業も巻き込みました。
 アクセシビリティとはまさにそうした人々が「健常者」と同等の利益を得るも
のです。制作者が狙う見栄えを向上したページ作りと、「障害者」たちが使う非
視覚系ブラウザへのアクセシビリティの両方を満足させる上でも、W3C のガイド
ラインは非常に有効です。そのための手法や技術が、既にたくさん提供されてい
ます。
 なお、Netscape ではバージョン 6.0から独自仕様のタグをはずし、アクセシビ
リティの向上に努めているのは歓迎されることでしょう。

 アクセシビリティについての詳しい説明はこちらから
 http://www.scollabo.com/banban/term/wai.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
 あわせて過去の記事のおさらいも掲載しています。

(今週のおさらい)
http://www.scollabo.com/banban/magazine/backnm_021.html

次回は、テキストについて詳しく解説します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

誤字・脱字・変換ミス・表現欠乏などには平に御容赦願います。なお、マガジン
のすべての記述に誤りがある場合、叱咤と罵声と共に私まで突きつけていただく
と幸いに思います。

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい  http://www.scollabo.com/banban/magazine/
アーカイブ    http://www.scollabo.com/banban/daf/archive.html
講座教材     http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196

配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>
風邪が抜けなくて鼻水ばかりすすっています。そんな状況なので、最近は早めに
寝るようにしています。読者の皆さんからのご質問にお答えするのは、翌日にな
ると思いますので、ご了承ください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
 なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。

      Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



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