超基礎からのホームページ作成 その３
えー、今日はHTMLとCSSの話でもしましょうか。こういう専門用語的なものが出た時点で、「やっぱ無理だわ」と食わず嫌いにホームページ作成から顔を背けてしまう人が多そうなので、実はそんなに、思っているほど難しいもんじゃないですよーといういのに気が付いてもらえる記事にできたらいいなと。「そういうことなら、ちょっとやってみるかな」と思っていただければ幸いです。
HTMLとCSS
ホームページを作るための道具である、ホームページ作成ソフトを利用する場合、作り方によってはHTMLやCSSなんて全然意識しないで完成させてしまうこともできます、たぶん。だから、わざわざHTMLやCSSについて、理解する努力は必要ありません。
でも「ここを、もうちょっとこうしたいんだけど」とか、「これはどうしてこういうサイズになっちゃってるんだろう」と希望や疑問が生じたときに、HTMLとCSSの最低限、本当～に最低限の知識があるだけで、結構どうにかいじれてしまうものです。そして、ホームページを作った後は、大抵どこかしら「こうしたい」「ああしたい」というのが出てくるはずです。
そこで、もうこの際HTMLやCSSの本来の意味や正確な定義なんかは放っておいて、とにかくイメージしやすいように、例えて説明してみることにします。
HTMLって何さ
HTMLというのは、Hyper Text Markup Languageの略で…ウンヌンカンヌン、という説明はしません。顔を背ける原因になってしまうと思いますので。
じゃあ何かといいますと、これはホームページを形成している部品（とその集合体）だと思ってください。ネジとか材木とか、そんなもののイメージで良いです。HTMLという単語自体が難しそうに感じてしまうかもしれませんが、HTMLを見たらとりあえず「部品」と読み替えてください。なんだ、単なる部品のことかよ。
CSSって何さ
これまた Cascade Style Sheetの略で、というのは書きません。CSSは設計図、みたいなものだと思ってください。実際はかなり違うかもしれないですが、とにかくCSSという単語が壁になってしまうと思うので、CSSと出てきたら「設計図」と読み替えてください。これまた、なんだ設計図のことかよ、と。
そうすると、結局HTMLとCSSと出てきても、それらは部品と設計図のことでした、ということで。ホームページは、このHTMLとCSSの組み合わせで作られています。本体はこのHTMLとCSSなのですが、それを私たちが日々利用しているブラウザ（InternetExplorerとか、Firefoxとか、今あなたがこのブログを見るのに使っている道具のことです）が、人間に読みやすいように情報を組み立てて表示しているのです。
部品であるHTMLって、どんなものさ
HTMLの構造
部品であるHTMLには、まず覚えておく必要がある構造は２つしかありません。単体の部品と、対の部品です。単体の部品は、それひとつを使うだけで何らかの効果が出ます。そうですね、クギ、みたいなものでしょうか。一方、それひとつでは使えなくて、かならず対になるものを用意する必要のある部品もあります。こちらはネジとナットのイメージでよいと思います。
単体で使う部品とは？
さて、たとえば、ホームページ上に写真を表示したいなーと思ったとしましょう。写真のファイルの名前がphoto.jpgだったとして、それを例えばこのブログの置き場所（レンタルサーバー）にそのまま置いたとします。置き方とかは、とりあえず今は飛ばします。
この写真をホームページ上に表示させたいとき、使う部品というのは単体の「img」という部品（imgだけ部品と言ってしまうとこの後の説明で混乱される方もいらっしゃるかもしれませんので、img srcという部品と捉えていただいてもよいと思います。）です。imageの略だからimg。HTMLの名称は、大抵こういう英単語の省略っぽいものになっていますので、一度使ってしまえば覚えるのは早いのではないかと思います。
具体的にはどのような記述になるかというと、それは次のようなものになります。
HTMLという部品は、かならず「不等号」のようなカッコでくくられています。この不等号のかたちのカッコの中が、ひとつの部品です。最初のimgというのが、「イメージを表示させろ」という意味だと思ってください。次のsrcというのは、その画像がどこにあるかを指定しているものです。結局、この部品は「http://www.iwamoto-blog.net/photo.jpgという場所にある写真ファイルを表示しろ」という効果を持ったものということになります。
セット（対）で使う部品とは？
一方、かならず部品が２つ対になっているものもあります。たとえば、「この単語をクリックしたら、こっちのページに移動する」という効果を持つ部品です。つまりリンクを張るってことですから、インターネットを利用している人が実はもっとも日々（間接的に）接している部品かもしれませんね。
リンクを張るために使う部品は、「a href」といいます。意味とかはもう考えず、a hrefと出たら脳内で「リンク」と置き換えてしまってください。実際の部品はというと、次のようなものになります。
不等号のカッコでくくられた部分が２つ出てきます。これが、セットで使う対になっている部品という意味です。
この部品がどういう構造なのかというと、まず最初の部品の中にある「a href」というのが「このページを表示しなさい」という意味です。
次に、部品の外に「ブログ」という文字が書かれています。不等号カッコの外側は、部品ではありませんから、つまりこれは部品でもなんでもなくて、ただの文ということです。
さらにその「ブログ」という文章の後ろに、もうひとつ不等号カッコの部品が存在します。ここには斜め線（スラッシュ）が入っていますが、この斜め線のスラッシュが入っている部品は、大抵が「前の部品の命令は、ここで終わりですよ」という意味を表わしています。
これを全体で見ると、最初の部品で「このページを表示させるよ、このページにリンクを張るよ」という命令を出して、その後に「ブログ」という文があり、最後に「さっきの命令はここでお終い」という部品がある、となります。
実際にこのHTMLをブログに表記するとどうなるかというと、次のようになります。
単なる「ブログ」という文が表示されてしまいましたが、リンクが張ってあるのでクリックするとこのブログが表示されるはずです。つまり、部品であるHTMLというのは裏方さんなので、実際に私たちが目にするところには現れてこない、現れるのは部品と部品に挟まれた、単なる文である「ブログ」だけである、ということがおわかりいただけるかと思います。
この構造さえ分かってしまえば、結構いじれるところが増えるはずです。ホームページビルダーなどで完成まで持っていったホームページを、試しにHTMLの表示にして部品を探ってみてください。img srcとか、a hrefなんていう部品はゴロゴロと使用されているのではないかと思います。
覚える必要のある部品は少ない
でも、この２つの部品を覚えたところで、ホームページを作れるわけじゃないでしょ？もっともっと、たくさんの部品を覚えないと結局は意味がないんでしょ？と思われる方もまた多いかもしれません。でも、本当に必要になる部品というのは、かなり限られたものです。それこそ、10個くらい覚えてしまえば事足りてしまう可能性だってあります。
HTML辞典のような書籍を購入してくるのもいいのですが、覚えるための一番の近道は、ホームページビルダーなどで作った自分のホームページのHTMLを表示させて、それをいじってみるということです。数値などが入っている部品は、試しに10倍にしたらどうなる？と変更させてみます。それで何が10倍になったのかを画面で確認すれば、「ああなるほど、そういう意味の部品か」と納得も早いはずです。
もちろん、最初にバックアップを取って、予備のファイルでいじってくださいね？
今日はCSSまで触れる時間が全然なくなってしまいました。設計図であるCSSに関してのアヤシイ比喩的説明については、また後日ということで。
