スタイルシートファイルの使い方

2010年02月16日作成

スタイルシートの解説の複数のページにスタイルを適用するで、できればこの方法を使うといいと書きました。

なぜスタイルシートファイルがいいのかピンとこない人もいると思いますので、何がいいのかを解説していきます。

スタイルシートファイルは普通、全ページから参照するようにします(方法は複数のページにスタイルを適用するに書いてあります)。

つまりスタイルシートファイルを変更すれば、全ページのスタイルを一気に変更できるということです。

今私が作成中の美肌になる方法！赤ちゃん肌の作り方を例にして説明します。

このサイトのスタイルシートファイルは以下のようになっていて全ページからこれを参照しています。

body { background-image:url(003.jpg); background-repeat:no-repeat; background-position:100% 10%; background-color:#ffffff; }
.headkeyword { font-size:12px; text-align:center; }
.center { text-align:center; }
.titlelink { color:#001100; text-decoration:none; }
.titleimage { border:0px; }
.maintable { width:760px; overflow:hidden; border:10px outset #993366; }
.contents { font-size:13px; line-height:20px; color:#001100; font-weight:normal; }
A:link { COLOR: #000099; }
A:visited { COLOR: #000099; }
A:active { COLOR: #00ff00; }
A:hover { COLOR: #ff6600; position:relative; top:1pt; left:1pt; }
.toplinkbox { font-size:13px; color:#001100; line-height:21px; }
.toplink { text-decoration:none; font-weight:bold; font-size:19px; }
.hr1 { widht:700px; border:1pt dotted #333399; }
.font1 { font-size:18px; font-style:italic; font-weight:bold; }
.linklist { font-size:13px; color:#001100; font-weight:normal; }
.contentlink { text-decoration:none; font-weight:bold; font-size:19px; }
.copyright { text-align:left; font-size:13px; }
.bold { font-weight:bold; }

ここで例えば背景の女性の画像の表示位置を少し変えたいと思えば、1行目を変えればその変更が全ページに適用されます。

7行目のcontentsクラスは、メインの文章を囲むdivタグすべてに指定している(<div class="contents">)クラスです。

なので例えばメインの文章の文字の大きさを少し大きくして行間を空けたいと思えば、7行目を変更すれば全ページに適用されます。

もし1ページごとや、ある箇所ごとにスタイルを指定していると、

サイトの全体的な文字の大きさなどを変更したくなったときに、全ページを修正しなければなりません。

10ページ程度ならそこまで大変ではありませんが、数百ページ規模となってくると何時間もかかりますし、ミスも多くなるでしょう。

実際今あなたが見ているこのホームページは200ページ近くあります。

もし全ページを修正するとなると、おそらく丸一日以上かかります。

そういうわけでスタイルシートファイルを使っています。

が、実はですね、正直に言うとこのホームページではスタイルシートファイルをあまり効果的に使えていません(汗)。

このホームページを作り始めた当初はあまり深く考えていなかったため、

例えば文字の大きさを指定するのに

fontsize13 { font-size:13px; }

のような感じでクラスを作っていき、大きさを13pxにする場所すべてにこのクラスを指定しました。

そのため、もしこれをいじって

fontsize13 { font-size:15px; }

のようにすると、fontsize13クラスを指定している箇所の文字すべての大きさが変わってしまいます。

それがどのくらいなのか把握すらできていません。

なのでその反省点を生かして、新しいサイトを作るときには上の例のように機能ごとにクラスを作っています。

contentsクラスは上で説明したようにサイトのメインの文章についてのクラス、

4行目のtitlelinkクラスはタイトルのリンクに関するクラス、

後ろから2行目のcopyrightクラスはcopyright表示の部分に関するクラスです。

このように機能ごとにクラスを作ることで、変更したい箇所だけを容易に変更することができます。

あなたもこれからホームページ作成するときは、まず最初にサイトの大体の構成を考え

それにしたがって機能ごとにクラスを作ると、いいと思います。

もちろんいきなり最初から完璧には無理かもしれませんが、一部だけでも効果があると思います。

以上ここまで読んでくださってありがとうございました。

＜＜「背景画像をいろいろやる」へ　　　　　「タイトル画像ロゴなどを作るソフト」へ＞＞

ホームページ作成とHTML初心者＞＞管理人コラム＞＞スタイルシートファイルの使い方