サイト構造
「はじめに」を読んで頂けたら、では、このページでＨＴＭＬ、スタイルシートについて解説していきたいと思います。
・・それって一体何のことぞや？という方は、此処の説明をさらっと読んで、だいたいのつかみをしておくのをお勧めします。
■ＨＴＭＬとは？
さて、ウェブサイトというものは、ブラウザ上（インターネットで、HTML情報を表示・閲覧する為のソフトウェア：マイクロソフト社のInternet Explorerや、ネットスケープ社のNetscape Navigaterなどが代表的）において、HTML文書ファイル（フォルダは.htm、または.htmlの拡張子のファイル）であるページ同士がリンクで繋がれ成立しています。
そのウェブページ（ＨＴＭＬ文書ファイル）を構成するおおもとであるプログラミング言語の事が、Ｈｙｐｅｒ Ｔｅｘｔ Marcup Language（ハイパーテキストマークアップラングエッジ）、略してＨＴＭＬ、というものです。
パソコンを使っている人なら一度は聞いた事があるのではないでしょうか。
このＨＴＭＬという言語の書き方は、ワープロの書式設定と要領は似たような物なのですが、この大きな特徴は普通のテキストエディタ、つまりWindowsに付属しているメモ帳などの機能で編集が可能である点です。（勿論ビルダー等のソフトでも編集は可能です）
実際どんなものなのか見てみると、１つのページを成り立たせる為に最低限の必要な情報を書き込んだ最もシンプルなものでは、
<html>
<head>
<title>タイトル</title>
</head>
<body>
ここに本文
</body>
</html>
と、こういった感じで表記されます。
これがブラウザにアップされると、ページ上部の青いタイトルバー（head）には「タイトル」（title）、ページには何もない真っ白なスペース（body）に「ここに本文」と書かれただけのページが表示されます。
こんな文章初めて見る、という方にとってはややこしい英単語やら記号やらが混在していて暗号同然かと思いますが、日頃皆さんの利用しているウェブページは、実はこんな文書によって構成されているのです。
大抵、ウェブページ閲覧中に右クリックをし、表示されたメニューから「ソースの表示」を選択すると、そのページのＨＴＭＬソースが簡単に見られる様になっていますので、参考までに覗いてみても良いでしょう。（けれどそれには沢山の情報が追加されているのでずっと複雑になっているはず）
大半のウェブページの基本構造はhtmlで始められhtmlで終わるこのプログラム形式をとっています。
こういったＨＴＭＬの規則に従って書かれた文書の事を、先に述べた「ＨＴＭＬ文書」、あるいは「ＨＴＭＬソース」などと呼びます。
半角英数字で記述されたhtmlや headなどの英語のスペルがもとになった単語を「タグ名」、それを<タグ名>の記号で囲んだ<html>や <head>などを「タグ」、といいます。
<html>〜</html>の様に、開始タグと終了タグが一対となって成立しています。この間に表示したい文書を設定する機能をもった用語を記述すると（例えば、<BR>と入れるとその場所で文を改行してくれます）、これがＨＴＭＬにおいて直接的にその文書の構造を指定してくれます。
ワープロで言うところの書式設定のようなことををしてくれるということです。
それぞれのタグの効力とその応用に関しては「ＨＴＭＬ」の方で解説していますのでそちらをご覧下さい。
要するに、これはウェブページ用のプログラムを書いたＨＴＭＬ文書だぞ、と宣言したり、ここからあそこまで文を書くぞ、この場所で改行するぞ、表や画像を挿入するぞ、といった指示をする役割を担っているのです。
つまり上の文章だと、
<html> →これはＨＴＭＬ文書です
<head> →タイトルバー
<title>タイトル</title> →ページのタイトルを此処に描いて下さい
</head>
<body> →本文を書く場所です
ここに本文
</body> →本文ここまでです
</html> →以上
と、いう内容を表していることになります。
■スタイルシートとは？
ではもうひとつ、Style Sheets、スタイルシートとはＣＳＳ（カスケーディングスタイルシート）とも呼ばれ、上で述べたＨＴＭＬと併用して、サイトデザインの更なる見栄えアップを図るものです。
ウェブの発展によって、ただワープロと似たような簡素な構成では物足りず、やはりデザインの美しいより高度なサイトが求められ、ウェブページのビジュアル性がどんどん追究されるようになりました。
しかし、ページを作るＨＴＭＬとはもともと「文書の論理構成を定義する言語」として開発されたものであるため、それ自体が持っている機能といえばウェブ上におけるワープロ記述方法と大差なく、ニーズに十分に答えうるデザインを可能としていくのは困難でした。
その上、そんな機能で色々とページ細工に凝ることは、ＨＴＭＬ本来の目的から逸脱してしまいます。
このようなこんがらがった状況を整理する為に、ウェブ界の大御所であるＷ３（World Wide Web）という団体は、「ＨＴＭＬとはあくまでウェブにおける文章の基礎を定義する為のものなので、そのデザインに関するプログラムの記述は新たに『スタイルシート』、という表現を用いて区別をしましょう」という勧告を行いました。
このスタイルシートも一見すればＨＴＭＬと同じような半角英数字の文書の連続で作られているものです。
記述に関しては「スタイルシート」のページに書いてあるのでそちらを参照して下さい。
要するにスタイルシートはＨＴＭＬの基本的要素に加えて、フォントのサイズ・カラーや行間、余白の指定などデザインの工夫が簡単に出来る、ＨＴＭＬの発展形にあたるようなものです。
つまりＨＴＭＬの基本を理解してさえいればそんなに変わったことはありません。
これを両方一緒に上手に使いこなす事が、センスの光ったより魅力的なホームページ作成への大きなポイントと言えるでしょう。
■おわりに
ＨＴＭＬ、スタイルシートに取り組む上で必要な基礎知識としてはこの位です。
しかし解説している私自身勿論プロフェッショナルではないので、細かい説明を端折ったり、要領を得ず不明瞭な部分が多々あるかと思いますが、その点はどうかご容赦下さい。
ＨＴＭＬやスタイルシート、またホームページの詳しい立ち上げ方やその他様々な工夫技についてなどの説明を取り扱っている高度なサイトさんは他にも沢山あるので、色々と回って調べてみるのも良いと思います。
また、これらでデザインやレイアウトを行なうだけでなく、ページ飾り付け用の素敵な画像などをフリー配布しているサイトさんも探すとこれまた沢山あるので、それらを自分のセンスで付け加えてみるとより一層ページのレベルが高まると思います。
ＨＴＭＬソースもその解説も、文字の羅列に頭が痛くなってしまいそうですが、どなたでも初めたばかりはそんなもののはずです。
ちょっとしたチャレンジ精神をもって、仕組みさえ理解してしまえれば順応するのに難しい事は無いと思います。
あとは、根気強く色々と実践してみて、慣れてしまうのが一番です。
さて、心と頭の準備が出来たなら後は「ＨＴＭＬ」「Style sheets」のページでテクニックを学んでみましょう。
■ちなみに
折角だから身に付けた技術はすぐに試してみたい、という方の為に、ＨＴＭＬソースを記述して表示ボタンをクリックすれば一瞬でアップした状態の具合が確かめられる、便利な「タグ練習場」もコンテンツの中にご用意しています。
やはり説明を眺めているだけでなく、自身の手で打ち慣れてみない事には完全に使いこなせたとは言えません。
ご自分のホームページに取り掛かる前に、是非活用してみて下さい。
戻る