CSSについて

はじめに

CSSは、XHTMLが文書の構造を記述するに対して、ウェブページ(ホームページ)の装飾をするために使用されています。

使用するブラウザによって表示が異なる場合がありますので、ブラウザごとの拡張された機能を使用せず、出来るだけ多くのブラウザで使用できる属性を使用しましょう。

CSSにはLevel1,Level2,Level3(現在仕様策定中)があり、ブラウザによって対応状況が違う場合がありますので注意が必要です。

書式

CSSもXHTML同様、文字コードを指定する必要があります。これは、フォント名を指定する場合に日本語等の非ASCII文字が含まれる可能性があるからです。文字コードはCSSファイルの一番はじめの行で指定します。文字コードの指定の前にどのような文字があってもいけません。

@charset "shift_jis";

上記例では文字コードセットをshift_jisと指定していますが、CSSを製作する環境に合わせて変更してください。文字コードセットはXHTMLの項で紹介したものなどがあります。

CSSの書式は次の通りです。

セレクタ { プロパティ(属性):値; }

セレクタ

どの要素にCSSを適用するかを指定する部分です。セレクタにはXHTMLのタグやID、クラスが指定できます。

宣言

{と}で囲まれた部分です。

プロパティ(属性)

セレクタで指定した要素に適用するスタイルの種類を指定する部分です。

値

プロパティの値を指定する部分です。;(セミコロン)で区切って一つのセレクタに複数のプロパティと値を指定できます。

セレクタは,(カンマ)で区切って複数の要素を指定することが出来ます。また、スペースで区切って特定の要素に含まれる要素に対してスタイルを指定することもできます。

classとid

CSSはXHTMLのタグに対して属性を指定する方法と、classやidといった識別子を指定して、タグだけではなく任意のセレクタについて属性を指定することが出来ます。class識別子は一つのページの中で何度でも使用できますが、id識別子は一つのページの中で一回しか指定することが出来ません。また、classやidの識別子名はアルファベットの文字から始まっていないといけません。

h1      { text-align:center;}
/* h1要素について、文字を中央揃えにする */
h1.title        { text-align:center;}
/* h1のtitle識別子が指定されている要素について、文字を中央揃えにしている
   クラスの指定さていないh1タグにはこの宣言は適用されません。 */
.page-normal    { display:none;}
/* タグ名は関係なく、class識別子でpage-normalが指定された要素を非表示にする */
#body   { margin-left:2em;}
/* id識別子がbodyの要素について、左の余白を2em確保する */

CSSで用いられる単位

CSSで使用する長さや大きさの単位には絶対値指定と相対値指定の2つの方法があります。ただし、絶対値指定ではブラウザで文字の大きさを変えても絶対値で指定されているため、文字が大きくならないなどの不具合が起きる可能性がありますので、出来るだけ相対値で指定した方がよいでしょう。

絶対値

in(インチ)

長さを表します。1インチは2.54cm(25.4mm)です。

cm(センチメートル)

長さを表します。

mm(ミリメートル)

長さを表します。

pt(ポイント)

1ポイントは1/72インチです。文字の大きさを指定するときに使用します。

pc(パイカ)

1パイカは12ポイントです。

相対値

em

ある範囲内で有効な文字の高さを1とする単位

ex

ある範囲内で有効な小文字「x」の高さを1とする単位

px

1ピクセルを1とする単位

%

他の基準に対する割合

コメントの記述

CSSには、ソースコード内にコメントを書くことが出来ます。コメントはブラウザ上の表示には影響しないため、CSS制作者が自由に記述できます。コメントの開始は/*で、終了は*/となります。この/*と*/で囲まれた部分がコメントとなります。

h1      {
        text-align:center;
        background:#ccf;
        /*margin:0;
        padding:5px;
        */
}

上記例では、マージンの指定とパディングの指定がコメントアウトされ無効になっています。