スタイルシート(CSS)講座 トップ >> スタイルシート(CSS)デザインの基礎 >> レイアウト面でのメリット

レイアウト面でのメリット

前のページで、紹介したように、スタイルシートには、
「1px単位でデザインができる」という、細かいレイアウト面でのメリットがあります。
でもそれ以外にも、まだまだたくさんのメリットがあるので、
ちょっとずつ、紹介していきますね。

ここでは、一般的なレイアウト方法でつかう、テーブルと比較して、紹介していきます。

■レイアウト面のメリット
たとえば、テーブルをつかって、下の図の、1のようなレイアウトをつくったとします。

そして、2のように、「aの縦幅を30px」、「bの縦幅を70px」にしようと、設定します。

すると、3のように、「cの縦幅も30px」、「dの縦幅も70px」というような、
レイアウトができてしまいます。

テーブル内のセルのサイズは、行と列で連動してしまうんですねー。



2のようなレイアウトは、テーブルでも作成可能なんですが、
そのためには、テーブルにテーブルを入れ子(ネスト)したりして、
フクザツなテーブル構造になってしまうんです。

そうすると、HTMLソースも、フクザツになってしまい、
管理や変更が、とてもたいへんになります。
これには、ほんとにイライラしちゃいますよね。

でも、スタイルシートでレイアウトすれば、
テーブルのように、行と列が連動することがないので、らくちんです。
それに、HTMLソースもすっきり。

テーブルだと、1つの四角い枠(便宜上)を設定するにしても、

<table><tr><td>〜</td></tr></table>

というように、 3つもタグを使用 するけど、スタイルシートでレイアウトすれば、

<div>〜</div>

のように、 1つでOK なんです。

それに、テーブルを入れ子(ネスト)すると、レイアウトがとても崩れやすいので、
スタイルシートを使用したほうが、よりデザインに有利になります。

ちょっと、長くなってきたので、ページを変えます。
次は、 管理・変更のメリッ トを紹介します。
右下のリンクからどうぞっ。

<< スタイルシートでできること

管理・変更のメリッ ト >>

<< スタイルシート(CSS)講座 トップ