基本篇(STEP3)
１ページ全体で使う
【STYLE TYPEとCLASS】
STEP1「
必要な部分に直接書く STYLE」STEP2「
範囲の指定 SPANとDIV」ではスタールシートの指示を、効果を現したいところに直接書き入れていました。このページでは一回の指示(宣言)で、そのページのどこでも、何回でも使える方法を解説します。前半の[STYLE TYPE]では、スタールシートの宣言のしかたについて説明をします。そして後半の[CLASS]では、使い方を説明していきます。
HTMLの構成
STYLE TYPEの説明をする前に、HTML文書の基本について説明させてください。HTMLのHEAD部分について理解させている方は、次の「STYLE TYPE」に進んで結構です。
┌<HTML>
│┌<HEAD>
││ ←ここには<title>〜</title>などの記述が入っています
││ ←ここにスタイルシートの記述を加えます
│└</HEAD>
│┌<BODY>
││ ←ここには表示する内容が書いてあります
│└</BODY>
└</HTML>
HTMLの文書は上のようにHEAD部とBODY部に分かれています。HEAD部にはTITLEタグやMETAタグなど、HTML文書の構成要素などを書くことになっています。基本的にはここに書かれた内容は、画面に直接表示されるものではありません。それに対してBODY部には、(基本的に)表示させる内容を書きます。スタイルシートの[属性]と[値]をHEAD部に書いておき、BODY部で表示するときに利用するようにします。ではどのようにHEAD部に書けばいいのか、先に進みます
STYLE TYPE
<html>
<head>
<title>スタイルシートのテスト</title>
</head>
<body>
<i>イタリックです！</i>
</body>
</html>
上はどのように表示されるでしょうか。
イタリックです！
これはスタイルシートを使っていません。普通のHTMLだけで書かれています。この<i>タグを、スタイルの宣言をして「文字は赤で」「背景色を黄色で」書くようにしてみましょう
<html>
<head>
<title>スタイルシートのテスト</title>
<STYLE TYPE="text/css">
<!--
I {color:red; background:yellow;}
-->
</STYLE>
</head>
<body>
<i>イタリックです！</i>
</body>
</html>
結果は下のようになりました。
イタリックです！
「文字は赤で」は color:red;
「背景色を黄色で」は background:yellow; です。
<HEAD>から</HEAD>の間に、上の赤字部分を書き入れればいいのです。場所は間であればどこでもいいのですが、</HEAD>の上の行あたりに書き加えましょうか。これで<BODY>部分で使う<I>タグ全てに同じスタイルが反映されます。
<STYLE TYPE="text/css">
<!--
I {color:red; background:yellow;}
-->
</STYLE>
<STYLE TYPE="text/css">でスタイルシート(CSS)の記述を開始し、</STYLE>で終了しています。この間にスタイルの指示を書き入れます。
<STYLE TYPE="text/css">
<!--
I {color:red; background:yellow;}
-->
</STYLE>
HTMLでは <!-- と--> の間にコメントアウト(ブラウザに処理させない、メモのようなもの)の意味です。スタイルシートに対応していないブラウザのため、このように書いておきます。
<STYLE TYPE="text/css">
<!--
I {color:red; background:yellow;}
-->
</STYLE>
先ほどまでは「お作法」のようなものでした。この部分がスタイルシートの記述部分です。
STEP1やSTEP2では、STYLEを使ってタグに直接スタイルの指示をしていました。そのときは
STYLE="属性(Property):値(Value);"を使って、
<i style="color:red; background:yellow;">と指示しましたが、HEAD部分で使うスタイルの書き方は異なっています。先ず最初に、タグを指定します。そして { } の中に、スタイルの指示内容を書き入れます。指示内容の書き方は、STEP1やSTEP2と同じく、[属性][:(コロン)][値][;(セミコロン)]です。複数の指示を上の例のように続けて書くことができます。また下のように、見易く行を分けて記述することもできます。
<STYLE TYPE="text/css">
<!--
I {
color:red;
background:yellow;
}
-->
</STYLE>
また複数のタグに指示をしても構いません。<I> の他に <H3> にも、同じ指示をしてみましょう。
<STYLE TYPE="text/css">
<!--
I {color:red; background:yellow;}
H3 {color:red; background:yellow;}
-->
</STYLE>
これはこのように書いてもいいのですよね。
<STYLE TYPE="text/css">
<!--
I {
color:red;
background:yellow;
}
H3 {
color:red;
background:yellow;
}
-->
</STYLE>
さらに、これらをグループ化して一度に同じスタイルを指定しても構いません。
<STYLE TYPE="text/css">
<!--
I,H3 {color:red; background:yellow;}
-->
</STYLE>
それでは実際に試して見ましょう。
<html>
<head>
<title>スタイルシートのテスト</title>
<STYLE TYPE="text/css">
<!--
I,H3 {color:red; background:yellow;}
-->
</STYLE>
</head>
<body>
<h3>スタイルシートのテスト</h3>
<i>イタリックです！</i>
</body>
</html>
スタイルシートのテスト
イタリックです！
もちろん何箇所で使っても大丈夫ですよ。
<html>
<head>
<title>スタイルシートのテスト</title>
<STYLE TYPE="text/css">
<!--
I,H3 {color:red; background:yellow;}
-->
</STYLE>
</head>
<body>
<h3>スタイルシートのテスト</h3>
<i>イタリックです！</i>
<hr>
上は<i>イタリック</i>になっていますか？<br>
背景色は<i>黄色</i>で表示されていますか？
</body>
</html>
ここで今までのことを、まとめておきましょう。STEP1では「必要な部分に直接書く」ことを説明しました。このページでは STYLE TYPE を使って一回の宣言で、同じページで何回でも使える方法を説明しています。STEP1のおさらいとして、上と同じ効果になるように書いて見ます。
<html>
<head>
<title>スタイルシートのテスト</title>
</head>
<body>
<h3 style="color:red; background:yellow;">スタイルシートのテスト</h3>
<i style="color:red; background:yellow;">イタリックです！</i>
<hr>
上は<i style="color:red; background:yellow;">イタリック</i>になっていますか？<br>
背景色は<i style="color:red; background:yellow;">黄色</i>で表示されていますか？
</body>
</html>
どちらも同じ結果になります。
CLASS
今までは<I>や<H3>を例にして説明をしてきました。これで同じページ全ての<I>や<H3>に同じ効果を反映することができました。しかし、<I>で普通に表示しり、先ほどの例のように赤字に背景を黄色で表示することを混在させるにはどうしたらいいでしょうか。まとめで示した <i style="属性:値;"> でスタイルを指示すれば使い分けることができますが、何回も指示をするのは面倒です。そこでこのような方法があります。同じタグでも STYLE TYPE の指定を変えることができます。[通常のイタリック][赤字に背景色が黄色のイタリック][青字に太字のイタリック]この３種類で表示してみましょう。
このように書かれています
<html>
<head>
<title>スタイルシートのテスト</title>
<STYLE TYPE="text/css">
<!--
I.red {color:red; background:yellow;}
I.blue {color:blue; font-weight:bold;}
-->
</STYLE>
</head>
<body>
<center>
<h3 style="color:red; background:yellow;">スタイルシートのテスト</h3>
<p><i>・・・<i>イタリックです！</i></p>
<p><i class="red">・・・<i
class="red">イタリックです！</i></p>
<p><i class="blue">・・・<i
class="blue">イタリックです！</i></p>
</center>
<hr>
どうですか。(略)。
</body>
</html>
I.red と I.blue として、HEAD部にスタイルの宣言をしています。タグ(I)+.(ピリオド)+任意のクラス定義名(redやblue)でタグごとに細かく定義することができます。BODy部では CLASS=" "とHEAD部で宣言をしたCLASS定義名を指定します。
クラス定義はタグに依存しなくても構いません。.red や .blue として、いろいろなタグにスタイルを指定することができます。先ほどの例を、.red や .blue で書いてみます。
<html>
<head>
<title>スタイルシートのテスト</title>
<STYLE TYPE="text/css">
<!--
.red {color:red; background:yellow;}
.blue {color:blue; font-weight:bold;}
-->
</STYLE>
</head>
<body>
<center>
<h3
class="red">スタイルシートのテスト</h3>
<p><i>・・・<i>イタリックです！</i></p>
<p><i class="red">・・・<i
class="red">イタリックです！</i></p>
<p><i class="blue">・・・<i
class="blue">イタリックです！</i></p>
</center>
<hr>
どうですか。(略)。
</body>
</html>
<I>にも<H3>にもクラスの定義が反映ささせることができました。
何もHTMLのタグにこだわる必要はありません。自分でSTYLE TYPEを設定して<DIV>や<SPAN>を使って自由に使うこともできます。<DIV>や<SPAN>についてはSTEP2の「
範囲の指定」を参照してください。それでは<SPAN>を使って、10ポイントと16ポイントと20ポイントの赤字を混在させてみましょう。
<html>
<head>
<title>スタイルシートのテスト</title>
<STYLE TYPE="text/css">
<!--
.red10 {color:red; font-size:10pt;}
.red16 {color:red; font-size:16pt;}
.red20 {color:red; font-size:20pt;}
-->
</STYLE>
</head>
<body>
<center>
<h3
class="red20">スタイルシートのテスト</h3>
<p><span class="red10">・・・<span
class="red10">10ポイントです！</span></p>
<p><span class="red16">・・・<span
class="red16">16ポイントです！</span></p>
<p><span class="red20">・・・<span
class="red20">20ポイントです！</span></p>
</center>
<hr>
どうですか。ポイント数が異なって表示されていますか。<span
class="red10">10ポイント</span>と<span
class="red16">16ポイント</span>と<span
class="red20">20ポイント</span>にSTYLE TYPEを指定しています。
</body>
</html>
STEP1では<i style="color:red;">のように「
必要な部分に直接書く」方法を、STEP2の「
範囲の指定」では<DIV>と<SPAN>の使い方、そしてこのSTEP3ではHEAD部にSTYLE TYPEを宣言して、使いたいところで<i class="red">のように使用する方法を解説しました。具体的にスタイルシートで何ができるかは別のページで説明しますが、基本篇としては次の「
複数のページで共通に使う」で終了です。もう少しですから頑張ってください。
Copyright 2001-2002 Coco's Home. All rights reserved.