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

                隔週金曜日配信 What's New 2004年10月1日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  ┏┏┏┏   初心者のためのホームページ作り/Web for beginner
  ┏┏┏         http://www.scollabo.com/banban/
  ┏┏
  ┏              <第102号>

                banban@scollabo.com

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格
 的な Webページ作成に役立つことを目的に配信されております。

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

   今週のコンテンツ
    ■ 正しい文法のために  第5回 --- ヘッダ
    ■ CSS講座 第21回 --- メディア別複合スタイルシート
     ■ 属性の解説(第20回) --- maxlength属性

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

 HTML文書では、大きく分けて2つの構造で構成されます。1つは表示するコン
 テンツを配置するための本体 (bodu要素) であり、もう1つが文書情報を記述
 するためのヘッダ (head要素) 部分になります。

 ■ヘッダ情報
 ヘッダで配置する情報は、HTTPサーバ (簡単に言い換えると Webサーバ) や、
 ユーザエージェント (HTTPを解釈するソフトウェア、ブラウザやプロクシ) な
 どに伝える重要な役割があります。
  HTML文書のヘッダ部では、こうした情報を埋め込むことが大きな役割となり
 ます。

 ■具体的なヘッダの役割
 かいつまんで説明すると、以下のようなことがあげられます。

 1.文書のタイトルを設定する
 2.コンピュータが理解できるメタ情報を定義する
 3.外部文書との関係を示す
 4.非HTMLデータの配置

 □文書のタイトルを設定する
 HTMLでは、title要素によって文書のタイトル (文書の題名) を必ず指定しな
 くてはなりません。つまり、これを省略することは許されていません。
  タイトルは、その文書を的確にあらわした「題名」をつけます。また、ヘッ
 ダで記述する情報の中で、唯一この要素で囲まれた内容が Webブラウザのタイ
 トルバーに表示されます。

  例文:
  <title>初心者のためのホームページ作り</title>

 タイトルは、その他に検索型サーチエンジンにも利用され、検索された結果の
 ページのタイトルとして表示されるものでもあります。その意味でも、タイト
 ルは、文書の内容を反映したものを提示するようにしましょう。

 □コンピュータが理解できるメタ情報を定義する
 メタ情報とは、人間よりもコンピュータが理解できる言語として存在します。
 メタ情報は、meta要素によって定義する空要素です。

 meta要素では、利用する文字コードや作者の情報、検索エンジン向けのデータ
 を記述しますが、必ずしもすべてのソフトウェアや、HTTPサーバに対応するわ
 けではありません。
  また、HTML4.01では特に標準となるメタ情報の属性 (プロパティ) を定義し
 ているわけではありません。

 meta要素の属性とその値
  content  
  メタデータの属性に対する値を指定します。属性は name属性によって定義
  され、その属性と対となります。

  name   
  メタ情報の属性名を指定します。属性は作者や文書などの情報を含みます。

  http-equiv
  HTTPサーバに情報を伝えるための属性で、name属性の替わりに使います。
  文字符号コードを指定したりします。ただし、すべてのHTTPサーバに利用で
  きるわけではありません。

  例文:
  <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
  <meta http-equiv="Content-Style-Type" content="text/css">

  前者の場合には、利用する文字コードを指定します。text/html の後に半角
  スペースをおく場合が一般的ですが、なくても可、他聞に宗教的な意味があ
  るようです。
   後者は CSS (Cascading Style Sheet) を利用する場合に必須です。

  ※ 代用的な content属性と name属性の値とデータ形式は以下のとおりです。

   content属性      name属性
  -------------------------------------------------------------------
  robots     ロボット型検索エンジンに対して設定する。
          検索を許可する場合は、index,follow
          検索を許可しない場合 noindex,nofellow
          (ただし、すべてのロボットに対応しているわけではない)

  author     作者の情報。作者の名前を値とする場合が多い。

  discription  文書の要約を簡潔にまとめた文字列。検索エンジン向け。

  keyword    文書、あるいはサイト内に関するキーワードを設定。カン
          マで区切ることにより複数設定可能。検索エンジン向け。
          (ただし、すべてのロボットに対応しているわけではない)

  Pragma     ブラウザのキャッシュを不許可にする場合、no-cache と
          する。ただし、すべての Webブラウザに対応するわけでは
          ない。

  copyright   著作権をあらわす。ただし、特に著作権を示さなくても、
          公開した時点で著作権は発生する。

 □外部文書との関係を示す
 外部にある他の文書との位置関係や読み込みなどを指定することができます。
 特に非視覚系ブラウザのために現在のページと他のページの位置関係を示すこ
 とが可能であるため、アクセシビリティを向上する意味からも、重要な役割を
 持っています。
  外部文書との関係は、link要素で指定します。

  代表的な外部文書との関係は以下のとおりです。
   prev    現在のページから見て前のページ
   next   現在のページから見て前のページ
   index   索引を示すページ
   map    サイトマップを示すページ
   glossary 用語集のあるページ

  例文:
  <link rel="prev" href="prev.html">  前の文書の所在を提示

 link要素は、外部スタイルシートの読み込みにも利用します。
  例文:
  <link rel="stylesheet" type="text/css" href="defoult.css">

 また、外部にあるスクリプト文書の場合には、script要素で記述します。
 JavaScript文書の場合には、以下のように記述します。
  <script type="text/javascript" src="sample.js"></script>

 □ヘッダで扱う非HTMLデータ
 ヘッダでは主にスクリプトやスタイルシートなどの、非HTMLデータを直接配置
 することが可能です。
  非HTMLデータは、必ずコメントの中で配置するようにします。これは、それ
 らをサポートしていないソフトウェアに対する配慮です。

  スタイルシートの場合の書式
   <style type="text/css">
   <!--
    body { font-size: 1em }
   -->
   </style>

  JavaScriptの場合
   <script type="text/javascript">
   <!--
   document.write("初心者のためのホームページ作り")
   //-->
   </script>

 2つの非HTMLデータの記述法を見てお分かりのとおり、両者ともコメント内で
 配置されますが、コメントアウトする際の記述方が若干異なることに注意して
 ください。


 ■まとめ
 ヘッダではコンテンツを配置するのではなく、あくまでページが持つ情報を配
 置するということがお分かりと思います。しかしながら、すべてのユーザエー
 ジェントや、HTTPサーバに対応するわけではありません。

  今後は、XHTML、XMLなどで既に使われている RFDを中心とした情報発信に置
 き換わるものと推測します。ある意味では、現在のヘッダの情報は廃れていく
 のではないでしょうか。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆Tips --- 文字符号コードについて

 文字コードの選択は少々厄介な問題です。つまり Web制作者がどの種類の文字
 コードを選ぶのかは、基本的に作成に利用するソフトウェアに依存します。
  HTMLを自動的に生成するオーサリングソフトでは、特に悩むことはありませ
 んが、テキストエディタを使ってタグを書き込むときに問題になります。

 日本語を使う場合の文字符号コードは以下の3種類です。
  ・SHIFT_JIS   シフトJIS (Windows標準の日本語コード)
  ・ISO-2022-JP  ISO制定のコード (電子メールで利用されている)
  ・EUC-JP     ENIX系日本語コード

 もし、利用する文字符号が分からない場合には、ご利用になるソフトウェアの
 マニュアルやヘルプを参照してください。実際の文字コードと違うコードを指
 定した場合、間違いなく文字化けを起こします。

 日本語を使うページの場合、日本語が出現する前に文字コードを指定するよう
 にしましょう。不用意な文字化けを防ぐ上でも重要なことです。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

 今回は複数の出力メディア別に設定した1つのスタイルシートを作成します。
 通常、何も指定しない場合は、初期値としてスタイルシートの出力先はすべて
 (all) となっています。

 スタイルシートでは、出力先メディアとして、音声、点字、プロジェクター、
 あるいは携帯用小型通信機、プリンターなどがあります。今回は、音声とプリ
 ンター、およびスクリーンという3つのメディアに対するスタイルシートを作
 成します。

 ■複合する出力メディアへの対応
 各メディアを指定する場合には、そのメディアタイプの冒頭に (@media) アッ
 トマークと media を添えます。
  以下は、スクリーンに対して指定した場合です。

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

 このようにメディアを指定し、、{ と } の間にスタイルシートを記述します。
 この場合、メディアをカンマで区切って複数指定することも可能です。

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

 メディアを指定したスタイルシートは、他のメディアでは適用されません。そ
 の点を含んだ上でスタイルシートを検討してください。

 ■HTMLからメディアを指定する
 ヘッダで外部文書を取り込む際に利用するとき、link要素を用いますが、その
 際に直接出力メディアを指定することができます。link要素の属性でメディア
 タイプを指定します。

 例文
 <link rel="stylesheet" type="text/css" href="print.css" media="print">

 この構文でも、カンマで区切ることにより複数のメディアタイプを指定するこ
 とが可能となっています。

  次回は、プリンターと音声に対するスタイルシートの作成を解説します。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆HTML、XHTML属性の解説 --- maxlength属性

 入力フィールドにおいて、受け付けられる最大の文字数を指定する属性です。

 ■maxkength属性 入力文字数を制限する
 DTD:     すべての文書型定義に適用
 属性値:   数値 (文字数)
 記述法:   <input type="text" maxlangth="8">
 関連要素:  input

 XHTMLの制限: なし

 input要素における type属性の値が text または password のときにのみ利用
 可能な属性です。それ以外の値では無視されます。
  何らかの入力を受け付けるとき、ある文字数を超えて入力されてしまう場合
 に有効な属性となります。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

今回はここまで。

 今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
 てください。
  Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
 しています。あわせて過去の記事のおさらいも掲載しています

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

  次回は、10月15日に配信を予定しています。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆質問・ご意見ははこちらまで→ banban@scollabo.com

 なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
 ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
 と思います。
  ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
 お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
 てくれると思います。

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

  誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。

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

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

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

<えでぃた〜ず・る〜む>

 このところ滅茶苦茶忙しくなり、毎日深夜まで仕事をしています。今週配信の
 メールマガジンのことをすっかり忘れていました。配信2日前に気がつき、あ
 わてて原稿を書き上げました。
  テーマは予定していたものでしたが、あわてていたため満足していません。

 厳しい夏が終わったと思ったら、台風でしたね。被災地の皆様には、心よりお
 見舞い申し上げます。それにしても今年は多すぎます。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

            Copyright(C) 2002-2004  www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□


This page is Valid HTML 4.01! 最新公開日 2004年10月17日
Copyright(C) 2002-2004 banban@scollabo.com