HTML なんてへっちゃらさ！

by Masanori HATA

HTML とは Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略です。ハイパーは超越するという意味。リンクで自由自在に他の場所や文書にジャンプできるからです。つまり、ハイパーテキストで、超越ジャンプできる文書と言う意味になります。マークアップランゲージというのは、マーク（目印）をつけることによる言語（＝コンピュータ言語）ということです。つまり、普通の文章に目印を加えることで、ハイパーテキストとしての意味をもたせています。つまりは、HTML というのは、テキストに毛（マークアップ）が生えただけのものなのです。

<p>＝paragraph（パラグラフ：段落）の意味！

<p>………………（第 1 段落の文章）………………</p>
<p>………………（第 2 段落の文章）………………</p>
<p>………………（第 3 段落の文章）………………</p>
<p>………………（第 4 段落の文章）………………</p>

ところが、「インターネットのホームページ」というイメージが先行すると、なにかとても難しいような気がしてしまいます。確かに、ホームページの中には、文書に毛が生えただけとはちょっと違う変わったものもあります。しかし、それは HTML を複雑に組み合わせることで、結果的にそのような凝った状態を得ているだけで、根本の HTML そのものは原理的には「テキストに毛が生えただけ」であることに違いないのです。一つ一つの原理さえ理解していれば、それを組み合わせた技もそれほど難しくなくわかるようになります。

ミミズがのたくるイメージ画像を避けてのたくるミミズのイメージ

そして、「基本的には文章である」ということを忘れないで下さい。絵とは違うのです。文章は「線」であり、絵は「平面」です。この違いさえわかっていれば大丈夫です。つまり、HTML の場合「どこに何を置く」というような感覚ではなく、「線が右端で折り返されてミミズのようにのたくり、上から下に向かって折り重なっていく」というイメージが正しいのです。たまに、四角い領域をもった画像が埋め込まれることがありますが、その画像を避けたりしつつ、文章の線がのたくって画面を埋めていきます。それが HTML の正しい姿です。

（それに対して、Adobe Illustrator や Adobe PageMaker などは、絵的な感覚が主体なので、平面の中のどの場所になにを配置するかということが重要になります。文章ですら、平面の中のある領域に流し込むことになります。この違いを知っておくといいでしょう）

巻物のイメージ現在のところ、英語用に開発された技術が出発点になっているので、横書きが基本です。そして、本とは違ってページの区切りがあるわけでなく、横書きで縦に伸びてゆく巻物に文章を書いていくような感覚です。（それに対して、日本の巻物なら横向きに伸びて行きます。）

ここまでのことをやるのに必要な HTML タグは、たった 2 種類だけです。段落の区切りを示す <p> タグと、画像を埋め込む場所を示す <img> タグだけ！　<p> タグは、段落の範囲を指定するので、頭と終わりを <p>と</p> で囲ってやります。／（スラッシュ）の入ったタグは終了タグを意味します。img の場合、範囲を示すわけではないので、終了タグはありません。<img> タグの置かれた場所に、画像が読み込まれます。

さらに <img> タグの使い方として、画像ファイルを指定しなければなりません。それは <img src="ファイル名"> と書くだけです。src="" として、"" でファイル名を囲います。注意として、HTML では、文章以外のタグの部分は、全て英数字で書きます。それも半角です。全角で “ ” の記号を書いてしてしまったらだめです。そして、HTML で常識となるのが、画像ファイルは JPEGジェイペグか GIFジフを使うということです。それ以外の Illustrator 用のファイル（AI）や Photoshop 用のファイル（PSD）のようなものは使えません。
これが img タグの使い方の基本の全てです。

単純に <img> タグを文章の中に書いただけだと…

↓

こんな風になってしまいます。なぜかというと、はじめの方の説明を思い出してみて下さい。HTML は文章が基本なので、すべてミミズがのたくったような行が折り返されているだけだからです。行の中に絵が埋め込まれてあったとしても、一つの文字を表示するのと同じように扱われてしまいます。

この場合はとりあえず気にしないで下さい。基本的にはこういう感覚のものなんだと思ってしばらくは慣れる方を先に優先しましょう。もう少しレベルアップしてくれば、絵の横に文章を流し込んだりということもできるようになれます。でもまずは、HTML の基本的な感覚に慣れることを優先して下さい。

リスト（箇条書き）

文章でよく使う典型的な構造として、リスト、すなわち箇条書きがあります。箇条書きを HTML で書くには、<ul> を使います。終了タグ </ul> もセットです。箇条書きの全体の範囲を <ul></ul> で囲い、さらに一つ一つの事項を <li></li> で囲って表します。

<ul>
<li>お姉さんの血液型はＢ</li>
<li>お姉さんの干支は丙午</li>
<li>お姉さんの星座は双子</li>
</ul>

↓

お姉さんの血液型はＢ
お姉さんの干支は丙午
お姉さんの星座は双子

li とはlist item（リストアイテム）の意味で、リストの一つ一つの事項を表します。ul というのはunordered list（番号なしリスト）の意味です。

番号なしリストがあるということは、番号付きリストもあります。それが ol (ordered list：番号付きリスト) です。

<ol>
<li>お姉さんの血液型はＢ</li>
<li>お姉さんの干支は丙午</li>
<li>お姉さんの星座は双子</li>
</ol>

↓

お姉さんの血液型はＢ
お姉さんの干支は丙午
お姉さんの星座は双子

以上で基本的なリストの説明は終わりです。ずいぶんと本格的になってきました。でも、それほど難しくないでしょ？　あと、これ以外に何があるかと言うと、ハイパーリンクと表だけ。それで基本的なタグは全て終わりです。それからあとは、格好いいページを作るための細かい技に入っていくことになります。しかし、基本さえ押さえておけば、あとは自分でもわかるようになるし、少しづつ経験を積んでいくだけなのです。

ハイパーリンク

普通、字が青く表示されて、下線が引いた状態になっていて、クリックするとジャンプするのがリンクです。<a></a> で囲った部分がリンクになります。そしてただ <a> タグを使うだけじゃなくて、img の時と同じように、リンク先のファイルを指定しなければなりません。img の時は src="ファイル名" でしたが、a の場合は同じように、 href="リンク先のファイル名" となります。つまり、

という感じです。では試しに、先程 img のところで使ったお姉さんの似顔絵ファイルをリンク先ファイルに指定してみましょう。リンク先は、同じ HTML ファイルでも構いませんし、JPEG ファイルや GIF ファイルのような画像ファイルでも構いません。どちらにしてもリンク先のファイルにジャンプして表示されることになります。

僕の<a href="tutorial-oneesan.gif">お姉さんの似顔絵</a>です。

↓

僕のお姉さんの似顔絵です。

リンクをクリックしてみてください。実際にリンク先の似顔絵の画像にジャンプし、表示されましたね。これがまさしく、ハイパーリンク、ハイパージャンプなのです！

このリンク先のファイル名は、インターネット上のあらゆる場所のファイルを指定することが可能です。例えば、ヤフーなら、href="http://www.yahoo.co.jp/"　という風にインターネット上のアドレスを指定すればいいのです。

<a href="http://www.yahoo.co.jp/">ヤフー</a>です。

↓

ヤフーです。

この http:// で始まるインターネット独特のアドレス表記を URI（ユー・アール・アイ）と呼ぶこともあります。しばらくインターネットを使っていれば、すぐに慣れますので、難しくはありません。

さらに、<a></a> で囲うのは、文字だけでなくて画像でも OK です。
（この例のリンク先が tutorial-loveletter.html というファイルになっていることに注意。）

↓

以上が、ハイパーリンクの基礎の全てです。

さあ、残りは、表だけです。これで基礎が全て終わりです！

表（テーブル）

表は基礎的な HTML の感覚をつかむ上で一番難しいタグです。でも、今までやった基礎的感覚を思い出せば理解できるようになります。まず、HTML は文章が中心であり、ミミズがのたくったような、ソバを積み重ねたような感覚で描かれているということです。これさえ思い出せば、あとは、リストの書き方とほとんど同じです。まず、全体を始まりと終わりのタグで囲います。

table（テーブル）というのが英語で言うところの表の意味です。表は、横の行と縦の列でできています。横書きが基本ですから、感覚的には、横の行が折り重なったイメージになります。

この状態を HTML にするとこうなります

リストにとてもよく似てますね。表の場合、さらに縦の列もあるので、さらにここからあと 1 段階だけ複雑になります。
（tr というのは table row の略です。row は「行」という意味です。）

各行の中の列は <td></td> で区切られます。
（td は table document の略です。各列のドキュメントを指します。）

これで全て終わりです！　結果を見てみましょう。（border="1" は表の区切り線を見えるようにするために付け加えました。table の基本とは関係がありません）

１列目	２列目	３列目
１列目	２列目	３列目
１列目	２列目	３列目

おめでとう！　これで HTML を使いこなす上での全ての基礎となるものを一通り学び終えました。これらの基本的感覚が身に付いていれば、応用となる HTML の技を習得するのも、きっと一番早い道をたどれるに違いありません。

最後に

これらの基礎を元にして、後は、他の色々なタグの使い方や、細かい指定テクニックを実践を通じて憶えて行くしかありません。しかし、ここで解説した基本的な感覚がわかっていれば、参考書などを片手に、どうにかこうにか自分で HTML を作成できると思います。是非、チャレンジしてみて下さい！