XHTML/CSS・トップ | XHTML/CSS・目次

●スタイルシートとは

 スタイルシートとは簡単に書くと、Webページのデザインとレイアウトを定義したものとなります。Webページ作者のスタイルシート、ユーザーが作成したスタイルシート(作っていればですが)、ブラウザに組み込まれているスタイルシートの3種類があります。HTMLではスタイルシートと言えば、CSSのことを指しているのが一般的ですが、厳密には区別されます。XMLではCSSのほかに、XSLのスタイルシート機能を実現するためのマークアップ言語があります。

 CSS(Cascading Style Sheets=カスケーディング・スタイルシート)とはウェブの標準化団体W3C®(World Wide Web Consortium)によって勧告され、HTMLで記述された文書にレイアウトスタイルを定義するためのマークアップ言語のことです。

 まとめると、スタイルシートがもっとも広義語で、CSSとXSLはスタイルシートの機能を持たせたマークアップ言語としての種類ということになります。どちらもW3Cによって、仕様が勧告されました。また、外部に置いたCSSのスタイルシートのことをCSSファイルと定義付けられます。CSSのスタイルシートの利点と意義を簡単にまとめます。

■複数のページに適用できる

 最大の威力と長所が複数のページにデザイン、レイアウトを共有させることです。すなわち、CSSを外部のファイルとして切り離し、HTMLファイルからリンク要素で結び付けることによって、複数のページでスタイルを共有させることができます。スタイルシートのスタイルを変更することにより、一度に複数のファイルのデザイン、レイアウトを変更することができます。結果としてWebページの更新とメンテナンスが非常に楽になります。また、HTMLファイルを新規作成するときもリンクでCSSファイルと結び付ければ、あらかじめ、用意したデザイン、レイアウトを簡単に適用することができます。CSSのスタイルシートがサポートされているホームページ作成ソフトによってはCSSファイルを変更するとちゃんと更新情報として認識され、アップロードの対象となります。(ならない場合はFTPツールで転送する)欠点はスタイルシートの中に記載されたクラス名、ID名を変更すると、HTMLファイルに記載されたクラス名、ID名を変更しなければならないことでしょうか。従って、クラス名とID名をスタイルシートの中に配置するときは変更しない名前を付けることです。

※クラス名、ID名については別項を参照にしてください。

■ダイエット

 HTML文書からデザイン・レイアウトの見栄えの要素を切り離すことにより、HTML文書のソースが実にスマートになります。従って、HTML文書そのものを書くのが楽になります。

■表示が速い

 HTMLファイルの容量が減り、軽くなったことでWebブラウザでの表示が高速になります。表示が少しでも高速になればそれだけユーザーのストレスが少なくなります。これは携帯電話対応サイトのページ作りにも言えます。携帯サイトのページは1ページの最大容量サイズは5KBの2KB以内が推奨されています。使用できる要素や属性が限られているとは言え、少しでも容量を抑え、表示を速くするためにはスタイルシートの利用が効果的なのは同じです。

■凝ったデザイン

 デザイン、レイアウトの見栄えの要素をHTMLの構造的な要素と区別し、分離することにより、凝ったデザインを構築することができるようになりました。高度に、より詳細にデザインを構築できるようになります。

■アクセシビリティ

 CSSは凝ったデザインありきではありません。第一に考りょされるべきはウェブ・アクセシビリティです。ここで言う、アクセシビリティとはすべての人に優しいウェブ・デザインを構築することです。例えば、訪れるユーザーの中に弱視者もいることを想定し、極端に小さいフォントサイズを使わない、ブラウザメニューの「文字のサイズ」を選択しても文字が大きくならないようなフォントサイズの単位を適用しない。(指定する単位に絶対値のような固定的な値を使わない)そのほか、スタイルシートとは直接関係ありませんが、視覚障害のある人のために音声で読み込めるように画像ファイルにテキストとして読み込めない文字を埋め込まない。画像ファイルを配置したときは可能な限り、代替テキストの情報を添えてあげる。それくらいの配慮はできるはずです。テキスト情報を添えるとロボット検索エンジンにも理解しやすくなります。それは立派にSEO対策となっています。

 もし、皆さんの中にサイト作りとして、アクセシビリティを考りょする考えや必要性を考えていない方は残念ながらスタイルシートを学んでも意味がありません。それはCSSの生い立ちと歴史が証明しています。特にWebに携わる人、企業サイトの運営者、Webデザイナーにとって、アクセシビリティは重要です。

■次世代のスタイルシートにも対応

 現在、企業ベースのHTML文書はXMLへ移行しています。そして、XMLにはXSL というスタイルシートがあります。XML文書の作成にはそれなりの環境とツールが必要になりますが、それを別にしても将来的に今現在あるウェブの世界のすべてのWebページがXMLに移行するとも思えません。仮に移行したとしてもCSSのスタイルシートは生き残るでしょう。2つあるとして、人はすでになじんでいる、使い慣れているスタイルシートを選ぶのは自然の流れと言えます。従って、次世代の仕様になってもCSSのスタイルシートはなくならないでしょう。もちろん、HTMLをXMLに適合するように再定義されたXHTMLにもCSSは対応しています。

■ まとめ

 わが国においては2004年6月20日にウェブ・アクセシビリティのJIS(ジス)規格が制定され、CSSのスタイルシートの使用が推奨されました。また、2005年度前半(3月頃の情報)、マイクロソフトは次期OSのリリース前に予定のなかったIEの新バージョン(IE7)を公開予定であることをリリースした。これは現在、爆発的に普及しているFirefox (執筆時点の日本語版 Version 1.0.4)のブラウザの影響を受けているのも確か。今のところ、新バージョンのIEはCSS2の完全サポートを明言していませんが、もはや今後、W3Cの勧告したCSSの仕様に完全に対応しない、または対応することを目的としないブラウザやスタイルシートを取り入れないWebサイト作りは考えられない、生き残れないと言っても過言ではないでしょう。

 XHTML/CSS・トップ | XHTML/CSS・目次

Copyright (C) 2005-2009 http://www.xml.vc/