気の向くままに辿るIT/ICT/IoT
CSS / Cascading Style Sheets / スタイルシート

CSSコンセプト

ホーム前へ次へ
CSSスタイルシートの文法は?

CSSコンセプト

CSSのコンセプトは

 CSSは、HTML/XHTMLといったマークアップ構造化言語などの「個々のタグ」という位置づけだけでなく、ツリー(木)構造であるHTML/XHTMLのサイト全体(ルート要素html)、html要素の子要素であり、個々のHTMLファイルにおけるブラウザ表示上の可視部となるbody(ページ)全体、更に徐々に焦点を絞っていくと結果的にひとつひとつのタグに辿り着く、逆にひとつひとつのタグを遡っていくとそれを囲むタグがあり、bodyにたどり着き、サイト全体(ルート要素html)にたどり着くという(DOM仕様の)概念から成る全体または部分的なスタイルを設定する為にHTML/XHTML同様W3Cが策定している仕様です。

従来のCSS

 バージョンを重ねてきたCSSは、IETFから移管後W3C初のHTML仕様となるHTML3.2では、style要素が定義されており、<head></head>部に当時CSSとして勧告されていたCSS 1.0/CSS1により、ファイル内でスタイル設定を共有できるようになっていた一方、TABLEタグでバランスをとり、HTML属性によってHTMLタグごとに直書きで色や背景などでほぼ同様のことができた為に実質同じ見た目の装飾をHTML、CSS何れの方法でも実装することができるようになっており、近年もまだ尚、こうした名残があります。

 更に、その後、バージョンアップしたHTML4でstyle属性が定義され、基本的にbody内で利用可能な全てのタグ内でスタイルを設定できるようになり、HTML4とCSS1では、ヘッダにスタイル情報を記述する方法に加え、タグを記述する際に属性にHTML、または、CSSでスタイル情報を設定することができるようになり、更に柔軟になりました。

 これは、端的に言うとCSSを使わなくてもHTMLだけで「それなりの装飾ができた」という事です。

 スクリプト言語やプログラミング言語では、1つのことをするのに幾通りものやり方があるといった多様性を良しとするケースもありますが、HTMLやCSSにおいては、微妙であり、その状態では、サイト運営者としては、まず往々にしてサイトを一度作ってしまったら「後で編集はしない」か、もしくは「編集作業にヘトヘトになる」という選択肢しかないといってもいい状態になってしまいます。

今後のCSS

 そこでHTML4(HTML 4.0/HTML 4.01)とCSS2(CSS 2.0/CSS 2.1)では、外部スタイルシートを読み込むことで複数ファイル、サイト全体でスタイルを適用可能とし、これによりマークアップを中心に構造化する為のHTMLと装飾をする為のスタイル情報を明確に分離することが可能な利便性の高い仕様となりました。

 CSSとは、Cascading Style Sheet(s) の略であり、Sheet は、「1枚もの」というニュアンスがあることから、style要素やstyle属性によるものは、スタイル情報であって、CSSと言えば、外部スタイルシートを指すと言ってもよいくらいです。

 ちなみにXMLの流れも汲むXHTMLはHTMLの内容をデータとして捉え、記述したその時だけの一過性の情報としてではなく、以後も継続的に利活用できる方向に向かう一環であり、タグをマークアップと構造化、要素内容を本来のデータとして分離する方向性が見えてきます(そういう意味ではXHTML1.0仕様は、その為の準備段階という位置づけだと思われタグとデータを完全分離するにはまだ不十分ですが、XHTMLの未来バージョン策定と勧告が進めば近い将来可能になるでしょう)。

 つまり、それぞれ機能を特化する事ができれば、修正箇所も限定され、HTML/XHTMLファイルの中身もシンプルで整然としたものとなります。

 そうなると内容を充実させる際にはHTML/XHTMLファイルを、スタイルを追加変更するにはCSSファイルをというシンプルな編集ができ、一度作ったら放置されてしまうという状況が減ると言ってもいいでしょう。

CSSは外部ファイル設定

 Web環境の大きな素晴らしい転換期でもあり、その為の第一歩としてHTMLタグ内での直指定やStyleインライン指定は補助的に、メインは、CSSスタイルシート外部ファイルを利用しましょう。

CSS/スタイルシート情報

ホーム前へ次へ