スタイルシートを組み込む

目次

Ⅰ．ＨＴＭＬにスタイルシートを組み込む

ＩＥＮＮ
<STYLE type="text/css">～</STYLE>

ＨＴＭＬの中にスタイルを記述する場合に使用する方法で、固有のスタイルを記述する
場合に使用されます。
<STYLE>～</STYLE>は<HEAD>～</HEAD>の範囲内に記述します。

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>

<STYLE type="text/css">

<!--
BODY { color:            #000000;
       background-color: #eeeedd;
}
-->

</STYLE>

</HEAD>
<BODY>
</BODY>
</HTML>

Ⅱ．別ファイルのスタイルシートを読む

<LINK rel="stylesheet" href="URL" type="text/css">

URLスタイルを記述したファイルのＵＲＬ

スタイルを記述した別ファイル（拡張子＝ｃｓｓ）を読み、利用する方法です。

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<LINK rel="stylesheet" href="test.css" type="text/css">
</HEAD>
<BODY>
</BODY>
</HTML>

[スタイルを記述した（test.css）の内容]
BODY { color:            #000000;
       background-color: #eeeedd;
}

Ⅲ．タグ内にスタイルシートを組み込む

<要素名 style="スタイル">

URLスタイルを記述したファイルのＵＲＬ

任意のタグにスタイルを記述方法です。

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
</HEAD>
<BODY>

<BODY style="color: #000000; background-color: #eeeedd;>
<H1 style="color: #ffffff">スタイルシートサンプル</H1>

</BODY>
</HTML>

Ⅳ．定義済みのスタイルを適用する

＃ＩＤ名　｛スタイル｝
<要素名 ID="ID名">
．クラス名　｛スタイル｝
<要素名 class="クラス名">

ＩＤ名やクラス名を指定してスタイルを定義しておき、それをｉｄ属性やｃｌａｓｓ属性で
指定した要素だけに適用させる。
ｉｄ属性は、そのｈｔｍｌの中で１つの要素にしか適用することが出来ません。
ｃｌａｓｓ属性は同じものを複数の要素に対して指定することが出来ます。

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 .red { color=#ff0000 }
 #blue { color=#0000ff; font-weight: bold }
-->
</STYLE>
</HEAD>
<BODY>
<div class="red">前景色＝赤字</div>
<div id="blue">前景色は青で太字</div>
</BODY>
</HTML>

Ⅴ．任意の範囲にスタイルを適用する

<SPAN>～</SPAN>
<DIV>～</DIV>

ＳＰＡＮ要素はインライン要素、ＤＩＶ要素はブロックレベルの要素であることを示し
他に要素としての特別な意味を持っていません。
従って、他の要素で特に指定されていない範囲にスタイルを適用する場合などに利用します。

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 DIV.center { text-align: center }
 .red { color=#ff0000; }
 .blue { color=#0000ff; font-weight: bold }
-->
</STYLE>
</HEAD>
<BODY>
<div class="center">
<SPAN class="red">前景色＝赤字</SPAN><BR>
<SPAN class="blue">前景色は青で太字</SPAN><BR>
</BODY>
</HTML>

［メインに戻る］