個人が気軽に「ホームページ」を持つようになって結構経ちます。無料ホームページスペースのサービスなんかもかなり増えてきましたし、有料のとこでもリーズナブルなのが多いです。そんなわけで、自分でホームページを作りたいと思った人も多いと思います。そう思ったまではいいけど何をどうしたらいいのかサッパリ分からない人もいるんじゃないでしょうか。
そこで、当講座ではいわゆる「ホームページ(以下Webサイト)」の作り方を説明しようと思います。HTMLとCSSを使ってWebサイトを作成します。「タグって何？」って人から、「CSSを使ってみたくなったんだけど」という人まで是非どうぞ。
ちなみに、当講座では「XHTML 1.0 Strict」を取り扱います。「HTML 4.01」や「XHTML 1.1」を学びたい人、フレームを使ってページを作成したい人は他のサイトで学んでください。
Firefox、Safari及びMacintosh版Internet Explorerで表示確認を行っています。Windows版Internet Explorerでもたぶん平気だとは思います。もし読むのが困難だった場合、御手数ですがCSSを切るなり、他のブラウザを使うなりしてください。ちなみに当講座で学ぶに当たってはFirefoxの導入をオススメしておきます。
作成に入る前に「HTMLって何？」ってことについて少しだけ考えてみましょう。興味ない人は読まなくていいです。知っておいた方がいいんですけど、別に知らなくても平気なので。
HTMLとは「HyperText Markup Language」の略です。直訳すると「ハイパーテキストをマークアップするための言語」ってところでしょうか。ようするに普通の文書をハイパーテキストにするための印の付け方(マークアップ法)を定めた約束事ってことです。
「じゃあハイパーテキストって何？」って疑問が当然出てきます。ハイパーテキストは直訳すると「超テキスト」ですね。テキストを超えた高機能テキストがハイパーテキストって訳です。それじゃ一体どの辺が高機能なんでしょうか？
文書を読んでいる途中で、ある語句に関連する文書を読みたいと思ったとします。ハイパーテキストはこういったときにその語句から直接目的の文書を呼び出す機能を持っています。これをハイパーリンクと呼びます。つまりハイパーリンク機能付きのテキストがハイパーテキストなのです。
今度は「マークアップ」について説明します。「人が文書を読みやすいようレイアウトするためにタグ付けすることでしょ」とか思ったそこのあなた、それは違います。むしろコンピュータが読みやすいようにするためにマークアップするんです。ただ単に字を大きさを変えたり、色を変えても、コンピュータはどこが見出しでどこが段落なのか、文中のどこが強調されているのか、などの情報を理解できません。
そこでマークアップするわけです。段落はp、見出しはhn(n=1-6の整数)とコンピュータが分かるように印を付けること、それがマークアップなんです。
まとめると、「ハイパーリンク機能を付けて、文書をコンピュータで処理出来るように印を付ける言語」がHTMLってことになります。
そんなわけで、例えば文字をただ大きくしたいがために<h1>タグを使ってしまうと、コンピュータが間違ってそこを見出しだと思ってしまいます。これでは本来のHTMLの目的から外れてしまいます。だから、HTMLでは文書の構造のみを書いて、見栄え(飾り付け)はスタイルシートでやりましょうってことが推奨されているんですね。
そんな理屈はおいといて。「当ホームページのデザインは全てCSSで行っています」ってトップに書いたら何となくカッコイイと思いませんか？ スタイルシート使ってみませんか？