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

見出しは緑色の文字

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

クラス指定も使えます。

CSSファイル(mydesign.css)のソース
h3 { color:green; }
p { font-size:20px;color:blue; }
.no1 { border:double 5px ;
       orange;color:#ff3333;
       background-color:#ffffff; }

HTML&CSS
<html>
<head>
<title>サンプル</title>
<link rel="stylesheet" href="mydesign.css" type="text/css">
</head>
<body>
<h3>見出しは緑色の文字</h3>
<p>段落は20pxで、青色の文字です。</p>
<p class="no1">クラス指定も使えます。</p>
</body>
</html> 
 

スポンサード・リンク