隔週金曜日配信 What's New 2005年1月7日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第108号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者が正しい文法と作法を身につけて、魅力的な Webページ作
成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めます。
今週のコンテンツ
■ やさしいHTML (第３回) --- ヘッダの役割と記述法
■ Tips --- 日本語文字コード
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆やさしいHTML --- ヘッダの役割と記述法
今回より具体的なページ作成に関して講座を進行していきます。今回はページ
のヘッダに当たる部分について説明します。ページ作成の上では面白くない部
分ですが、コンテンツを性格に表現して伝達するためには避けて通ることがで
きない課題でもあります。
具体的には <head> 〜 </head> で囲まれた内容を示します。
■ヘッダの役割
ヘッダの大きな役割は、htmlドキュメントの各種情報を Webサーバ (HTTPサー
バ) やユーザエージェント (ブラウザなど) に伝えるためにあります。
具体的には、ドキュメントを記述した文字コードを伝えることで文字化けを
防止したり、そのHTMLドキュメント以外の他のドキュメントを参照したり、作
者の情報などを伝えたりします。
こうした情報は「メタ情報」と呼ばれ、人間よりもコンピュータが理解すべき
情報として位置付けられます。メタ情報は metaタグを用います。
○ metaタグの内容と記述法
metaタグは内容モデルを持たないエンプティタグですので、終了タグはありま
せん。ヘッダに複数配置することが可能です。
文字化けを防止するための記述は以下のとおりです。
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
http-equiv属性 Webサーバに情報のヘッダを送信させる場合に利用します。
content属性 メタデータのプロパティ (属性) の値を指定します。
ここでは、メタ情報としてHTMLドキュメントがテキスト形式で「html」の識別
子 (Windowsでは拡張子と呼ぶ) を示し、その文字コードに「Shift_Jis形式」
を利用していることを Webサーバに伝えています。
(文字コードに関しては Tips を参照してください。)
作者の情報を伝える metaタグは以下のように記述します。
<meta name="author" content="banban">
name属性 メタデータのプロパティを指定します。
なお、この情報は必ずしもブラウザやサーバが正しく解釈するとは限りません。
記述しなくてもまったく問題ありません。
検索サーチ型ロボット (Googleなど) への情報を提供する記述
<meta name="description" content="Webページ作成支援">
<meta name="keywords" content="HTML,CSS,初心者向け,WEB">
<meta name="robots" content="noindex,nofelloe">
name属性の値の意味
description ページ、あるいはサイトの要約
keyword ページ、あるいはサイトの検索キーワード
robots 検索ロボットの検索許可
これらは必ずしもすべての検索サーチロボットに対応しているわけではあり
ません。中には無視してしまうロボットも存在しています。
キーワードはカンマで区切っていくつでも設定できます。
○ linkタグの内容と記述法
HTMLドキュメントと他の文書の関係を示す場合には、linkタグを用います。こ
の linkタグもエンプティタグなので終了タグはありません。
他のドキュメントを取り込んで利用する方法としてスタイルシート文書があり
ます。 (スタイルシートに関する解説はいずれ講座の中で詳しく説明します。)
スタイルシートの取り込み
<link rel="stylesheets" type="text/css" href="sample.css">
rel属性 HTMLドキュメントから見た href属性で示される文書との関係を示す。
type属性 関連する文書の MIMEタイプを指定しブラウザに伝えられます。
href属性 取り込む文書の所在 (URL) を示します。
rel属性とは、その HTMLドキュメントから見た他のドキュメント (文書) との
関係を示します。これを「リンクタイプ」と呼び、前後関係などにも利用され
ます。
rel属性のリンクタイプ
next 次のドキュメントを指定
prev 現在より前のドキュメントを指定
index 索引に当たるドキュメントを指定
map サイトマップに当たるドキュメントを指定
glossary 関連する用語集を収めたドキュメントを指定
○ドキュメントの題名を指定する
HTMLドキュメントの題名 (タイトル) を設定するために titleタグを使います。
metaや linkタグは省略することが可能ですが、titleタグは必ず記述しなけれ
ばなりません。このタグは文書の題名を囲むコンテナタグのため終了タグは必
須です。
文書の題名を設定する記述
<title>初心者のためのホームページ作り</title>
HTMLドキュメントのタイトルは、そのページを端的にあらわす短い言葉で表現
します。一般的なグラフィカルな四角形ブラウザでは、タイトルバーにその要
素内容が表示されます。
ヘッダ部で記述する中で、唯一ブラウザに表示されるものです。
■ヘッダは htmlタグの子タグ
HTMLドキュメントを作成する場合、その最上位タグが html です。この直接の
要素内容が <head> 〜 </head> と、<body> 〜 </body> となります。
なお、htmlタグも、head、bodyタグも省略可能ですが、正統派を目指す上で
も、後々のメンテナンスのためにも、これらのタグを省略せずに記述すること
をお勧めします。
次回の「やさしいHTML入門」では、コンテンツを配置するための作業に入りま
す。本格的な Webページ作成の中心となります。
今回お伝えしたヘッダが、HTMLドキュメントの頭の部分であるならば、コン
テンツを配置するボディ部 (本体) は Webページの主役となるでしょう。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips --- 文字コード
現在 Web上で利用が許されている日本語の文字コードセットは、以下の３種類
となっています。
SHIFT_JIS JISコードをベースに制定され最もポピュラーな文字コード
ISO-2022-JP JIS (日本工業規格) で制定された文字コード (JISコード)
EUC-JP UNIX上で標準となっている文字コード
文字コードとは「含まれる文字を明示した集まり」と言われ、それぞれの国に
よって明確に定義されています。コンピューターは０と１の組み合わせ (２進
数) によって解釈されますが、文字コードはそれぞれの文字を２進数に符号化
された集まりです。それゆえ「文字符号コード」とも呼ばれます。
インターネット上にある Webサーバは、HTMLドキュメントにあるヘッダを解釈
してその文字符号をブラウザに渡しますが、ヘッダに文字コードの記述がない
場合にはブラウザの振る舞いに任されます。時として文字化けを起こすのは、
ヘッダに記述がなく、ブラウザが勝手に解釈してしまうためにあります。
HTMLドキュメントを作成する際に、自分がどの文字コードを使うのか知る必要
があります。Windowsに付属のメモ帳やワードパッドなどは SHIFT_JISとなって
いますが、他のソフトウェアを使う場合、そのソフトのマニュアルやヘルプを
参照して調べる必要があります。
例えば、SHIFT_JIS を使っているにもかかわらず ISO-2022-JPを明示した場合
には間違いなく文字化けします。それは Webでもローカルでも文字化けます。
現在の文字コードと一致した文字コードを明示しなければなりません。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_108.html
次回は、2005年1月24日に配信を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ 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/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2005年7月28日
Copyright(C) 2002-2004 banban@scollabo.com