高校生のためのホームページづくり（男の子用）高校生のためのホームページづくり（男の子用）
９．スタイルシートでかっこいい見栄えを付けよう！ ははは 変身した？戻る
htmlはページの中での部品（要素）を特別な記号で示すものです。それをマークアップ（＝目印を付けること）と言います。世の中にはいろんなブラウザが存在しますので適切なマークアップがされれば、どのようなブラウザでも対応できます。htmlの歴史の進展とともに構造のみではなくて、同時に見栄えも表現しようとした時期もありました。<font>タグによる文字の大きさ、フォントの指定、色の指定などの指定です。これはhtmlでのページ作りに大きな可能性を開きましたが同時に非効率な文書作成を余儀なくされることになりました。
ちょっと難しい言葉なんだけど見栄えについて話すときに一番大切なことが画面の大きさをどうするかなんだよね。ワープロだったら使う用紙はたいていA4とかB4なんだけどホームページの場合は単純ではないのだよ！パソコンの画面は小さい点で字や絵を表しています。新聞をよーく見たら細かい点で字が構成されているのが解ります。パソコンもそれと同じです。普通、17インチのディスプレーだと横1024×縦768の点で構成されています。１つの点はピクセルという単位で表されるのです。15インチなら800×600ピクセルになります。絶対指定というのは画面にかかわりなく全てのサイズを直接指定することです。画面レイアウトする上では絶対指定というのは作り易いのですが、15インチに合わせて作ると19インチなんかでは小さくしか見えません。大型テレビの右半分に何も映ってないとしたらなんか変でしょう？逆に小さなモバイル用のPDAなんかで見ると大き過ぎます。それに対して相対指定というのは画面の大きさを100%としてサイズ指定をしますのでそれぞれの環境にふさわしい基準サイズに沿ってスタイルの表現ができるのです。ピクセルというのは相対指定になっていますが実質は絶対指定と変わりがないです。
例えばこのページのように「見出し３」はブルーで字の大きさは何ポイントということを指定しようとするならばその都度指定しなければなりません。仮にそういうやり方で100ページのホームページを作った場合、後日その「見出し３」の色を修正したくなったとしたら、なんと数100個所を修正しなければならないことになります。それはとても現実的ではありません。ホームページビルダーなどのホームページ作成ソフトでワープロ感覚で作ったページは<font>タグを否応なく生成しますのでとてもおすすめできません。ただし表をつくったり、画像を挿入したりスタイルシートを自動的に書いてくれたり便利なところが一杯あります。要はhtmlとスタイルシートの基本を解れば充分使えます。またワープロ感覚でホームページを作って<font>タグが入るのはしかたがないのですが、わざわざタグ打ちで<font>タグを入力している人もいます。ブラウザはもともと要素ごとに文字の大きさが決められています。それを変える理由などは普通は何もありません。それを小さいと思う人は大きくするでしょうし、大きいと思う人は小さくします。それは利用者が決めることなのです。色を指定する時もなんとなくその場の雰囲気で指定しているように思います。いくら色を指定しても色が表現できないブラウザでは意味がありません。しかしそれが「強調」ということであればなんらかの手段で強調されます。<font>タグが活躍するのはグラデーションくらいだと思います。下の虹のような文字がグラデーションです。
1996年に最初のスタイルシートの規格(CSS1)が発表され、1998年により幅広い規格のCSS2が発表されました。1999年のhtmlのバージョン４からは構造と見栄えを完全に分離し、見栄えにはスタイルシートを使うことがホームページの世界的規格を提唱しているＷ３Ｃによって勧告されています。ではスタイルシートを利用するメリットは何でしょうか？上の図を見てください。
【補足】このホームページは最終的に全部で800KBになりました。なんと１枚のフロッピーディスクに収まる軽いサイズです。スタイルシートならではだと思います。
私がスタイルシートでやっていることを簡単にご紹介します。
※スタイルシートで設定できることはまだまだ一杯ありますが、肝心のブラウザの方がまだまだ適応していないのでこれくらいで充分だと思います。特に位置を指定するスタイルは適応していないブラウザが多いのでおすすめできない。同じ理由から「ホームページビルダー」の「どこでも配置モード」は使ってはいけない代表機能です。
どうでしたか？見事に変身できたと思います。元のページへ帰ります。リンク部分をクリックしてみてください。