ココのスタイルシートで遊びませんか[何ができるの？の前に]

「何ができるの？」の前に

基本篇で、スタイルの指定の仕方について説明をしましたが、ここで簡単におさらいをしておきます。「何ができるの？」の各ページではスタイル属性を紹介して、実際にどのようなことができるのかを示していきます。ただしスタイル指定の記述方法については、重複するので細かく説明はしていません。このページで共通の記述方法について簡単にまとめておきます。詳しい説明が必要になりましたら、基本篇のSTEP1からSTEP4を参照してください。

必要な部分に直接書く方法　STYLE="属性:値;"

スタイルの指定はSTYLE="属性:値;"です。

上はこのように書かれています。

スタイルの指定は<strong style="color:red;">STYLE="属性:値;"</strong>です。

青字の部分がスタイルシートの記述です。

STYLEに属性と値を書き入れ、スタイルを直接指定しています。「何ができるの？」の各ページは、この「属性と値」を紹介しています。

記述の仕方は

<strong style="color:red;">でも

<strong style="color:red">のようにセミコロン(;)を省略しても構いません。また属性は一つだけでなく、複数指定することもできます。しかし複数の属性を指定するときには、下のように

<strong style="color:red; font-size:10pt;">STYLE="属性:値;"</strong>

必ずセミコロンで区切る必要があります。

詳しくは基本篇のSTEP1とSTEP2をご覧ください。

１ページ全体で使う方法
STYLE TYPEの記述と CLASS="クラス定義名"

上の「必要な部分に直接書く方法」では、HTMLのタグにSTYLEの属性と値を書き込みましたが、その他にHTMLのBODY部にスタイルの宣言をして、必要な部分でCLASSを使って指示します。下に使用例を示しておきますが、詳しくは基本篇のSTEP3をご覧ください。

<html>
<head>
<title>スタイルシートのテスト</title>
<STYLE TYPE="text/css">

</STYLE>
</head>

上がHEAD部で、赤字部分にスタイル記述をおこないます。続いて下のように表示の指示をCLASSを使用しておこないます。

<body>
<h3 class="red16">スタイルシートのテスト</h3>
<span class="red16">16ポイントです！</span>
<i>イタリックです</i>
</body>
</html>

複数のページで共通に使う方法
link rel="stylesheet" type="text/css" href="スタイルシートファイル名"

拡張子を css としたスタイルを記述した外部定義ファイルを読み込み、CLASS記述で指示します。詳しくは基本篇のSTEP4をご覧ください。下に「外部定義ファイル」の例と、指示例を示しておきます。

.red16 {
　　color:red;
　　font-size:16pt;
}
I {
　　color:red;
}

上の外部定義ファイルの名前が stylecoco.css としたとき、スタイルシートを使いたいHTMLファイルのHEAD部分では、下のように書きます。

<html>
<head>
<title>スタイルシートのテスト</title>
<link rel="stylesheet" type="text/css" href="./stylecoco.css">
</head>

続いて下のように表示の指示をCLASSを使用しておこないます(先ほどの例と全く同じです)。

<body>
<h3 class="red16">スタイルシートのテスト</h3>
<span class="red16">16ポイントです！</span>
<i>イタリックです</i>
</body>
</html>

これらの記述方法のどれを使用しても構いません。用途に応じて使い分けてください。次のページからの「何ができるの？」の各ページには、スタイル属性とその値を紹介していますので、ご自分で CLASS= を使うか STYLE= を使うか試してみてください。

| Back | Coco's Home | ココのスタイルシートで遊びませんか(Top) |