スタイルシートの記述方法(3)
【別ファイルに独立させ、link要素で読み込む方法】
サイト内のデザインを統一するなど、同じスタイルシートを複数のページで共有したい場合があります。 その場合は、スタイルシートを独立した1つの別ファイルに記述しておき、各HTMLからはそのファイルを読み込むようにすることができます。
この方法だと、スタイルシートの一部を変更したい場合でも、わざわざすべてのHTMLファイルを1つ1つ編集しなくても済むというメリットもあります。
◆記述場所（HTML側）
HTMLソース内には、外部のスタイルシート（ファイル）を参照するよう、次の（赤色太字の）位置に1行だけ記述しておきます。
<html>
<head>
<title>…</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
本文
</body> </html>
HTMLファイル中には、先頭付近に <head>～</head> で囲まれた部分（head要素）が存在します。 その中に、1行だけ「外部のスタイルシートを読み込んでね」という指示を書き加えておきます。
その1行とは、具体的には次のような内容です。
<link rel="stylesheet" href="mystyle.css" type="text/css">
上記ソース中の「mystyle.css」とは、スタイルを記述したファイル名です。自分で作成したファイル名に置き換えて下さい。
それ以外の部分は、上記の通りそのまま記述しましょう。
※：「rel="stylesheet"」は、href属性で指定したファイルが「スタイルシート（stylesheet）」であることを示しています。「type="text/css"」は、スタイルシートが、CSS（Cascading Style Sheets）という種類のスタイルシートであることを示しています。このまま記述するように覚えておけば問題はないでしょう。
◆記述場所（スタイルシートファイル側）
さて、スタイルは独立した別ファイルに記述することになります。
ファイルはHTMLと同じようにテキスト形式ですので、「メモ帳」などのテキストエディタで記述して下さい。
ファイル内には、スタイルをただ列挙するだけです。
以下にサンプルを記します。
@charset "Shift_JIS";
/* リンク装飾 */
a:link { color: blue; }
a:visited { color: #cc00ff; }
a:hover { color: blue; background-color: #ccffcc; }
a:active { color: #ffff60; }
a.nd { text-decoration: none; }
/* ページ全体 */
body {
background-color: white;
color: black;
margin-left: 50px;
background-image: url("whitegreen.gif");
background-repeat: repeat-y;
}
p {
line-height: 120%;
}
/* 見出し */
h1 {
text-align: center;
margin-bottom: 3px;
}
先頭の「@charset "Shift_JIS";」は、文字コードの種類を記述しているのですが、分からなければ省略しても構いません。
「 /* 」と「 */ 」で囲んだ部分は「コメント」として扱われ、その間に記述した文字はすべて無視されます。
コメントとして、「何のためのスタイルなのか」といったことを記述しておくと、後から見直す際に便利です。
(補足) スタイルの記述
今回の記事は、スタイルシートの記述場所を解説するのが目的ですので、スタイルそのものの記述方法に関しては述べません。
以下に、簡単にだけ触れておきます。
スタイルの記述は、
セレクタ { プロパティ : 値 ; }
というように記述することになっていますが、見やすくするために、
セレクタ {
プロパティ : 値 ;
プロパティ : 値 ;
}
などのように、間に改行を含めることもできます。
先ほどのサンプルでは、両方の記述方法を使っていますので、見てみて下さい。
※「リンク装飾」の部分では前者の方法を、「ページ全体」や「見出し」の部分では後者の方法を使って記述しています。
おわりに
以上、スタイルシートを記述する3つの方法をご紹介致しました。
様々な場所で紹介されている、スタイルシートを利用したテクニックを、試しに使ってみる場合は、 方法1でご紹介した方法を使うのが良いでしょう。
慣れてきて、サイト全体のデザインにスタイルシートを利用してみようと思った場合には、方法3（このページ）でご紹介した方法を使ってみて下さい。
