CSSの記述 − HTMLファイルのヘッダーに記述
CSSの記述・2番目の方法は、HTMLファイルのヘッダー(HEADタグ)内に記述する方法です。HTMLのソースを見ると、最上部に「<head>〜</head>」で囲まれた部分があります。ここにはそのページの文字コードの指定やタイトル名などが記述されていますが、ここにCSSの記述を埋め込むというものです。
実際に指定するには、次のような記述を「<head>〜</head>」の間に記載します。
<style type="text/css">
<!--
CSSの指定を記述
-->
</style>
<!--
CSSの指定を記述
-->
</style>
ここで指定されたCSSは、指定したページ内でのみ有効となり、例えば以下の例のように、ヘッダー部分でSPANタグに関する指定を行った場合、このページのSPANタグには指定が反映され、他のページでは反映されないことになります。
例1:同一ページ内のSPANタグ内の文字を赤・太字にする。
CSSの記述
<html>
<head>
<title>SPANタグ内の文字を赤・太字に</title>
<style type="text/css">
<!--
span { color:red; font-weight:bold; }
-->
</style>
</head>
<body>
<span>SPANタグ内は赤・太字になります。</span>
</body>
</html>
<html>
<head>
<title>SPANタグ内の文字を赤・太字に</title>
<style type="text/css">
<!--
span { color:red; font-weight:bold; }
-->
</style>
</head>
<body>
<span>SPANタグ内は赤・太字になります。</span>
</body>
</html>
ブラウザ上の表示
SPANタグ内は赤・太字になります。
SPANタグ内は赤・太字になります。
あくまで同一ページ内でのみの反映ですので、「このページでは多用するけど、他のページでは使わない」といった指定には便利ですが、どうせid名やクラス名を指定しまとめてCSSを記述するのであれば、外部ファイルに記述してあげた方がHEAD部分の長さも短くなり、SEO的にも有利に働きます。
なお、上の例ではタグを直接指定する方法を掲載していますが、セレクタを指定しても記述も同様に行うことができます。
