TOP - CSS1(Cascading Style Sheets, level 1) - スタイルシートの組み込み方法


(1) インラインスタイル

style属性を利用して、タグにスタイルシートを適用します。

(例)
<p style="color: red">この段落は赤で表示されます</p>

(2) ドキュメントレベル

<STYLE>タグを利用してドキュメントにスタイルシートを適用します。

(例)
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
H1
{
    color: red
}

H2
{
    color: blue
}
-->
</STYLE>
</HEAD>
<BODY>
<H1>ここは赤で表示されます</H1>
<H2>ここは青で表示されます</H2>
</BODY>
</HTML>

(3) 外部ファイル(インポート)

@import表記を利用して外部ファイルに記述されたスタイルシートをインポートします。

(例)

test.html
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
@import url(test.css);
-->
</STYLE>
</HEAD>
<BODY>
<H1>ここは赤で表示されます</H1>
<H2>ここは緑で表示されます</H2>
</BODY>
</HTML>
test.css
H1
{
    color: red
}

H2
{
    color: green
}

(4) 外部ファイル(リンク)

<LINK>タグを利用して外部ファイルに記述されたスタイルシートをロードします。

(例)

test.html
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<LINK rel="stylesheet" type="text/css" href="test.css">
</HEAD>
<BODY>
<H1>ここは赤で表示されます</H1>
<H2>ここは緑で表示されます</H2>
</BODY>
</HTML>
test.css
H1
{
    color: red
}

H2
{
    color: green
}


Copyright(C) 2006-2011 CLAYPOT. All Rights Reserved.