XHTML/CSS・トップ | CSS基礎知識・目次

●CSSの基本的な書式

 CSSファイルの内容そのものにはタグがなく、純粋にCSSの書式のみを記載します。セレクタ { プロパティ : 値 } と記述します。そして、"プロパティ : 値"の構成部分は、セミコロン( ; )で区切り、複数指定することができます。セレクタとは、スタイルの適用先を指定する部分またはスタイルを適用させる対象を意味するもので、HTMLの要素名にあたりますが、単一ではありません。複雑な形の指定もあり、HTMLの要素名とは区別されます。

 プロパティとは「特性」の意味があり、スタイルの種類を指定する部分のことです。そして、プロパティはCSSで定義されている種類の数だけありますが、すべてが使える訳ではありません。ブラウザの種類やバージョンによって、表示が異なりますし、対応していないブラウザもあります。CSSのプロパティの具体的な解説については、別ページに記載しています。

【解説】

body { background-color: #000000; color: #ffffff }

 HTMLの属性値と違い、値は例外を除き、二重引用符(")で囲む必要はありません。また、セレクタ { } : プロパティ ; など、各部分の前後には、半角スペース、タブ、改行を入れることが可能です。ただし、全角スペースを1つでも入れるとブラウザによってはスタイルが反映されないことがありますのでご注意ください。全角スペースを入れるのは文法的にエラーとなります。

 筆者はCSS書式のコロン( : )とセミコロン( ; )の前後に半角スペースを適度に入力していますが、面倒であれば詰めても構いません。

body {
  background-color: #000000;
  color: #ffffff;
}

 当サイトはCSSのソースをこのように整形した状態で解説します。書式の中央にインデントはありますが、基本的に左寄せで記載しています。具体的にはテキストエディタとして使うメモ帳の左端に付けて記述します。インデントとは字下げのことですが、ここでは左からの空白とします。インデントは半角スペースを複数回か、Tabキーを使って入力します。前述したようにCSSの書式においては全角スペースを1つでも入れるとエラーとなりますので使わないようにしてください。

body {
 background-color: #000000;
 color: #ffffff
}

 上記のソースのように書式の最後のほうにセミコロン( ; )を付けても付けなくても、特に問題はありません。ただし、ホームページ作成ソフトを使って、CSSソースをHTMLファイルの中にstyle要素として配置した場合、強制的にセミコロン( ; )が付加される場合があります。

【CSSの大文字小文字について】

 XML(XHTML)では要素名および属性名はすべて小文字にしなくてはなりません。従って、対比するCSSのほうでも要素名(またはセレクタ)は小文字使用となります。

 補足しますと、HTMLの場合においては、要素名および属性名の大文字小文字の区別をしません。H1、h1でも同じものとして扱われます。CSSにおいても大文字小文字の区別をしません。ですが、XHTML(XML)では要素名、属性名は小文字で書く決まりがあります。従って、CSSのほうでもh1をセレクタとした場合は必然的に小文字になります。

【そのほかのポイント】

※一時的に書式を無効にしたい場合は/* 〜 */ で囲み、コメントの形にすることもできます。→/* CSSの書式 */

※セレクタ(セレクター)の語源がはっきりしないのですが、英語の selectorからきているものと思われます。selectorは選択[者]という意味があります。

XHTML/CSS・目次 | CSS基礎知識・目次

Copyright (C) 2004-2008 http://www.xml.vc/