外部スタイルシート／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ファイルで読み込む」だけです。

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

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

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

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

HTML5のdoctype宣言は<!doctype html>だけでOKです(xhtmlのdoctype宣言)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<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ファイルは下記のようになり、かなりスッキリします。

　書かなければわからないくらい地味ですが、ついでにtitleを「内部スタイル設定テスト」から「外部スタイル設定テスト」に変更してみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<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>

　そして別ファイルとした『お好きなファイル名.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仕様とブラウザの実装の間のギャップ、未知の挙動などの可能性を考えざるを得なかった頃の名残と言ってよいでしょう。

　次は、いよいよリンクです！文章をクリックすると飛ぶアンカータグについてです。

文章をクリックして他のページに飛びたい！『Aタグ・アンカー編』

アンカー(リンク)って↑コレのことですよ。

CSS/スタイルシート情報

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

CSS1/CSS 1.0

CSS3

ウェブ造ホームページの作り方・ウェブサイト作成制作

2004-2012

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

外部スタイルシート

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

CSS外部ファイル設定

CSS/スタイルシート情報

ウェブ造 ホームページの作り方・ウェブサイト作成制作

ウェブ造ホームページの作り方・ウェブサイト作成制作