サイトのコツ：スタイルシート　くるるのエッセイ　クルル人形館

皆さんこんにちは。くるるです。前回、サイトのコツと言いながら、実際には管理者注意事項になってしまったので、今回はスタイルシートを使い、改装作業を簡単にする方法についてお話します。改装好きな方、必見です（笑）

スタイルシートとは？

スタイルシートとは、WEBページのデザイン部分を担当する部分の事で、HTMLに含めたり、別のファイルとして呼び出したりできる物です。これを別ファイルとして保存する事でHTMLファイルを見やすくし、更に改装作業などが簡単に行えるようになります。

使わなかった場合との比較

例えば背景画像を変更する事を考えて見ましょう。HTMLで背景画像を指定するには、

<body background="haikei.gif">　←背景画像の指定

というように、bodyタグ（body要素ともいう）に背景画像を指定します。これがスタイルシートの場合は、

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
	↑スタイルシートファイルを読み込む
</head>
<body>　←ここには何も書かない
</body>
</html>

body
{
	background:url(haikei.gif);　←背景画像を指定
}

という風に、なります。少し面倒に感じましたか？確かに、１つのページだけを比べた場合、スタイルシートの方が面倒です。しかしサイトが１つのページだけで構成されている事はほとんどありません。一般的な二次創作イラスト系のサイトであれば、エンターページ、トップページ、注意書き、プロフィール、フレームを使っている場合はメニュー、リンク集、イラスト一覧、各イラスト別のページ、など、少なくても10ページ以上はあるかと思います。これらの背景画像を一気に模様替えしたい、という場合、どうなるでしょう？

HTMLだけの場合

<body background="haikei2.gif">
↑この部分を10数ページ分、変更

スタイルシートの場合
10数個あるHTMLファイルは変更する必要なし

body
{
	background:url(haikei2.gif);
	↑スタイルシートのこの部分だけを変更
}

どうでしょう？スタイルシートの方が圧倒的に楽なのが分かります。これはページの量が増えれば増えるほど差が出てきます。例えば人形館の構成ファイルは、2007/01/23現在、HTMLファイルだけで910個あります。これ全部のページの背景画像を変えたい場合でも、スタイルシートなら変更箇所がたったの１ヶ所で済むのです。これなら気軽に壁紙の張り替えができますね♪

比較、その２、文字のサイズ

今度は一ページ内に指定する場所が多い場合です。このエッセイのように、各タイトルに使う文字を少し大きく、太くしたい場合、HTMLで指定すると、

<font size="+1"><b>タイトル</b></font>
文章・・・・

<font size="+1"><b>タイトル</b></font>
文章・・・・

というように、各タイトルにあたる部分全部に、fontタグで文字サイズを大きくし、bタグで太字にするようになります。これがスタイルシートの場合だと、

<h2>タイトル</h2>
文章・・・・

<h2>タイトル</h2>
文章・・・・

h2
{
	font-size:120%;
	font-weight:bold;
}

と、このように指定するタグも短くなり、HTMLが見やすくなります。また、文字の大きさや色を変更したい場合も、スタイルシートを変更するだけで、サイト内全部の個所が変わります。文字サイズを１％単位で細かく指定できるのもスタイルシートならではです。

スタイル生活のススメ

このように、スタイルシートを使うと、模様替えなどが本当に簡単になります。例えばクリスマスやハロウィンといったイベント中だけ、壁紙を変更したい場合など、ほんの少しの時間で変更できるので、凄く便利です。一度使うと病みつきになるスタイルシート。皆さんも是非、導入してみてください。

要望が高いようなら、具体的なスタイルシート導入方法や、スタイルシートを使ったデザイン例、HTMLとの高度な連携、人形館デザイン解説など、詳しい話も掲載していきたいと思いますので、希望する方はメールフォームなどから要望をお寄せ下さい。

このページでは説明を簡単にするため、HTMLの正しい記述法については触れていません。また例文も正しい記述にはなっていません。予めご了承下さい。

感想はコチラ

ご意見、ご感想は、メール：kururu@plala.toや、雑談掲示板などでも受け付けてます♪