外部スタイルシート／CSS外部ファイル設定

CSSスタイルシートを別ファイルにしたい！『外部スタイルシート／CSS外部ファイル設定編』

外部スタイルシート／CSS外部ファイル設定

CSS外部ファイル設定

　CSSでは、CSS1/HTML4で定義のCSSインライン設定やCSS1/HTML3.2で定義のCSSファイル内部設定もできますが、CSS2(CSS 2.0/CSS 2.1)とHTML4で定義されたCSS外部ファイル設定をW3Cでは推奨しています。

　CSS外部ファイル設定についてはCSSインライン設定の「CSSプロパティ設定部分」、CSSファイル内部設定で言えば、「<style type="text/css"></style>を除いた内側のCSS部分だけを(一般的には拡張子を.styleや.cssとして)ファイルに保存して、それをHTML/XHTMLファイルで読み込む」だけです。

<head>
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="お好きなファイル名.css" type="text/css">
</head>

　ということで<style type="text/css"></style>の記述と別ファイルに記述するstyleタグの内側のCSSプロパティ設定部分をHTML/XHTMLファイルから削除し、代わりに<head>～</head>タグ内に次の2行を追記することによって外部ファイルとしたCSS設定ファイルを読み込むことができます。

※小文字ではわかりにくいかもしれませんが[ equiv ]は[ EQUIV ]、[ link rel ]は[ LINK REL ]です。

　『"お好きなファイル名.css"』以外はこのままの記述で結構です。

　またこの部分にはファイルパス(ローカル環境でOSがWindows系ならc:¥yourdir¥やle:///C:/Users/等、サーバ上ではURI・URL)も記述できますが、ここではHTML/XHTMLファイルと同じディレクトリ内にあるものとします。

<html>
<head>
<title>内部スタイル設定テスト</title>

<style type="text/css">  



body    { background-color : #FFFFE0 ;}

div.navy    { color:#000080 ; font-weight:bold ;}
.orange  { color:#FFA500 ; font-weight:bold ;}

div#purple  { color:purple ;}

table.lightgreen    { background-color:#90EE90 ;}



</style>  


<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="あなたのお好きなファイル名.css" type="text/css">


</head>
<body>

  <table class="white" width="800" border="1">
    <tr><td>
        全体の背景色は『薄い黄色』(#FFFFE0)  文字色：黒(無指定)
    </td></tr>
    <tr><td>
        テーブルの背景色は『薄い緑』(lightgreen)  文字色：黒(無指定)
    </td></tr>
    <tr><td>
        <div id="purple">ID設定(purple)：文字色は紫</div>
    </td></tr>
    <tr><td>
        <div class="navy">CLASS設定(navy)：文字色はネイビー(#000080)で太字(bold)</div>
    </td></tr>
    <tr><td>
        <div class="orange">CLASS設定(orange)：文字色はオレンジ(#FFA500)で太字(bold)</div>
    </td></tr>
  </table>

</body>
</html>

　例えば、このようなHTML/XHTMLファイルがあった場合の編集個所は、コメントの通りです。

<html>
<head>
<title>外部スタイル設定テスト</title>

<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="あなたのお好きなファイル名.css" type="text/css">

</head>
<body>

  <table class="white" width="800" border="1">
    <tr><td>
        全体の背景色は『薄い黄色』(#ffffe0)  文字色：黒(無指定)
    </td></tr>
    <tr><td>
        テーブルの背景色は『薄い緑』(lightgreen)  文字色：黒(無指定)
    </td></tr>
    <tr><td>
        <div id="purple">ID設定(purple)：文字色は紫</div>
    </td></tr>
    <tr><td>
        <div class="navy">CLASS設定(navy)：文字色はネイビー(#000080)で太字(bold)</div>
    </td></tr>
    <tr><td>
        <div class="orange">CLASS設定(orange)：文字色はオレンジ(#ffa500)で太字(bold)</div>
    </td></tr>
  </table>

</body>
</html>

　よって入れ替え後のHTML/XHTMLファイルは、このようになり、かなりスッキリします。

　そして別ファイルとした『お好きなファイル名.css』の内容は、この通りスッキリしたおかげで色設定値に大文字(color:#FFA500等)・小文字(color:purple等)が混在していることが判明し、ここでは小文字に統一してみましたが、このように外部ファイルにすると見通しがよくなります。

　これらのHTML/XHTMLファイルとcssファイルを保存してブラウザでhtmlファイルだけ開いてみて下さい。

　できましたよね？おめでとうございます！

　CSSファイルもそうですが、たった1つのHTML/XHTMLファイルでこれだけスッキリすると、もうそれだけでもCSSを外部ファイル化するメリットとしては十分でしょう。

　サイトのページ数や統一感を持たせたいHTML/XHTMLファイルがたくさん増えてくるとスタイルシートを別ファイルにする便利さを一層実感できると思います。

　ちなみにCSSではホワイトスペース(空白やタブ)は無視されることからCSSプロパティの設定方法は必ずしも横一行に一設定とする必要はなく比較的自由に記述することができ、CSSコメントアウト/* */によりCSSプロパティ設定内にコメントを入れることもできます。

ここではCSS外部ファイルにHTML用コメントアウト[]を書いていますが、これは「ブラウザは解釈できないものを無視するものとする」というCSSのスタンスと「CSS外部ファイルはHTMLファイルから呼ばれる為、読み込まれたCSSファイルに辿りついたブラウザがHTMLのコメントを理解できないはずはない」という点を利用したものです。

　つまり、HTMLファイルでCSS外部ファイルを読み込む際に万一にもブラウザがCSSを解釈できなかった場合には、HTMLやCSSでは無視されることにはなっているものの、万一エラーが発生した場合・・・という可能性への対処で、インターネットが始まってしばらくは経験値も少なかったこともありIETFのRFC仕様やW3C仕様とブラウザの実装の間のギャップ、未知の挙動などの可能性を考えざるを得なかった頃の名残と言ってよいでしょう。

セレクタと擬似要素・擬似クラス

　インライン設定とは異なり、ファイル内設定や外部ファイル設定では、セレクタと擬似要素・擬似クラスを使用することが可能です。

CSS/スタイルシート情報

【CSS共通定義】文法と記述方法

CSS1/CSS 1.0

CSS3

2004-2008-someday