高校生のためのホームページづくり（男の子用）

９．スタイルシートでかっこいい見栄えを付けよう！女の子用に変身!!

スタイルシートって？

htmlはページの中での部品（要素）を特別な記号で示すものです。それをマークアップ（＝目印を付けること）と言います。世の中にはいろんなブラウザが存在しますので適切なマークアップがされれば、どのようなブラウザでも対応できます。htmlの歴史の進展とともに構造のみではなくて、同時に見栄えも表現しようとした時期もありました。<font>タグによる文字の大きさ、フォントの指定、色の指定などの指定です。これはhtmlでのページ作りに大きな可能性を開きましたが同時に非効率な文書作成を余儀なくされることになりました。

画面の絶対指定と相対指定

ちょっと難しい言葉なんだけど見栄えについて話すときに一番大切なことが画面の大きさをどうするかなんだよね。ワープロだったら使う用紙はたいていA4とかB4なんだけどホームページの場合は単純ではないのだよ！パソコンの画面は小さい点で字や絵を表しています。新聞をよーく見たら細かい点で字が構成されているのが解ります。パソコンもそれと同じです。普通、17インチのディスプレーだと横1024×縦768の点で構成されています。１つの点はピクセルという単位で表されるのです。15インチなら800×600ピクセルになります。絶対指定というのは画面にかかわりなく全てのサイズを直接指定することです。画面レイアウトする上では絶対指定というのは作り易いのですが、15インチに合わせて作ると19インチなんかでは小さくしか見えません。大型テレビの右半分に何も映ってないとしたらなんか変でしょう？逆に小さなモバイル用のPDAなんかで見ると大き過ぎます。それに対して相対指定というのは画面の大きさを100%としてサイズ指定をしますのでそれぞれの環境にふさわしい基準サイズに沿ってスタイルの表現ができるのです。ピクセルというのは相対指定になっていますが実質は絶対指定と変わりがないです。

何故<font>タグってダメなのか？

例えばこのページのように「見出し３」はブルーで字の大きさは何ポイントということを指定しようとするならばその都度指定しなければなりません。仮にそういうやり方で100ページのホームページを作った場合、後日その「見出し３」の色を修正したくなったとしたら、なんと数100個所を修正しなければならないことになります。それはとても現実的ではありません。ホームページビルダーなどのホームページ作成ソフトでワープロ感覚で作ったページは<font>タグを否応なく生成しますのでとてもおすすめできません。ただし表をつくったり、画像を挿入したりスタイルシートを自動的に書いてくれたり便利なところが一杯あります。要はhtmlとスタイルシートの基本を解れば充分使えます。またワープロ感覚でホームページを作って<font>タグが入るのはしかたがないのですが、わざわざタグ打ちで<font>タグを入力している人もいます。ブラウザはもともと要素ごとに文字の大きさが決められています。それを変える理由などは普通は何もありません。それを小さいと思う人は大きくするでしょうし、大きいと思う人は小さくします。それは利用者が決めることなのです。色を指定する時もなんとなくその場の雰囲気で指定しているように思います。いくら色を指定しても色が表現できないブラウザでは意味がありません。しかしそれが「強調」ということであればなんらかの手段で強調されます。<font>タグが活躍するのはグラデーションくらいだと思います。下の虹のような文字がグラデーションです。

スタイルシートのすばらしさ

私がやっていること

変身の術？

ちょっと試しにお遊びをやってみたいと思います。このページを女の子用に変身させます。上の方のリンク部分をクリックしてみてください。
※タネアカシ　変身前のページも変身後のページも基本的に同じ内容です。変身前のページはhomepage_for_student7.htmlであるのに対して変身後のページはhomepage_for_student7g.htmlです。7の右にgirlのgを付けて別ファイルにしています。ただリンクさせるスタイルシートを女の子用のtama2.cssにしていますので一瞬にして変身するのです。このあたりがまさにスタイルシートの本領発揮というところです。