トップページの中の CSSの基本の中の CSSの適用方法

CSSの適用方法

  • 最終更新：2009年6月26日 01:34

CSSの書き方が分かっても、実際に適用させなければ意味がないのでその適用方法です。

CSSを適用する方法は以下の5つがあります。

  1. style属性を用いて、各要素に直接指定する
  2. head要素の範囲内に、style要素によって指定する
  3. head要素の範囲内で、link要素によって外部ファイルを読み込む
  4. head要素の範囲内で、@importによって外部ファイルを読み込む
  5. xml-stylesheet処理命令で外部ファイルを読み込む

この中で一番頻繁に使用する方法が3番の「head要素の範囲内で、link要素によって外部ファイルを読み込む」になります。
4番は3番とほぼ同じですが、3番で事足りるのでhead要素内で読み込む場合には、あまり使う機会は無いと思います。

1番と2番は、(X)HTMLファイルに直接スタイルを適用させる方法のため、推奨されません。
特に1番に関しては、要素に直接スタイルを適用させているため、構造と見た目の分離がされず、CSSを使う意味が殆ど無くなってしまいます。

5番は、XMLで認められた外部スタイルシートの読み込み方法ですが、通常あまり使う機会が無いので、ここでは説明を省きます。

では、それぞれの適用方法に関して説明していきます。

1. style属性を用いて、各要素に直接指定する

<p style="color:red">
文字が赤くなります。
</p>
<p style="color:green; font-weight:bold">
緑で太字テキスト
</p>

この適用方法だと、<font color="red">文字が赤くなります。</font>と書くのと変わらなくなってしまいますので、繰り返しになりますが、推奨されないので通常は使わないようにしましょう。

2. head要素の範囲内に、style要素によって指定する

<head>
<style type="text/css">
p {
  margin-bottom: 10px;
  color: blue;
}
</style>
</head>
<body>
<p>文字が青くなり、下に10pxの余白。</p>
</body>

こちらの方法も構造と見た目の分離からかけ離れているのであまり使わないようにしましょう。

3. head要素の範囲内で、link要素によって外部ファイルを読み込む

<head>
<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" />
</head>

href属性を使って外部のCSSファイルを読み込ませます。
特別な事が無い限り、通常はこの方法を使って読み込ませる事になります。
最後の部分に書かれているmedia="all"は、対象とするデバイスを指定しています。
allの場合は全てのデバイスを対象にし、プリンタ用のCSSを用意したい場合にはprintと指定する事で可能です。
各メディアタイプに関しては「メディアタイプ」を参照してください。

4. head要素の範囲内で、@importによって外部ファイルを読み込む

<head>
<style type="text/css">
@import url("/css/style.css");
</style>
</head>

2番の方法で、@importによって外部ファイルを読み込んでいます。
この@importで読み込む方法は、head要素内で使う事より、各CSSファイルを読み込むためのCSSファイルで使う場合が多いです。

これらの方法を使う事でCSSを適用させる事が出来ますが、いずれの適用方法においても、meta要素でMIMEタイプの指定をhead要素の範囲内にする必要が有ります。

<meta http-equiv="Content-Style-Type" content="text/css" />

MIMEタイプはtext/cssと書かれている部分です。
このMIMEタイプというのは、拡張子がそのファイルの種類というのに対してMIMEタイプはこれはどういったタイプのデータ形式かを指定しています。
色々突っ込んで書くと長くなりますが、CSSを扱う場合必要な指定なので必ず書くようにしましょう。

3番の方法を使ってhead要素内に書くべき要素を全て書くと以下のようになります。

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>サイト名</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rev="made" href="mailto:hoge@example.com" />
<link rel="index" href="/index.html" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="/css/import.css" rel="stylesheet" type="text/css" media="all" />
<script src="/js/share.js" type="text/javascript" charset="utf-8"></script>
</head>

ざっくり上から説明していくと、まず最初に文字コードの指定をします。文字コードの指定は必ずtitle要素より先に書きます。
文字コードの指定を最初にしておけば以降の順番は特に決まっていないので好きな順番で書いて問題ありません。
次がtitle要素でここにはサイトのタイトルやページ名を入れ、続いて先ほどのMIMEタイプの指定を行います。JavaScriptも使う可能性が多いかと思うのでJavaScriptもMIMEタイプの指定を行っておきます。
次はお馴染みのkeywordsとdescriptionの指定をします。
その次は、制作者の明示や連絡先の指定、インデックスページの指定、ファビコンの指定などを行ってます。
最後に、link要素によってCSSファイルとJSファイルを読み込んでいます。

これで、CSSの適用方法は以上です。
適用方法が分かったら次はCSSファイルの準備をしましょう。

関連性が深いページ

このページの上部へ