HOME >> スタイルシート > 複数のページに適用する

　複数のページに適用する

■	<LINK rel="stylesheet" href="URL（.css）" type="text/css">

複数のHTMLファイルに同じスタイルを適用するには、スタイルシートファイルというスタイルを設定するファイルを作って、各HTMLファイルからこのスタイルシートファイルを参照します。

まずはこのスタイルシートファイルの作り方ですが、HTMLファイルを作るときと同じように「メモ帳」などのテキストエディタでテキストファイルを新規作成し、保存する時に拡張子を「 .css 」にします。
スタイルシートファイルが作成できたら、再度メモ帳で開いてスタイルの設定を記入していきます。
記入する時の注意点として、スタイルシートファイルでスタイルを指定する場合は、<STYLE>～</STYLE>でスタイルの設定を囲む必要はありませし、コメントアウトもしなくていいです。
スタイルの設定のみ記入します。

次に、スタイルシートファイルに記述されたスタイルをHTML文書に適用するには、そのHTML文書の<HEAD>～<HEAD>間に、
<LINK rel="stylesheet" href="mydesign.css" type="text/css">
のように、<LINK>タグを使ってスタイルシートファイルの設定を取り込みます。同じディレクトリにあるmydesign.cssという名前のスタイルシートファイルを読み込む場合は、このように記述します。

スタイルシートを使う場合、この方法が一番優れていると思います。なぜなら複数のページのデザインを、1つのスタイルシートファイルで設定・変更出来るからです。そして、サイト全体のデザインを統一しやすくなります。

サンプル - Microsoft Internet Explorer

見出しは緑色の文字

段落は20ptで、青色の文字です。

クラス指定も使えます。

スタイルシートファイル（mydesign.css）のソース

H3 　{ color:green; }
P　　{ font-size:20pt;color:blue; }
.no1 { border:double 5pt ;
       orange;color:#ff3333;
       background-color:#ffffff; }

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<LINK rel="stylesheet" href="mydesign.css" type="text/css">
</HEAD>
<BODY>
<H3>見出しは緑色の文字</H3>
<P>段落は20ptで、青色の文字です。</P>
<P class="no1">クラス指定も使えます。</P>
</BODY>
</HTML>

HOME >>スタイルシート

次のページ >>