2016/2/16更新

CSSを直接タグに書いてスタイルを適用する方法

CSSを外部のCSSファイルではなく、HTMLファイルに直接記述する方法をご紹介します。

本来CSSファイルで外部参照するのが一般的ですが、応急処置や、外部CSSに書くまでもない一度限りの内容などで活躍します。

HTMLを文書単位でCSS指定する場合、２通りのやり方があります。

HTMLのヘッダーに直接書く方法

一つ目はHTMLのヘッダー内に<style>タグを書き込む方法です。

こちらで指定したスタイルは文書内の全ての要素に適用することができるので、文書内で特定の要素にスタイルを一括指定したい場合に便利です。

例：文書内の全てのリンク文字色を赤にする。

<html>
<head>
<style type="text/css">
a {color:red;}
</style>
</head>
<body>
<a href="#">リンクが赤くなる</a>
</body>
</html>

<html>

<head>

a {color:red;}

</style>

</head>

<body>

<a href="#">リンクが赤くなる</a>

</body>

</html>

もう一つの方法はBody内のタグ自体に直接style属性を書き込む方法です。

こちらは文書内でも特定の箇所だけにCSSを適用したい場合に便利です。

例：divタグ内の文字色を赤にする。

<div style="color:#ff0000">あああ</div>

1	<div style="color:#ff0000">あああ</div>

表示：あああ

例：divタグ内の文字色を白に、背景色を青にする。

<div style="background:#0000ff;color:#ffffff;">あああ</div>

1	<div style="background:#0000ff;color:#ffffff;">あああ</div>

表示：あああ

上記の手法はCSSを適用したい範囲によって使い分けるといいでしょう。

まとめると以下のようになります。

・CSSをサイト全体に適用したい　→　外部CSS

・CSSを特定文書内だけに適用したい　→　ヘッダーに直接記述

・CSSを特定文書内の特定箇所にだけ適用したい　→　タグに直接記述

CSS HTML