PC・HP道場
(パソコン操作・ホームページ作成支援)

〜インターネットに接続した状態でご覧下さい〜

第2回:HTMLには、頭と体がある?!




道場主:前回はホームページ作りの「イロハ」の、「イ」を教えたので、今回は「ロ」を教えて進ぜよう。
 弟子:ちょっとお待ち下さい。前回のことで少々疑問が生じましたので、前に進む前に教えて下さい。タグというは、必ず半角英数字の小文字で書かなければいけないものなのでしょうか?
道場主:うむ。HTML言語は大文字と小文字の区別をしないから、どちらを使っても良いし、また混ぜて使っても大丈夫じゃ。しかしXHTMLに移行しつつある現状から考えると、小文字で記述した方が良いであろうな。XHTML言語では大文字の使用が禁止されているのじゃよ。今のうちから小文字で記述するクセを付けておいたほうが、後で楽になる事は確かじゃな。
 弟子:そうですか。なるべく小文字で入力した方が良いのですね。でも、HTMLとかXHTMLというのは何ですか?
道場主:実はこのマガジンでワシがおぬしに、まず1番に教えようとしているのは、HTML言語(Hyper Text Markup Language)というものでな。 これが一番簡単にホームページが作れる言語なのじゃよ。しかしHTML言語は簡単に覚えられる反面、構造や定義の仕方にあいまいな点が多く、 ブラウザ毎に見え方が違ったりするなど、ブラウザの種類によっ定義を変えなければいけないなどの弱点もあるのじゃ。 よって、そのようなHTML言語の弱点を改善するべく新たに登場したのが、XHTML言語なのじゃが、 初心者にいきなり難しいものを教えても、頭が混乱するであろう?XHTML言語はHTML言語を覚えてから勉強しても遅くは無いし、 このメルマガもXHTML言語を念頭に置きながら進むので、何も案ずることは無いゾ。
 弟子:はぁーっ、よく解りました。
道場主:では、前に進む。
 弟子:はい。今回も宜しくお願い致します。
道場主:今回は、われわれ人間と同じように、HTMLにも頭と体があるという話をしよう。
 弟子:頭と体ですか?
道場主:そうじゃ。具体的に言うと、ヘッドとボディーがあるのじゃ。これが今日のポイントの1つ。下図を見てもらいたい。


 弟子:前回デスクトップに作成した「index.html」ファイルの中身に、幾つかタグが追加されていますね。<head></head>というタグ、<body></body>というタグが書いてありますよ。
道場主:この<head></head>というタグの間に書かれた文字は、画面に表示されないんじゃ。よってここに作成日や製作者などの、そのページに関する情報を記述することになっておる。 そして画面に表示させたい文字は、すべて<body></body>というタグの間に書くことになっておる。
 弟子:なるほど。だからイという字は<body></body>というタグの間に書かれているんですね。
道場主:そうじゃ。ではここで、1つ問題を出そう。ページの上部に表示されるタイトル部分(この場合は「C:\Document and Settings\Owner\デスクトップ\index.html」と書いてある部分)の文字は、 自由に決めることが出来るのじゃが、それらの文字は<head></head>というタグと、<body></body>というタグの、どちらの方に書くと思う?


 弟子:<head></head>というタグの間に書かれた文字は、画面に表示されないんですよね。<body></body>というタグの間に書くのではないでしょうか?
道場主:ブ、ブーッ!不正解じゃ。まぁ初心者だから仕方の無いことだが、タイトル部分の文字だけは<head></head>というタグの間に書くゾ。 それも<title></title>というタグの間に書く。これが今日のポイントの2つ目じゃな。
 弟子:えっー、どういうことでしょうか?一気に多くのタグが出て来たので、頭が混乱してきました!!
道場主:図を見たほうが早いかもしれないな。下図を見て欲しい。一目瞭然であろう?





【上記のタグの書いてあるページをブラウザで見たときの図】

 弟子:あーっ、そういうことですか。<head></head>というタグの間に、<title></title>というタグを組み込むんですね。
道場主:こういうサンドイッチ的な書き方を、「入れ子」というゾ。この言い方は、よく使われるから、この機会にぜひとも覚えておいて欲しい。 HTMLでは「入れ子」が下図の上のようにグチャグチャであっても受け付けて表示してくれるが、XHTMLでは、きちんとした「入れ子」でないと全く受け付けないから、 はじめから下のような綺麗な「入れ子」でタグを書くよう心がけた方が良いであろう。これが今日のポイントの3つ目じゃ。

【汚い入れ子】 ×悪い例



【綺麗な入れ子】 ○良い例

 弟子:はい。肝に銘じ、必ず具がパンからはみ出ないように心掛けたいと思います(?!)。