気の向くままに辿るIT/ICT
webzoit.netウェブサイトホームページ
CSS / Cascading Style Sheets / スタイルシート

外部スタイルシート/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"』以外はこのままの記述で結構です。

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

<!-- 必要に応じた doctype -->

<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ファイルがあった場合の編集個所は、コメントの通りです。

<!-- 必要に応じた doctype -->

<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外部ファイル『お好きなファイル名.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 ;
}

-->

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

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

 できましたよね?おめでとうございます!

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

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

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

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

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

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

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

CSS/スタイルシート情報

ウェブ造ホーム前へ次へ