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