CSSの反映

Home>CSS>用途別リファレンス>CSSの反映

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

CSSをHTMLファイルに反映するには、3つの方法があります。

1.直接タグに書き込む

CSSはHTMLタグのstyle属性に書くことで、反映させることができます。

この場合、CSSが反映される範囲は、style属性を使って書き込んだタグのみです。

<img src="XXX.jpg" style="margin:10px">

上記のサンプルでは、XXX.jpgという画像の上下左右に10ピクセルの余白を取ります。

2.ウェブページ内に埋め込む

ウェブページ内に<style>~</style>タグを指定してCSSを設定することができます。
この場合、CSSが反映される範囲は、そのHTMLファイル内のみです。

この方法は、そのページにだけで使うCSSの設定がある場合に使います。
他のページでも同じようなCSSを使う場合には、効率が悪いので、この方法で記述することはやめましょう。

<html>
<head>
<title>XXX</title>
<style>
img{ margin:10px; }
</style>
<body>
HTMLソース
</body>
</html>

上記のサンプルでは、ページ内のimgタグを指定して表示している画像には、すべて上下左右に10ピクセルの余白が取られます。
なお、styleタグは、bodyタグ内でも構いません。

別のHTMLファイルには反映されないので、反映したい場合には、同様にstyleタグを設定しなければなりません。しかし、それでは効率が悪いので、その場合には、以下の方法をとります。

3.外部ファイルとして読み込む

CSSを設定する場合、もっとも効率がよく、理にかなっているのが、外部ファイルとして読み込む方法です。

設定方法

HTMLファイル側では、head要素内に以下のように書き込みます。

<link href="XXX.css" rel="stylesheet" type="text/css" />

href属性には、CSSファイルまでのURLを書きます。

外部ファイルにするCSSでは、以下のように設定します。

img{ margin:10px; }
#css-id{ padding:10px; }
.css-class{ font-size:20pt; }

上記のように、CSSの内容を羅列していきます。

なお、CSSのコメントアウトは、/* ~ */です。
※コメントアウトは、速度低下につながるので、なるべくしないほうがいい、という意見もあります。

関連リンク

よく読まれている記事

UpDate:2010-11-18