カスケード・スタイルシートとHTML
カスケード・スタイルシートを使う意味
カスケード・スタイルシート(CSS)はHTMLを直接補足するものです。これは個々のHTML要素の書式設定の属性を定義するための言語です。
スタイルシートを使うと例えば見出しレベル1、フォントサイズ18、文字の種類はHelvetica、しかし太字は使わず、改行の際1.75センチの間隔を取って次の章に移るなどと決めることができます。
このようなタイプの入力はHTMLだけを使ったのではできません。これはまだ序の口です。スタイルシートを使うともっとたくさんのことができます。テキストの段落、リスト、表、フォームなど何でもいいですが、HTML要素に独自の背景の色をつけたり、背景に画像(ウォールペーパー)を使用するなど、さまざまなことができます。
要素をピクセルの単位まできっちりWWWブラウザ−の表示ウィンドウに配置することもできます印刷用のレイアウトに関してはページレイアウトやテキストの流れ方も定義することができます。Webページを音響でアウトプットする場合には人工的な言語のアウトプットを自由に操作するために一連のコマンドが用意されています。
カスケード・スタイルシート(CSS)の属性のいくつかはブラウザーの表示ウィンドウに影響を与えることもできます。例えばカーソルの見え具合などのケースです。
最後になりますが、特別なフィルターでは、画像編集のアプリケーションのフォトショップなどで知られているような画像効果を普通のテキストで出すこともできます。もっともこれはマイクロソフト特有のものです。スタイルシート(CSS)で更に重要な点は、定義を1箇所でまとめて行える点です。
例えばHTMLのヘッドの部分に表のセルのデザインを全部まとめて定義することができます。HTMLファイルにある表の全てのセルが1度きり1箇所で行う書式設定で定義できるのです。これでコーディングの仕事を節約できHTMLファイルは軽くなります。また、スタイルシートの定義は専用のファイルを作って別途に行うこともできます。いくらでも好きな数のHTMLファイルでこのスタイルシート・ファイルを指定することができます。
このようにすると大きなプロジェクトでもレイアウトを統一して行うことができます。1箇所に集めたスタイルシートでいくつかの小さな変更を行えば、このスタイルシートを指定している何百ものHTMLファイルがその変更に従います。
スタイルシート(CSS)はプロフェッショナルな形で精密なWebデザインをサポートする一方、大型プロジェクトや企業特有のレイアウトがある場合、統一されたデザインを可能にします。
スタイルシート言語、バージョン、インフォメーション
HTMLと同じくスタイルシート(CSS)もW3Cで規格が統一されています。特定企業の仕様によるものではなく、一般に公開されており、自由に使用して構わない規格です。HTMLと同じようにスタイルシート(CSS)のためにもW3Cに研究ティームがあり、言語の開発に寄与しています。
またW3Cの勧告(Recommendations)と呼ばれるものを作るために規則があり、それに従っています。HTMLと同じく、スタイルシート(CSS)にも言語のバージョンがあります。これは新しい版の勧告に基づいて作られます。
スタイルシート(CSS)のバージョン1.0は1996年に発表され、1999には改訂されています。1998年にはバージョン2.0が勧告のステータスを得ています。現在ではバージョン3.0が作られています。
以下の技術資料はバージョン1.0と2.0を考慮に入れて書かれています。
スタイルシートの定義をするためにはいくつもの言語があります。カスケード・スタイルシート(CSS)はその中の1つにすぎません。しかしこれはHTMLを補足するために特別に作られた言語であり、そのためHTMLをベースにして作られたWebページには1番適しています。
CSSというのはカスケード・スタイルシート(Cascading Style Sheets)を略したものです。もう1つのスタイルシート言語はDSSSLといいDocument Style Semantics and Specification Languageを略したものです。
これはSGMLのために案が作られ、SGMLと同じく精巧なものです。最近ではそれより知られているXSLがあります。これはExtensible Stylesheet Languageの略です。こちらはXMLのために書式設定言語として開発されました
Web上ではこれまでに開発されたスタイルシート(CSS)と今後開発されていくものがW3Cのサイトに載っています。
W3Cのスタイルシートに関するホームページ
このページからCSS、XSL、DSSSL、スタイルシートでサポートされたソフトウエア・プロジェクトへ行くことができます。
W3Cのカスケード・スタイルシートに関するホームページ
このページからは直接カスケード・スタイルシート(CSS)に関する最新のニュースとインフォメーションへ行くことができます。
日本語では以下のページが参考になります。
HTML の "style" 属性における CSS 規則の構文
スタイルシート、Webブラウザ−、ユーザー
自分のWebページのためにスタイルの草案を作る時、全ての書式設定を異なるブラウザーでテストしてみる方がいいです。
ブラウザーがスタイルシート(CSS)を組み込む時考慮すべきは、単にまだそれほど各社、各製品で統一されていないので、安心できないというだけでなく、普段使っているブラウザーと他のすべてのブラウザーで何もかもが同じに見えるというわけではないという点です。
さらにWebページの視覚的な効果は、使用しているハードウエアにかなり左右されているのだということもよく意識しておくべきです。
Webページは19インチのモニターで、16 700 000 色の表示ができる高いパソコンだけで見るものではありません。
サブ・ノートブック(小型パソコン)、ハンドヘルドPC(片手で持てるような、普通のノートブックより小さいPC)で見る人もいます。
それに古いタイプのパソコンを使用している人もいるのです。
今日市場に出ているモニター関係の様々なテクノロジーは例えば色彩に関してもさまざまな異なる効果をもたらします。
あるモニターでベージュに見えるものが他のモニターでは子豚の肌の色に見えたりするのです。
モニターという機械は色彩の調整もできますが、ユーザーに皆さんの作ったWebページを見る前にモニターのカラー調整をしろと要求するのは無理というものです。
カスケード・スタイルシート2.0以降はさまざまなスタイルシート(CSS)の書式設定を種類の違うアウトプット・メディアについてそれぞれ定義できるようになっています。
しかし問題はそれで全部解決というわけではありません。
Webページ用にスタイルの草案を作る時に考えておくべき重要な視点の1つは、このページを訪問者側の視点で考えるということです。
視覚的な問題を抱えた人が画面の色や形をサイトを作った人の期待通りに見ることができないという場合も多いのです。
デザインをする時に上品だと思って選んだものが、一部の人たちに識別できないこともあり得ます。
「識別できない」ということは皆さんの作ったサイトを見てくれる人が1人減るということです。
スタイルシートを使うと珍しいフォントや色のコンビネーションなどを簡単に選ぶことができます。
その「素敵な」ものが訪問者の使用するハードウエアや解像度によって見えたり見えなかったり、きれいに見えたり醜く見えたりします。
他方スタイルシートを視覚障害を持った人のためにターゲットを定めて使うこともできます。
普通の広い領域にはっきり識別できる色のコントラスト、フォントを使い、普通の文字の 幅、行の高さにし、例えば背景と前面では赤・緑など問題の起きそうな色彩のコンビネーションを避ける、訪問者の多いWebページにはこういった特徴があります。
スタイルシートの書式設定と属性
スタイルシート(CSS)というのは書式の設定から成り立っています。
この書式設定で特定のHTMLの要素の内容を定義したり、HTML要素の特定ものを選んだりします。
スタイルシート(CSS)の中には、その書式が影響を及ぼすHTML要素の特定のグループを選択するためにセレクターと呼ばれるシンタックス(書き方の規則)があります。
スタイルシート(CSS)の書式設定はスタイル領域を作って1箇所にまとめて行う方法、ファイルの外に別途にスタイルシート(CSS)・ファイルを作る方法、HTML要素の開始タグの中に直接書き込む方法の3つがあります。
そしてスタイルシート(CSS)の書式は1つあるいはいくつもの属性とその属性に対する値の指示から成り立っています。
例えばある書式を見出しレベル3で定義します。
その時に文字の大きさ、文字の色、段落の後の余白の大きさといったように属性に必要な指示を与えます。
目的別属性
広告