隔週金曜日配信 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 を中心とした文法が主体となって
います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める
ようになります。
今週のコンテンツ
■ 正しい文法のために 第５回 --- ヘッダ
■ CSS講座 第21回 --- メディア別複合スタイルシート
■ 属性の解説（第20回） --- maxlength属性
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆正しい文法のために --- ヘッダ
HTML文書では、大きく分けて２つの構造で構成されます。１つは表示するコン
テンツを配置するための本体 (bodu要素) であり、もう１つが文書情報を記述
するためのヘッダ (head要素) 部分になります。
■ヘッダ情報
ヘッダで配置する情報は、HTTPサーバ (簡単に言い換えると Webサーバ) や、
ユーザエージェント (HTTPを解釈するソフトウェア、ブラウザやプロクシ) な
どに伝える重要な役割があります。
HTML文書のヘッダ部では、こうした情報を埋め込むことが大きな役割となり
ます。
■具体的なヘッダの役割
かいつまんで説明すると、以下のようなことがあげられます。
１．文書のタイトルを設定する
２．コンピュータが理解できるメタ情報を定義する
３．外部文書との関係を示す
４．非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>
２つの非HTMLデータの記述法を見てお分かりのとおり、両者ともコメント内で
配置されますが、コメントアウトする際の記述方が若干異なることに注意して
ください。
■まとめ
ヘッダではコンテンツを配置するのではなく、あくまでページが持つ情報を配
置するということがお分かりと思います。しかしながら、すべてのユーザエー
ジェントや、HTTPサーバに対応するわけではありません。
今後は、XHTML、XMLなどで既に使われている RFDを中心とした情報発信に置
き換わるものと推測します。ある意味では、現在のヘッダの情報は廃れていく
のではないでしょうか。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips --- 文字符号コードについて
文字コードの選択は少々厄介な問題です。つまり Web制作者がどの種類の文字
コードを選ぶのかは、基本的に作成に利用するソフトウェアに依存します。
HTMLを自動的に生成するオーサリングソフトでは、特に悩むことはありませ
んが、テキストエディタを使ってタグを書き込むときに問題になります。
日本語を使う場合の文字符号コードは以下の３種類です。
・SHIFT_JIS シフトJIS (Windows標準の日本語コード)
・ISO-2022-JP ISO制定のコード (電子メールで利用されている)
・EUC-JP ENIX系日本語コード
もし、利用する文字符号が分からない場合には、ご利用になるソフトウェアの
マニュアルやヘルプを参照してください。実際の文字コードと違うコードを指
定した場合、間違いなく文字化けを起こします。
日本語を使うページの場合、日本語が出現する前に文字コードを指定するよう
にしましょう。不用意な文字化けを防ぐ上でも重要なことです。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座 --- メディア別複合スタイルシート
今回は複数の出力メディア別に設定した１つのスタイルシートを作成します。
通常、何も指定しない場合は、初期値としてスタイルシートの出力先はすべて
(all) となっています。
スタイルシートでは、出力先メディアとして、音声、点字、プロジェクター、
あるいは携帯用小型通信機、プリンターなどがあります。今回は、音声とプリ
ンター、およびスクリーンという３つのメディアに対するスタイルシートを作
成します。
■複合する出力メディアへの対応
各メディアを指定する場合には、そのメディアタイプの冒頭に (@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
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
このところ滅茶苦茶忙しくなり、毎日深夜まで仕事をしています。今週配信の
メールマガジンのことをすっかり忘れていました。配信２日前に気がつき、あ
わてて原稿を書き上げました。
テーマは予定していたものでしたが、あわてていたため満足していません。
厳しい夏が終わったと思ったら、台風でしたね。被災地の皆様には、心よりお
見舞い申し上げます。それにしても今年は多すぎます。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応
じておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
自由に使っていただいても差し支えありません。
Copyright(C) 2002-2004 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2004年10月17日
Copyright(C) 2002-2004 banban@scollabo.com