CSSの記述方法 - HTMLファイルのヘッダーに記述

記述したページ内で複数使われる指定には便利なヘッダー部への記述法。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

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的にも有利に働きます。

なお、上の例ではタグを直接指定する方法を掲載していますが、セレクタを指定しても記述も同様に行うことができます。