スタイルシートの技

スタイルシートとは?

HTMLの歴史

元々、「HTML」というものは文書交換が目的で作られたものでしたが、「Netscape Navigator」の登場により、インターネットのすさまじい程のブームが始まりました。 そしてすぐにMicroSoft社が「Internet Explorer」を出した訳です。自分は「Netscape Navigator」というものは現在家に購入したものがありましたが、 Macintoshで当時は使用していて、定価7,800円ほどでした。当時はさほどインターネットはまだ流行り始めた最初の頃だったと思います。

しかし、「Internet Explorer」が無料で配布するというMicrosoft社の作戦に「Netscape Navigator」も対抗しようにも相手の力はあまりにも巨大すぎます。 最後には買収までされてしまいましが、。その間、この2社が競いあい次々と新しいタグ(要素)を追加され、HTMLもそれに伴い何度もバージョンアップして来ました。

しかし、追加されたタグや機能の多くはWebサイトの表現力をアップさせるものばかりでしたが、その簡単さから 色々な方々がホームページを簡単に作成できるようになったのも事実であります。また、この手軽さがより多くの人がホームページを公開できるようになったのは確かです。でも、これは長い目で互換性などを考えると思わぬ落とし穴にハマり兼ねない というのに最近になって色々言われて来るようになりました。

例えば、「見出し」を「h1」要素と「font」要素によってフォントを大きくしただけについて考えて見ましょう。 「h1」要素は「見出し」という意味合いを持つものなので、音声認識ブラウザなどでもきちんと「ここは見出しだよ!」と表現する事が可能になり、ブラウザも理解できます。 しかし、自分が大きく見出しを付けたい時に「font」要素によって ただ文字を大きくしただけだと意味は伝わりますでしょうか?自分では「見出し」と思っていてもブラウザ側は解釈する事ができません。 また、これは「XML」を学ぶ時にも色々と重要になってくると思いますので、知っておくと後でラクになるでしょう。 「ただ単に文字が大きいんだな〜」と解釈してしまいます。ここらへんは非常に意味が分かりにくい事でありますが、 W3CというWeb標準規格団体では「意味合いを兼ねてHTMLページを作る」というのが理想なページであるとされているようです。

実際に自分も真実を知るまでは適当にサイト作りをしていましたが、 「HTML」にもさまざまな規格があり、現在みなさんが最もよく使用しているのがおそらく「HTML4.01」という規格です。

現在、HTML業界はまた元の意味に戻ろうとする動きが奨められています。 つまりそれは、「HTML」では文書構造を示し、レイアウト部分はスタイルシートで行う… という事です。つまり、 あくまで「HTML」でもレイアウト用のタグを用いて、「HTML」では表現できないような部分を スタイルシートで実現しようとしているのはあまり推奨されていない書き方という事になります。

テーブルでレイアウトする変わりに、「border」と言った罫線用のものや、 「float」といったものが使えるようになっています。

自分は、その動きは良いと思うのですが、肝心のブラウザごとによって動作が違う…というので どうしようもないのでは?と思ってしまいます。だったらその要素を使うな!と言ってしまうと、 堅苦しいデザインのサイトが多くなってしまいます。ですから、ブラウザ側も共通の規格でやって頂きたいです。 例えば、IEとNNでおそらく殆どの方はIEを使っているでしょうけど、Unix系の人はNNを使っています。 どちらの規格が正しいのか?というのはありませんが、どのブラウザでも同じ解析手順で表示しない事には この問題は絶えないと思いますし、変に企業同士でタグを増やしたりして張り合ってもサイト制作側は良い迷惑です。 やはり両方考える必要性が出てきますので、今のうちはまだスタイルシートはある意味使わない方がいいかも知れません。 現地点では、HTMLのタグでできるだけ分かりやすく書くのも…と感じます。 先を見越して、各種ブラウザがその動きに流れてくれる事に賭けて現在サイト制作をしていますが、 もし大幅にズレてしまった時は、自分もまた考えを変えるかも知れません。

かと言ってあまりに文法に厳密に… 忠実に従ったページを書く… というのは良い事ですが、 それは格式ばった人間を相手にすると話づらいようにHTMLでも同じ事が言えると思います。 ですから、あまり文法、文法と言うと相手はイヤな顔をしてしまうでしょう。 きっちり書くというよりもきっちり書いた上でみんなに馴染めるようなデザインでサイトをレイアウトして行く… という手法で…と個人的には思ってます。あくまでも個人的ですので、共感できる方の参考になれば嬉しいと思ってます。

スタイルシートの本質を考える

さて、ではどのような目的で利用するのでしょうか? ここはスタイルシートのページなのであまり文書構造のお話は致しません。 例えばテキストを中央寄せにしたい!とか、テキストに色や背景色を付けたりする所謂レイアウトの部分はスタイルシートで実装して行くという事になります。 今まではテーブル(table)でレイアウトしていた方もいらっしゃると思いますが、テーブルというのは本来、「表」を意味するものですので、 ページの意味を考えた時や、音声認識ブラウザなどがうまく解析できません。 これを機に、すべての訪問者に優しいページ、または長生きするようなページを考慮する事を考えてみるのもいいかも知れません。しかし、とは言っても「HTMLって簡単!」と言われますが、 あくまでも「Homepage Builder」を使ったりすれば簡単にワープロ感覚でできますが、実際深くまで勉強しようと思うと難しいものなのです。 あまり、ワープロ感覚に慣れすぎると真の意味が失われてしまいがちですが、最初のうちはそれで良いと思います。いきなり分かる人などいるわけないですので、 まずはそれで慣れてから次へ進めば良いだけの話です。

スタイルシートはレイアウトに特化されたものですので、かなり複雑な事もテクニックさえ身に付ければ 自在に操れるようになります。「HTML」でレイアウトに関する属性(alignなど)が今後廃止されていく傾向にある事を考えて、早く手を打っておきたい方の参考になれば幸いです。 特に「罫線」でのレイアウトの仕方は色々覚えるとかなり高度な事もできるようになります。