[ホーム] -> [CSS 実験室]

とりあえず、Hello World

とりあえず、前置き

まず、CSS でどんなことが出来るかというのも見てもらった方がいいかと思います。次のサンプルを見て下さい。

Windows にインストールされているフォント名を指定しているので、Windows 環境でないと、うまく表示されません。もし、IE と Netscape が両方使えるのでいしたら、見比べてみるのも良いかも知れません。表示が微妙に違うのが分かると思います。どうでしょうか。これ、グラフィックではありません。本当に文字だけで構成されています。CSS の目玉と言えば、なんと言っても文字を重ねることが出来ることではないでしょうか。このサンプルでは、英語しか使用していませんが、もちろん日本語も使えます。

いや、本当は、内容とレイアウトを分けるためのものですけどね・・・。

プログラムで最初にやることといえば、当然 K & R の伝統に従って「Hello World」を表示させることです。これもその例に漏れず、CSS で「Hello World」を表示させてみようと思います。あ、とその前に断っておきますが、簡単な html 言語を、知っていることを前提として話をさせてもらいます。

Hello World の表示

まず、html ファイルのヘッダ部分(head タグ)で、スタイルの定義を行います。定義の指定には <style> タグを使用します。

<style type="text/css">
  <!--
  #css1 {
    color: #0000FF;
    font-weight: bold;
  }
  -->
</style>

1行目の定義は、お約束だと思って下さい。タグの中身がコメント用のタグで囲んであるのは、CSS をサポートしていないブラウザの為です。CSS をサポートしているブラウザならば、コメントの中を、CSS として認識してくれます。もちろんこのコメント用のタグは無くても構いません。ここでも指定は、color つまり色を、0000FF の色(青)に指定し、フォントの幅を bold(太字)に指定しています。

次に、このスタイルを使用したいところを、任意のタグで囲み id属性を付けます。

<div id="css1">テスト</div>

こうすることで、このタグで囲まれた部分が太字で灰色表示されます。タグは div では無くても構いません。body タグの中で指定できるタグすべてで使用できるはずですが、表示に影響のないdivp タグなどを使用することが多いようです。この例は、id という識別方法を使いました。# の後に id 名を書き、実際に使用するときは、タグ内で id 属性に定義してあるid 名を指定します。一度 style タグで定義しておけば、あとは任意のタグで使用できます(本当は、1ページ中に id の値が重複してはいけません)。

これ以外にも、タグ内に style 属性を指定して、そこでスタイルを指定することもできます。

<div style="color:#0000FF; font-weight:bold;">テスト</div>

先の例と全く同じ結果が得られますが、これはそのタグ内でしか有効ではありません。局所的な使い方しかできないので、CSS の目的の一つである、論理タグとの融合が得られないので、あまりお勧めできません。

id の他に、タグに対して直接タグの意味合いを変える方法があります。スタイルシートを表示できるブラウザが広まれば、この機能が一番使われるのではないかと思います。やり方は、id を使った方法とほとんど同じですが、id 名を指定するのではなく、既存のタグ名を指定します。

<style type="text/css">
  <!--
  h1 {
    color: #0000FF;
  }
  -->
</style>

これを指定すれば、後は普通に「<h1>Hello World</h1>」と指定するだけで、h1 タグ本来の機能に加え、色を常に青で表示することが出来るようになります。この機能が、「論理タグと表示属性の融合」にもっともあった使い方ではないでしょうか。

スタイル定義を外部ファイルに持つ

上で示したように、スタイルの定義を直接 html ファイルに記述することが出来ますが、それ以外にも、この定義を外部のファイルに持つこともできます。スタイルの定義ファイルを外部に持つことにより、スタイルを複数のファイルで共通化することが出来ます。このやり方は2つ有り、link タグを使う方法と、styleタグ内で import を使用する方法です。style タグで指定する方法は、規格にはあるものの、現在の所サポートしているブラウザがないので、使用は避けるべきでしょう。

<link rel="stylesheet" type="text/css" href="hello.css">
<style type="text/css">
  <!--
    @import url(hello.css)
  }
  -->
</style>

ここで注意しなければならないのは、スタイルの定義ファイル名の付け方です。拡張子を css にして下さい。また、WWW サーバによっては、css ファイルに対する MIME タイプを設定しなければならないかも知れません。WWW サーバが、NCSA、apache、CERN などのUNIX 系サーバの場合は、ACF(アクセスコンフィグレーションファイル)と呼ばれる設定ファイルを用意します。この設定ファイルのファイル名は「.htaccess」です。ファイル名のはじめがピリオドで始まり、合計9文字です。そして、このファイルに次の1行を追加します。

AddType    text/css  .css

最後に、このファイルを CSS ファイルを使用している html ファイルと、CSS ファイルの存在するすべてのディレクトリにコピーして下さい。この .htaccess ファイルは、このファイルがおいてあるディレクトリでしか有効ではありません。したがって、CSS を使用している html ファイルや、CSS ファイルが分散して置いてある場合は、それらが存在するすべてのディレクトリに置く必要があるのです。

実は、「.htaccess」といファイル名は、サーバ側の設定により変更することができます。これは、クライアント側から、.htaccess ファイルを見ようと思えば、簡単に見ることが出来てしまうためです(設定により、見えなくもできるのですが・・・)。そのため、用心深い管理者であれば、この名前を、知らない人間に推測しにくい名前に変更してあるかも知れません(さらに用心深い管理者は、ディレクトリごとの ACFファイルを使用できないようにしているかも知れません)。この場合は、どんな名前のファイルすればいいか(あるいは使えるか)を、管理者に聞いて下さい。

ホームへ