CSS1-使用方法

1. HTMLへの組み込み

HTMLへの組み込み方法は４種類あります。下記のサンプルには４つの組み込み方法が含まれています。

HTMLのLINK要素から外部CSSファイルを読み込む方法 → HTML4.0 LINK要素
HTMLのSTYLE要素で直接記述する方法 → HTML4.0 STYLE要素
@importを用いる要素
HTML要素のStyle属性を用いる方法 → HTML4.0 Style属性

これらの４つの組み込み方法は何れもCSSの機能を実現できますが、１から順番に推奨されています。これは、HTMLは構造を定義するマークアップ言語であり、この構造化言語に対して汎用的に体裁を整えるCSSの能力を最大限引き出すためです。具体的には、HTML文書は構造のみを定義し、見栄えに関する定義はCSSで行います。複数のHTML文書に対して１つのCSSを用いることで、見栄えに関する変更を行いたい場合には１つのCSSを変更するだけで複数のHTML文書の見栄えを変更できるようになります。一般的にこうすることでHTML文書の保守管理に要する時間を大幅に低減できます。

例えば4.の方法を用いた場合、それぞれの要素ごとにスタイルを適用し、他の文書等に転用ができなくなります。また、1.の方法を用いた場合、１つのCSSファイルを複数のHTML文書から参照することで、その見栄えの変更が大幅に助かります。更にブラウザのキャッシュを用いて、スタイル部分の読み込み時間を低減することも可能です。

そもそも「HTMLと見栄えに関する定義との切り離し」「HTML文書の保守管理の工数低減」の２つの目的があったCSS、上記の番号の若い方法を採らなければ意味がないことは賢明な皆さんなら直ぐに理解できるでしょうね。（私はなかなか理解できなかった(^^;;）

<HTML>
  <HEAD>
    <TITLE>title</TITLE>
    <LINK Rel="stylesheet" Type="text/css" Href="./css/sheet.css" Title="Normal CSS">
    <STYLE Type="text/css">
      @import url(./css/sheet.css);
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Headline is blue</H1>
    <P Style="color: green">While the paragraph is green.</P>
  </BODY>
</HTML>

2. 基本定義方法

セレクタ{プロパティ:値}

P { color : blue }

これが最も簡単な指定方法です。セレクタにはHTML要素名（タグ）やそのClass属性値、Id属性値などが入ります。それに対するどういう項目（プロパティ）をどういう風（値）に指定するか、という風に記述します。また、プロパティと値を合わせて「宣言」と言います。

例では、P要素（<P>～</P>に含まれる部分）を全て青色で表示します。

3. グループ化

セレクタ,セレクタ,セレクタ{プロパティ:値;プロパティ:値}

H1,H2,H3{ color       : red ;
          font-size   : 16pt ;
          font-weight : bold }

上の例のように、セレクタやプロパティをグループ化して、まとめて指定することが可能です。セレクタは「,」（カンマ）、宣言は「;」（セミコロン）で繋ぎ合わせます。また、最後の宣言の後の「;」は付けても付けなくても結構ですが、メンテナンス時に後から宣言を付け加えることなどを想定すると、必ず付けるように癖を付けた方が間違いが少なくて済みそうです。（経験談）

このように複数をまとめておけば、メンテナンスの時が非常に楽になります。

4. 継承

H1 { color       : red ;
     font-size   : 16pt ;
     font-weight : bold }
EM { color       : blue }

<H1>CSSの<EM>最大</EM>の特徴</H1>

CSSの最大の特徴の１つでもある「継承」は、理解すれば非常に役立つものです。理解しなくても無意識の内に使ってしまっているものでもあるほど、難しくもなく、そして便利なものです。

上のサンプルのようにH1要素内にEM要素が存在し、そのそれぞれにCSSを指定しているとします。 EM要素にはフォントカラーが青であるとしか指定していませんが、その前の要素H1の影響を受けます。 H1要素にはフォントカラーが赤でサイズが16pt、太字に定義しており、その全てをEM要素にも指定してしまいます。ただし、EM要素でフォントカラーが青と設定しているので、EM要素にはフォントカラーが青、サイズが16ptで太字が当てはまります。

このように、親要素の指定をそのまま子要素が引き継いでしまう性質が「継承」です。下のサンプルが、（多少意味合いが違うかもしれないが・・・）継承の典型的な例です。文書全体をフォントカラー赤、サイズ12ptと指定、H1要素にフォントカラー青のみの指定をした場合、 H1要素の親要素BODY要素の継承を受け、最終的にフォントカラー青、サイズ12ptを指定したのと等価になります。

BODY { color       : red ;
       font-size   : 12pt ;
       font-weight : normal }
H1   { color       : blue }

複数のCSSファイルを読み込み、同一のセレクタに対して異なる宣言をした場合は、全て最後の指定が有効となります。また、ある要素内の色は青だけど、この要素内にあるある要素の色はこうしたい、等の組合せ的な場合にも有効になることがあります。

例外的に継承しないプロパティも存在します。この場合は非常にわかりやすい場合が多く、継承し得ないプロパティばかりが該当します。例えば「background」等は継承性を持ちません（継承しようがない）。詳しくはそれぞれのプロパティの説明を参照して下さい。

5. コメント

<STYLE Type="text/css">
<!--
H1 { color       : red;       /*カラー：赤*/
     font-size   : 16pt;      /*サイズ：16pt*/
     font-weight : bold }     /*太さ：太字*/
-->
</STYLE>

CSSでのコメントはいわゆるC言語と同じく、「/* ～ */」で定義します。この間に記述した文字は全て無視されます。

また、STYLE要素をサポートしていないブラウザのために、JavaScript同様に「」でCSS全体を囲んでしまう方が良いようです。 STYLE要素をサポートしていない場合、CSS定義部分が画面上に表示されてしまうのを回避するための一般的な手法です。全てのブラウザがサポートするまでの暫定対策としては非常に有効です。

CSS1 Reference

使用方法

1. HTMLへの組み込み

2. 基本定義方法

3. グループ化

4. 継承

5. コメント