トップ > スタイルシートデザイン > スタイルシートデザインとは
スタイルシートデザインとは
スポンサード リンク
そのスタイルシートを使ってWebページをデザインをしようというのがスタイルシートデザインです。
当サイトではこのような意味でスタイルシートデザインという言葉を使っていきます。
スタイルシートを使うと、Webページの文章とデザイン・レイアウトをほぼ完全に隔離することが出来ます。
これによって作業の効率化を図ることが出来ます。
例として、以下のソースを見て下さい。
<table border="0">
<tr>
<td width="200">
メニュー
</td>
<td width="500">
メイン
</td>
</tr>
</table>
よくある左右2分割のテーブルレイアウトの簡単な例です。<tr>
<td width="200">
メニュー
</td>
<td width="500">
メイン
</td>
</tr>
</table>
これをCSSを使って表すと以下のようになります。
<div class="menu">
メニュー
</div>
<div class="main">
メイン
</div>
メニュー
</div>
<div class="main">
メイン
</div>
.menu{
width:200px;
float:left;
}
.main{
width:500px;
float:right;
}
width:200px;
float:left;
}
.main{
width:500px;
float:right;
}
HTMLファイルでクラスを指定して、CSSファイルで該当クラスのスタイルを設定しています。
これだけではCSSの利点が分からないかもしれませんが、利点はちゃんとあります。
例えば、メニューやメインの幅を変更する時、CSSの威力が発揮されます。
HTMLのみで記述している場合は全てのファイルに対して数値の変更をしなければなりません。
それに対して、CSSデザインの場合はCSSファイルの値を変更するだけで全てのファイルに適用することが出来ます。
HTMLファイルの数が多ければ多いほど違いがはっきりします。
このコーナーでは、このように便利なCSSを使ったスタイルシートデザインについて紹介しています。