CSS（スタイルシート）記述方法

CSS（スタイルシート）記述方法

スタイルの記述方法は3種類あり、直接HTMLに記述する「Inlineタイプ」、 １つのHTMLごとに記述する「Embedタイプ」、 外部のスタイルシートファイルを利用する「Linkタイプ」があります。 、「Inlineタイプ」「Embedタイプ」「Linkタイプ」を併用した場合、 基本的には「Inlineタイプ」「Embedタイプ」「Linkタイプ」の順で優先されます。

Inlineタイプ

任意のHTMLタグにのみスタイルを指定します。 HTMLタグに「style属性」を追記することにより、スタイルを適用させることができます。

サンプル
HTMLソース
<p style="font-size: 11px; color: #ff1493;">
いろはにほへとちりぬるを
わかよたれそつねならむ
うゐのおくやまけふこえて
あさきゆめみしゑひもせず
ん
</p>

Embedタイプ

任意のHTMLページ全てに共通のスタイルを指定します。 ページごとにスタイルを変えたい場合に有効な方法です。 「<head>〜</head>」の間に「<style>〜</style>」と記述し、 その中にスタイルを直接記述します。

サンプル
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>タイトル</title>
<style type="text/css">
<!--
p{
   font-size: 12px;
   color: #00ff99;
}
-->
</style>
</head>
<body>

<p>
いろはにほへとちりぬるを
わかよたれそつねならむ
うゐのおくやまけふこえて
あさきゆめみしゑひもせず
ん
</p>

</body>
</html>

Linkタイプ

スタイルのみを記述した外部ファイルを作成し、拡張子を「.css」とします。 HTMLからその外部ファイルを呼び出します。 1つのHTMLから複数の外部ファイルを読み込むことも可能になります。 外部ファイルのスタイルを変更するだけで、サイト内の全てのページのスタイルを変更することもできます。

サンプル
CSSソース
p{
   font-size: 13px;
   color: #33ccff;
}
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="***.css（スタイルシートのアドレス）">
</head>
<body>

<p>
いろはにほへとちりぬるを
わかよたれそつねならむ
うゐのおくやまけふこえて
あさきゆめみしゑひもせず
ん
</p>

</body>
</html>