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

point 複数のページに適用する

<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
ホーム(H)メニュー(M)戻る(B)進む(N)

見出しは緑色の文字

段落は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> 
Copyright ©2001〜2011 まさぼ〜 All Right Reserved