ホームページを作ろうヨ!!

初級篇★ページ作りの基礎知識1. HTMLを書いてみよう

VOL1. HTMLの基礎知識

「ホームページの内容は、HTMLで書かれている」と、漠然と知っておられる方は多いと思います。しかし、未だに「HTMLを知らないとホームページは作れない」と思い込んでおられる方があるのは少し驚きです。前章まででお話したようにHP作成ソフトを使えば、全くHTMLについて知らなくてもページを作って発行することは出来ます。これから初めて作ってみようという初心者の方は難しく考えすぎずに、まずワープロを打つ感覚でとにかくページを作ってみられることをお奨めしたいですね。何故なら、ページ表現に使われている様々な手法は、実際にブラウザで見た時に視覚的にどのように見えるのか、これは知識ではなく感覚的に覚える方が遥かに早いからです。

つまり「習うより慣れろ」で、HTMLの詳しい扱い方については、ある程度慣れてきてからスクリプトを見て、「文字色を指定すると、タグはこのように書かれているのか」とか、「画像の挿入はこのタグで指定されているのか」とか、既に感覚的に認知している表現が、HTMLという文字面でどのように書かれているかを逆から見てゆくと、ごちゃごちゃウザい文字の並びについて延々と知識として覚えるより遥かに早く理解出来ます。それにまずもって初心者の方は、いきなりそれほど複雑な画面構成を考えられるということは稀でしょうし、単に画像と文章を並べるだけなら全く問題は起こらないと思います。

そこでここでは、ある程度ページ作りを進めて来て更に表現性を増したいとか、作成画面では思った通りに表示されるのに、ブラウザで見るとヘンに見えるので修正したいとか、どうしてもHTMLを触らなければならないような状況が出て来た時に対処するために、基本的なところをご説明してみたいと思います。

Ⅰ.HTMLを見てみよう

ではまず作成画面の表示を切り替えて、HTMLを見てみることにしましょう。フロントページの場合は、画面の下の方に標準の作成画面からの切り替えタブが付いていますが、どの作成ソフトでもHTMLを編集出来る画面があるはずです。

新規作成の白紙画面を開いた時点で、実は既にこれだけのことがHTMLには書き込まれています。まず一番上に<html>、一番下に</html>と書かれているのがお分かりになるかと思います。この<>で囲まれた文字を「タグ」と呼び、様々な表現を指定してゆく時に、このように内容の始めと終わりをタグで括る決まりになっているのです。つまり、<html>という最初のタグは、「この文書はHTMLによって書かれています」ということで、最後の</html>は、「このHTML文書の終わりです」という意味を伝えています。同様に<head></head>、<title></title>、<body></body>、というように、セットでタグが並んでいるのがお分かり頂けるでしょうか。タグはこのようにセットで並べて間に内容を記載するものと、上の例で<meta>で始まるタグのように、その中に内容を括り込んで単体で使われるものとがあります。

通常、HTMLスクリプトは<head></head>で仕切られたヘッド部分と、<body></body>で仕切られたボディ部分とに分かれていますが、ヘッド部分は主にこのページのドキュメント情報、つまり文字セット、スクリプト言語、作成者などを設定・記述したり、検索エンジン用にキーワードを設定したりする部分で、実際の画面には現われて来ません。そしてその下のボディ部分で書き込んだ内容が画面に表示されることなります。ですから、上の例ではブラウザで見ても何も書かれていない白紙の状態になるわけですね。作成画面上で文字を書いたり画像を挿入したりすると、自動的にここ（<body>～</body>の間）にHTMLスクリプトが記述されてゆきます。それはもちろん後からスクリプト画面上で自由に編集することが可能です。

では、代表的なタグがどのように画面上の表現に反映するかを大雑把に見てゆきましょう。より複雑なタグの設定については、この後の章で順を追って説明したいと思います。

Ⅱ.文字を入力してみよう

ではまず簡単な文を書いてみます。

ご覧のように、作成画面上で文を書き込むと、スクリプト上ではそれぞれの行がで挟まれています。一行ごとにひとかたまりになっているわけです。

今度は書体（フォント）を変えてみました。そうするとスクリプト上ではで始まるタグが挿入されて、それぞれのフォント名が記述されています。ご覧になればお分かりになる通り、

というように、タグ内の""で囲まれた部分だけが、それぞれのフォント名に変えられています。一行めの「○月×日」には何も指定していませんので、見る側の個々のパソコンに標準設定されているフォントで表示されることになります。そして文の最後にはが挿入されています。これはからまでの部分をxxxという書体で表現するという意味になり、xxxの部分を書き換えることによって、どのようなフォントも指定することが出来るのです。

ただし、訪問者のパソコンに指定したフォントが入っていない場合は、それぞれのパソコンに設定されている標準フォントでの表示となりますので、あまり凝った書体を指定しても、実際には訪問者にそのように見えない場合があります。注意して下さい。

このようにしてフォントのサイズや太字、アンダーライン、イタリック体などの指定をしてゆくことが出来るわけですが、それは以下のように書かれています。

１行目は何も指定していない状態。

２行目はサイズを5、つまり18ポイント、ボールド（太字）になるように指定しています。書体やサイズに関する指定は、このようにひとつのタグの中にまとめられますが、書体指定のない場合はというように書くこともできますし、のように別々に書いても構いません。ただし、タグを２つ並べた場合は、最後もと、それぞれのタグに対して終了を指定しなければなりません。また、ボールド体の指定はで、

３行目のようにアンダーラインを付けたい場合はのように指定します。それと、この行は書体が１段階小さい14ポイントで指定されていますので、になっています。

4行目ではアンダーラインに加えてイタリック体で表現していますので、というタグが挿入されていますが、このようにと、タグを並べていくつかの表現を重ねて指定することも出来ます。この場合、タグの前後は問いません。

では次に、ひとつの段落の中で部分的にアンダーラインを引いたり、フォントサイズを変えたりした場合はどうなるのでしょうか。

ご覧のように「どちらにしても明日は」までは書体と文字サイズの指定のみ、「買物に行かなくてはならない」にのみ太字を設定したので、その部分だけがで囲まれています。文字の書体とサイズの指定は「。ああ、」まで変わりがありませんので、ここまで来て初めてで、括られています。そして「忙しい、忙しい、忙しい」に改めて書体とサイズを指定し直し、並べてでアンダーラインを付けています。アンダーラインはこの部分で終了ですのでそこまでで、最後の「。」まで来てラストので先ほどの書体と文字サイズを終了し、次の行ので一段落の終了となります。

以上のことから、ブラウザの画面で表現の内容が変わるたびに、<></>で括られるということがお分かり頂けたと思います。あとはこのタグが表現の内容によって複雑になってゆくだけで、基本の書き方は変わりません。

注 : 但し、フォントのサイズや種類、色は、スタイルシートで指定するのが望ましいとされています。

スタイルシートについては、初級篇2で詳しく解説しますので、いましばらくお待ちください。

Ⅲ.画像を挿入してみよう

今度は画像を挿入した時に、HTMLがどのようになっているか見てみましょう。

<body></body>の間に書き込まれているのが、画像を指定するタグです。このようにタグ内に指定値を書き込むタイプのタグは、それ単体で用いられます。それを囲むは、文字の時と同じように、一段落を定めています。

このように画像を挿入するためのタグは<img src="xxx">となり、この場合も""で囲まれた所に画像のファイル名を記述することで、どの画像を画面に出すかを指定しているわけです。またそれに続くwidth="xxx" height="xxx"は、画像の表示サイズを示し、作成画面上で画像を挿入した場合は、通常その画像本来のサイズがここに記入されているはずです。この値を変えれば、画像表示を大きくしたり小さくしたりすることが出来ます。ただし、本来の画像そのものが変化するわけではなく、あくまで表示サイズが変わるだけですので、小さい画像をあまり大きい値で指定するとぼやけた表示になりますし、大きい画像を小さい値で指定しても、本来の画像容量が変わるわけではないので、ダウンロードには同じ時間がかかります。このことも含めて、画像に対する文字の回りこみ指定など、画像に関する基礎知識は次の章で詳しく解説することにしましょう。

これでHTMLタグというものがどんなものなのか、またどういう決まりで利用されているのか、基礎的なところはお分かり頂けたのではないでしょうか。どういうタグがどういう表現に対応するのかは、本を読んで丸覚えするより、ご自分の作成画面上で実際に作ってみてからスクリプト表示を確認してゆくようにすると、感覚的に覚えることが出来ます。やっぱりココは、「習うより慣れろ」ですね。

私に関して言えば、始めは作成ソフトに頼りきって何も考えずにページを作っていたのですが、後にブラウザによって表示が異なるという問題から、ちょこちょこHTMLを修正するハメに陥りました。やってみると大して難しくもないのに何故「HTML」が難しがられているのかについて考えてみたのですが、中にはコレを「英語」だと思っておられる方があるのではないかという気がします。確かにアルファベットではありますが、これは「英語」ではなく「記号」と考えるべきで、使われているのも簡単な単語に過ぎませんし、数としても、よく使われるものだけなら「記号」として覚えてしまえる程度の量です。画面上の動作とHTMLを見比べていると「こう書くと、こう動く」というのが単純明快に分かってきますので、ちょっとページ作りに慣れたらスクリプト表示も覗いてみると面白いですよ。よく使われる基本のタグについては、以下のページでまとめてあります。参考にして下さい。

基本のタグ1. 背景、テキスト、フォント、段落、水平線

基本のタグ2. 画像とリンク

基本のタグ2. 見出しとリスト

では、次章からは、このHTMLタグも含めて、より複雑な表現方法についてお話してゆきたいと思います。

基礎篇VOL4. FTPでページを発行する <<

>> 初級篇1.VOL.2.知っておきたい画像の基礎知識

2006.5.11.+ 2006.7.14.