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

CSS / Cascading Style Sheet / カスケーディンスタイルシート

ホーム前へ次へ
CSS / Cascading Style Sheetとは?

CSS / Cascading Style Sheet / カスケーディンスタイルシート

CSS / Cascading Style Sheet

 CSSとは『Cascading Style Sheet』(カスケーディング・スタイル・シート)の略で構造化されたマークアップ言語用の装飾に関するW3C仕様です。

 CSSは異なるバージョン含め同一対象に複数設定があった場合、重複は後者優先、併用可能な設定は被せて共に有効にするといった「重ねる(Cascading)」ことが可能な「装飾(Style)」 設定用「シート(Sheet)」です。

 つまり、「Style設定が順次折り重なるように適用されていく」といったイメージからCascading Style Sheetという名称となったと考えて良いでしょう。

 CSSは、HTML/XHTML標準化団体で知られるW3Cが同じく標準化しているHTMLで記述されたホームページの装飾、デザインに特化した書式設定としてCSSのコンセプトの下、当初CSS1として仕様化されましたが、CSSバージョン2.0以降はXMLでもXSLとは別にCSSの利用もできるよう考慮されています。

CSS略称表記

 仕様書を眺めるとCSSという略称表記でバージョンを併記する場合、(正規表現利用時など編集作業上の都合である可能性もありますが、)マイナーバージョン付きのCSS 2.1はスペースを挟み、それ以外はスペースも入れず、CSS1、CSS2といった表記で統一しているようです。

 尤もCSS 2.1はそれ以前に策定されていたCSS2(CSS 2.0)のバグを解消した上でCSS2として集約されるべく策定されていることから勧告後は特にCSS 2.1も基本的にはCSS2と表記されることになりますし、既に策定中のCSS3も同様です。

CSSプロパティとプロパティ値

 ちなみに英訳和訳上のニュアンスの差異もあるかもしれず共に「属性」とするのが妥当か否かはさておき、W3C仕様上、CSSでは属性を「property/プロパティ」、値を「プロパティ値」、「設定値」、単に「値」、一方、XML/XHTML/HTML等では属性は「attribute/アトリビュート」、値は、「属性値」、「アトリビュート値」、やはり「設定値」や単に「値」という場合もあります。

3通りのCSS書式設定方法

 尚、CSSの書式設定には以下の方法がありますが、CSS2(CSS 2.0/CSS 2.1)を含む以降のCSSバージョンではC.のCSS外部ファイル設定が推奨されています。

  1. 【CSS1/HTML4で定義】
    個々の要素内でstyle属性により設定するCSSインライン設定
  2. 【CSS1/HTML3.2で定義】
    headタグ内においてstyle要素内で設定するCSSファイル内部設定
  3. 【CSS2/HTML4で定義】
    CSS設定のみの外部ファイルを読み込むCSS外部ファイル設定

 但し、W3C仕様書には、

  1. Inline style information
  2. Header style information
  3. External style sheets

とあるので、より正確に訳せば

  1. インラインスタイル情報
  2. ヘッダスタイル情報
  3. 外部スタイルシート

ということになります。

 インラインは「in Line」「ラインの中」という事で「HTMLタグ/XHTMLタグ内に埋め込む」という意味合いになります。

 シートは「1枚もの」といったニュアンスなので「専用ファイル」と解釈するとCSS専用ファイルであるC.だけが当てはまります。

 A.はHTML/XHTMLタグのstyle属性に、B.はHTML/XHTMLのheadタグ内のstyle要素・タグで括られた範囲に「スタイル情報」を書き記すというイメージです。

 これら3つのCSS設定は重複して設定することもできますが、適用される優先順位はA.B.C.の順です。

 つまり、インライン設定されたものがある場合は、他の2つが設定されていてもインライン設定が有効になります(が、同一の対象への設定であっても併用可能な場合は、追加設定として重ねて設定されます)。

 この中でhtmlファイルがすっきりしてサイト全体の追加変更などの編集も簡単で一番便利なのはどれだと思います?

 そう!外部ファイルです。

 それでは、これを踏まえてCSSについて詳しく見ていきましょう。

CSS/スタイルシート情報

ホーム前へ次へ