|
その１・HTML超基礎編
|
| このページを読む前に、サイト制作のためにどんな準備が必要かわからない方は、こちらのFAQをごらんください。 さて、サイトを作るには、それを構成するページを１ページ１ページ作っていかなければいけません。ページの内容は、HTMLという言語を使って記述されています。このページでは、このHTMLの基礎の基礎について書いていくことにします。 |
| HTMLについてのお話の前に、まず多くの人が最初に感じるであろう疑問にお答えしておくことにしましょう。 『ページ作成ソフト（*1）を使えばHTMLを覚えなくてもページは作れるのに、わざわざHTMLを覚える必要はあるの？』 ということです。この問いに対する回答ですが、 『たしかにページ作成ソフトを使えばHTMLを知らなくてもページは作れるけれども、知っていたほうがスムースにページを制作できる、作成ソフトもうまく活用できる。』 と答えておきましょう。 たとえば筆者はDreamweaver4を使用してこのページも制作していて、これは大変優秀なソフトとして知られていますが、生成するＨＴＭＬが必ずしも完璧とはかぎりません。細かい部分で意図したようにタグ（あとで詳しく説明しますがHTMLを構成しているものです）がうまく入らないことがあったりということがあります。そういうときは自分でHTMLコードを編集しますし、Dreamweaverはこうしたコードの直接編集（一般に『手打ちする』などと言われますが）もやりやすいように設計されています。それにHTMLを知っていたほうがソフトの操作の理解も容易になるでしょう。 だいたい、HTMLは非常に簡単です。基本的に「ここは段落ですよ」「見出しですよ」「ここには画像が入りますよ」というふうに文書の構造を記述するだけですから（といいつつ、「きっちりと」書くのは意外に難しいものですが）。HTMLを覚えないであとで苦労するよりは、最初に勉強したほうが得することは多いと思います。 長々しく書きましたが、そろそろHTML自体のお話に移っていきましょう。 |
| *1/Dreamweaverやホームページビルダーのような、Webページを作るためのソフトのことを、この稿では統一してページ作成ソフトと呼びます。 |
| さて、HTMLとはどういう言語かといえば、上にも書いたとおり「文書の構造を記述する」言語です（*2）。そのために、「タグ」というものを用います。 タグとは<>というカッコで括られたもので、一部の例外を除けば（*3）開始タグと終了タグ（/をつけます）をセットで使います。 <タグ>○○○○○○</タグ> ↑こんな感じですね。 タグは入れ子にすることも出来ます。 <タグ１><タグ２>○○○○○○</タグ２></タグ１> という風に。この場合、タグ２はタグ１より先に閉じます。 タグのなかには要素を記述します。HTMLで使う要素にはいろいろな種類がありますが、たとえば段落をあらわすにはp要素を用います。
要素に関しては後でそれぞれ説明していくことにしましょう。とりあえずタグというのはこういうものだ、と思って下さい。 では次にこのタグを使ったHTMLの基本的なカタチを紹介することにします。 |
|
|
*2/現状では、構造のみならずレイアウトの定義もできるようになっていますが……その話はまた後で。 |
HTML文書の基本的なカタチ、というのは、要するに、内容を書く以前に「最低限これは必要」といえるものです。HTMLの文書の骨組みともいえるでしょう。ふつう、ページ作成ソフトを使うと、新規でファイルを作成したときに自動的に書き出してくれます。説明の前にまずそのコードを挙げておきましょう。
ちなみにタグを記述するときは大文字でも小文字でも構いません。ただし、HTMLの後継の規格として据えられているXHTML（*4）ではタグは小文字で書かなければいけないことになっているので、小文字で書くことに慣れておいたほうが良いでしょう。 さて、HTML文書は文書すべてが<html></html>というタグによって括られています。その中に、文書に関する情報を記述するhead要素、実際の文書の内容を記述するbody要素があり、この中にまたタグを用いて文章などを書いていきます。前節で「タグは入れ子にできる」と書きましたが、HTML文書自体がこのようにタグの入れ子の構造になっているわけです。 ところで、より正確には<html>の前に
という一文を入れた方が良いです。これはDTD宣言といいます。じつはHTMLはSGMLという言語によって要素などを定義されている（ややこしいですが）のですが、そのSGMLでのHTMLの定義をしているのがこのDTDです。入れなくても動きますし、ページ作成ソフトでもこのDTD宣言を書き出さないものもあるので（*5）、それほど気にしなくてもかまいません。ただ、入れたほうが「正確な」記述であることは確かです。 |
|||||||||
|
*4/XMLで定義しなおしたHTMLの規格（HTML自体は、上に書いたようにSGMLという言語で定義されています）。基本的にはHTMLと大きな違いはないのですが、あいまいな部分が多いHTMLにくらべると少々厳格な規格になっています。 |
それでは前節で紹介した基本的な骨組みを使用して、非常に簡単なページを作ってみましょう。次のコードを、メモ帳などのエディタにコピー＆ペーストしてみてください。
「タイトル」 「見出し」「文章」とあるところは適当な文をご自分で入れて下さい。それが終わったら、ファイルを「html」あるいは「htm」という拡張子で保存し、ブラウザで開いてみて下さい。 それが面倒、という方のためにJavaScriptを使った簡単なHTML確認プログラムを作ってみました。 「結果を表示する」ボタンを押すと、上のテキストエリアの中に書かれたHTMLを別ウインドウに表示します（当然のことながら、JavaScriptを使用できるようにしないと動作しません）。コードの書き換えもできるので適当に試してみてください。 さて、新しい要素が二つ登場しています。title要素とh1要素です。p要素に関しては、1-2で説明しました。段落をあらわす要素でしたね。 title要素は、<head>〜</head>内に書く要素で（body内に書くと反映されません）、<title>〜</title>でかこった文がそのページのタイトルとなります。 タイトルは、ウインドウの上部やタスクバーに表示されます。ちなみにほとんどのページ制作ソフトはデフォルトでこのタイトル部分に「無題」と入れたHTMLを最初に生成するので、変更し忘れると「無題」というタイトルのページになってしまい非常に格好悪いものです（*6）。タイトルの変更は忘れないようにしましょう。 h1要素は、その部分が「見出し」であることを示す要素です。h『1』ということは『2』もあるのか、といえば、あります。h6まであり、1がもっとも大きな大見出し、h6は小見出しということになっています。ほとんどのブラウザでは（*7）それに伴って文字の大きさも、h1が大きく、以下数字が大きくなる毎に文字が小さく表示されます。タグを書き換えて確認してみてください。 さて、これでとても簡単なページですが作ることができたと思います。これだけでももう、テキストだけのページなら作ることができるでしょう。ただ、さすがにものさびしいので、もっとさまざまな要素を知って見栄えのよいページを作ることを目指すとしましょう。 次章へ続く。 |
|
| *6/実際、Googleなどで検索するとタイトル『無題』のページというのはざくざく出てきます。そういうページはやはり制作者に気配りが足りないのか、たいてい粗雑な作りになっているように思えます。とはいえ、ページ自体ものすごく丁寧にかっこよく作ってるのにタイトルが「無題」というのが一番かっこわるいとは思いますが…… *7/たとえばLynxという、テキストのみを表示するブラウザ（つまり画像などは表示されない）などを使うと、文字の大きさは変わりません。ときおり文字を大きくするためにこのh要素を使う人がいますが、本来の使い方ではないといえるでしょう。「そんなブラウザ使ってる人いるのか」と思うかもしれませんが、実は筆者もときどき使います。サブマシンであるLinuxに入ってるのですが、動作がしごく軽くてテキストサイトなどを見るときには快適なのです。 |