サンプル - Microsoft Internet Explorer |
見出しは緑色の文字段落は20pxで、青色の文字です。 クラス指定も使えます。 |
複数の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で、青色の文字です。 クラス指定も使えます。 |
h3 { color:green; } p { font-size:20px;color:blue; } .no1 { border:double 5px ; orange;color:#ff3333; background-color:#ffffff; }
<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>