ホームページ作成支援Ｒａｎ．ｃｏｍＸ

Ran.comX TOPへ

スタイルシート(CSS)講座

■スタイルシートとは？

ＷＥＢページの製作をするページで頻繁に目にする、スタイルシートという言葉。
最近ではごく当たり前に使われるようになってきましたね。
スタイルシートとは、ひとことで言うと「ＷＥＢページのレイアウトを定義する技術」ということになると思います。
ページの本体を記述するのがＨＴＭＬで、文書の論理的な構造を示す言語です。
それに対してスタイルシートは、ＨＴＭＬの機能にはない体裁の制御についての方法を導入するために作られたものだと言えます。
まだまだ耳慣れない言葉でしょうが、ＸＭＬというのがあります。
ＸＭＬはＨＴＭＬよりもブラウザへの依存度が低く、ＨＴＭＬでは実現できない様々な設定や操作が可能なのです。
いずれはＨＴＭＬからＸＭＬへの乗り換えをする日がやってくると思いますが、そのＸＭＬでのページデザインについてはスタイルシートを使用します。
そのことも踏まえて、今からスタイルシートを理解し使っていくことをおすすめします。
尚、現在一般的に使われている「スタイルシート」とは、スタイルシート言語の一つであるＣＳＳを指していることが多く、ここでもＣＳＳをスタイルシートと表記しています。

スタイルシートを少しでも多く理解して、素晴らしいＷＥＢページを製作してください。

■スタイルシートの書式

基本的な書式は次の通りになります。（ＨＴＭＬのＨＥＡＤ内に記述する場合）

<STYLE type="text/css">

</STYLE>

この場合はＢＯＤＹ全体のフォントサイズを９ポイントにするという指定をしています。
この場合のＢＯＤＹを「セレクタ」（スタイルを適用する対象）、ＦＯＮＴ－ＳＩＺＥを「プロパティ」（設定するスタイルの性質）、９ｐｔを「値」（プロパティごとに決められた値）と言います。
また、例ではプロパティは一つだけ指定されていますが、複数のプロパティを同時に指定することも可能です。
その場合は、；（セミコロン）で区切って並べます。
※実際に使う場合は、把握しやすいようにプロパティごとに段を変えて指定している人が多いのが現状です。私もその一人ですが。(笑)

■コメントの記述

自分で作ったスタイルシートですが、たまにどの指定がどこにあるのかがわからなくなる時があります。（ドヂなものでｗ）
その時のためにスタイルシートの中にコメントを記述しておいて、どれがどこの指定かをハッキリさせておくと便利です。

<STYLE type="text/css">

</STYLE>

上のように「/*」と「*/」ではさんでコメントを記述するとブラウザには表示されません。

■その他のスタイルシートの指定法

今述べたのはＢＯＤＹのＨＥＡＤ内に記述する方法ですが、その他にも指定の方法があります。

☆外部からの読み込み（外部スタイルシート）
スタイルシートを別のＣＳＳファイルとして保存して、それを外部からＨＴＭＬページへ読み込む方法です。
記述は次の通りです。

<LINK rel="stylesheet" href="ＣＳＳファイル名" type="text/css">
（ＨＥＡＤ内に記述）
※ＣＳＳファイルを別に用意しなければなりませんが、スタイルシートの量が多くなってしまった時やページの設定を見られたくない時などに使用するといいでしょう。
★外部スタイルシートの記述法
通常のスタイルシートの記述から<STYLE type="text/css"></STYLE>を取ったものをメモ帳などにコピーして、「名前をつけて保存」で（名前は好きなもの）、最後の拡張子を　．ｃｓｓ　に変更すれば完了です。

☆ＨＴＭＬタグ内記述法
文字通りＨＴＭＬの中に埋め込む方法です。
例えば、テーブルタグ内に埋め込む場合を書きますね。
<TABLE style="font-size:9pt; color:#000000;"></TABLE>
かなり省略してますが、記述する場合は　ｓｔｙｌｅ＝""　の中にプロパティと値を埋め込みます。
この方法が一番直接的でいいのですが、同じ指定がいくつもあった場合、それを全て書き込まなければいけないという難点があります。

※しかし、最初に指定を決める前の段階では、タグごとに記述してみて、様子を見るためならばこの方法も使えると言えますね。
確認後に、あらためてスタイルシートとしてＨＥＡＤ内（あるいは外部）に記述するといいかも知れませんね。（俺もたまにこの方法を用いています。たまに忘れてそのままの時も多々ありますが・・・。(笑)）

■複数のタグを同時に指定する方法

一つのセレクタに複数の指定をするのは上で記述しましたが、複数のセレクタにも同時に同じ指定をすることが可能なんです。

<STYLE type="text/css">

</STYLE>
このようにＢＯＤＹとＴＤに対して同時に同じ指定をした例ですが、セレクタを「カンマ」で区切って指定することができます。

■任意の範囲への指定

一部の限られた部分のみにも指定をすることが可能です。
その場合の指定法はクラスとＩＤで指定します。
クラス指定の場合はセレクタの前に「．」を入れて指定して、設定する場所に class=""という風に記述します。
ＩＤでの指定の場合も同様に、「#」を前に入れて指定して、設定場所に id=""という風に記述して指定します。

<STYLE type="text/css">

</STYLE>
上の名前は両方ともにsampleとなっていますが、別々のものとして認識されます。
実際にはあまり使わないのですが、たまにダブったりもします。（俺だけ？ｗ）
上のスタイルを反映させるためのＨＴＭＬへの記述。

<TD class="sample"></TD>
<TD id="sample"></TD>

上のほうは文字サイズが１０ポイントになり、下は２０ポイントになりますよ。

今まで述べてきた以外にもいろいろな指定法などがありますが、普段よく使うものとしてはこのぐらい覚えておけば困らないと言えます。
あとは、どこにどの指定をすれば効果的かを自分で試してみて、あらたな指定の妙を探り出してみてくださいね。