スタイルシート(CSS)のパーツ化

楽して稼ぐ！ネット副収入 > 楽して稼ぐ(ホームページ編) > CSSのパーツ化

このページではスタイルシートをパーツ化し、それを取り込む方法をご紹介します。

スタイルシートをパーツ化する方法は？

スタイルシートのパーツ化は、コンテンツを表示するページ内でスタイルを定義するのではなく、別ファイルにスタイルを定義することで行います。また、前ページのメニューやフッターのパーツ化とは違ってSSIやPHPを利用することなく取り込むことができます。

次に、実際の方法を説明します。

スタイルシートのパーツ化と取り込み方法詳細

スタイルシートをパーツ化する方法

①style.css（「style」という名前でなくてもOK）というファイルを作成し、すべてのページまたは複数のページで利用すると思われるスタイルをCSSの文法に従って記述します。

たとえば、<body> タグ内で表示する文字のフォントのサイズを11ポイント、フォントの色を青、背景にback.gifの画像を表示したい場合、style.cssの内容はこのようになります。

style.cssの内容

body{font-size:11pt;
　　　color:#0000ff;
　　　background-image:url('back.gif');
　　　}
②style.cssはトップページのファイルと同じフォルダに保存してください。
(実際にはどこのフォルダでもかまいませんが、ここではわかりやすいようにトップページと同じフォルダとしています。)

パーツ化したスタイルシートを取り込む方法

スタイルシートを適用するページの<head>タグ内にこの記述を行います。

スタイルシートを適用するファイルの内容

<heml>
< head>
<link rel=stylesheet href="階層/style.css" type="text/css">
</head>
<body>
・
・
</body>
</html>

※「階層」の部分にはstyle.cssファイルまでの階層を記述します。たとえば、フォルダの構造が以下のようになっている場合は、<link rel=stylesheet href="./style.css" type="text/css"> です。

-index.html　　←このファイルにスタイルシートを適用したい。
∟style.css　　←スタイルシートを定義しているCSSファイル　

このような構造になっている場合は、<link rel=stylesheet href="../../style.css" type="text/css"> となります。

-index.html
∟style.css　　←スタイルシートを定義しているCSSファイル
∟folder1　　　←フォルダー
　　　∟folder2　　　←フォルダー
　　　　　　∟sample.html　　　←このファイルにスタイルシートを適用したい。

このようにすると、style.cssの内容を変更した場合に、このファイルを取り込んでいるすべてのページで変更後のスタイルが適用されます。

style.cssだけを変更すればいいので、１つ１つファイルを開いて修正するよりもずっと楽ですよね？＾-^