基本篇(STEP1)
書き方の基本【STYLE】
さて、どのようにスタイルシート(CSS)は書けばいいのでしょうか。スタイルシートには、大きく分けて３種類の書き方があります。
３種類の書き方
便利な度合いは Ｃ ＞ Ｂ ＞ Ａ ですね。必要に応じて使い分ければいいのです。
Ａの「必要な部分に直接書く」方法が、初めて使う人には理解しやすいでしょう。この方法でテストをして慣れたら、次にＢの「ページ全体で使う」で試してください。Ｂでは、同じ指定が同一ページの中で、何度でも使えて便利です。そして最後に、Ｃの「複数のページ共通で使う」を実行すれば、便利さが一気に増すのではないでしょうか。
それでは、最初の「必要な部分に直接書く」方法から始めましょう。あまり最初からジックリと読む必要はありません。先ずは、気にしないで読み飛ばしてください。必要になったところで、また戻ってくればいいのですから。
HTMLのタグ、例えば<H1>や<HR>の中に直接、スタイルシートの記述を書き込む方法です。先ずは、下のボックス内の赤い太字に注目してください。
スタイルを指定して赤い太字にしました。
上はこのように書かれています。
スタイルを指定して<strong style="color:red;">赤い太字</strong>にしました。
青字の部分がスタイルシートの記述です。
HTMLでは太字にするには<STRONG>や<B>タグを使います。
スタイルを指定して<strong>赤い太字</strong>にしました。
これを赤字にするのですから、HTMLではFONTタグを使ってこうなりますね。
スタイルを指定して<strong><font color="red">赤い太字</font></strong>にしました。
結果はHTMLでの記述と同じになりますが、スタイルシートではこう書きました。
スタイルを指定して<strong style="color:red;">赤い太字</strong>にしました。
HTMLではSTRONGタグとFONTタグを使っていましたが、CSSでは
STYLE="color:red;" と書いています。この
STYLEこそが、スタイルシートの書き方です。
でもこれなら「いままでのHTMLと大差ないからいいや」と思わないでくださいね。これならどうですか。
スタイルを指定して赤い太字にしました。
上はこのように書かれています。
スタイルを指定して<strong style="color:red; font-size:30pt; background-color:#A6F6F6;">赤い太字</strong>にしました。
赤い文字で、フォントを30ポイントの大きさで、文字の背景色を変えています。
今までのHTMLだけでは、できないことができています。まだまだ、いろいろとできますが、このページでは、HTMLのタグに「STYLE を付けて書くとスタイルシートの指定ができる」ことだけを覚えておけばいいですよ。
まとめ STYLE="属性(Property):値(Value);"
これが書き方の規則です。[属性]には多くの種類があります。そして各々の属性には決められた形の[値]を指定します。詳しくは他のページで説明しますので、ここでは
「STYLEには[属性]と[値]を指定する」
と覚えてください。
いままではSTRONGタグを使用しましたが、他にもほとんどのタグにスタイルシートの属性を指定することができます。見出し文字のサイズ指定に使うタグ Hn で試してみましょう。ここでは<H1> を使って説明します。
H1を使っています
<h1>H1を使っています</h1>
スタイルシートは使っていません。
H1を使っています
<h1 style="color:red;">H1を使っています</h1>
[属性]はcolor、[値]はredです。
H1を使っています
<h1 style="font-size:10pt;">H1を使っています</h1>
H1なのに小さくなってしまいました。フォントの大きさを10ポイントに指定したからです。
H1を使っています
<h1 style="color:red; font-size:10pt;">H1を使っています</h1>
２種類の属性を指定しました。１種類だけの指定のときには
<h1 style="font-size:10pt;">でも
<h1 style="font-size:10pt">のようにセミコロン(
;)を省略しても構いません。しかし複数の属性を指定するときには、必ずセミコロンで区切ってください。多くの指定を続けると、ソースコードが見にくくなりますので、セミコロンと次の属性の間は半角スペースを空けたほうがいいでしょう。全角スペースを使用するとInternet Explorerでは問題なく表示されましたが、Netscapeでは全角スペース以降の指定が無視されてしまいました。必ず半角スペースを使ってください。蛇足ですが</H1>などHTMLの終了タグも忘れないようにしてください。
これで「必要な部分に直接書く」は終了です。続いて「１ページ全体で使う」に進みますが、その前にSPANタグとDIVタグがあることをご存知ですか。スタイルシートを使うときに、SPANタグとDIVタグを頻繁に使うことがありますので、先に解説をしておきます。いまご覧頂いているページもSPANとDIVを頻繁に使っています。それでは次の「
範囲の指定」に進んでください。
Copyright 2001-2002 Coco's Home. All rights reserved.