CSS(Cascading Style Sheets)を利用したページのデザインを行うことでレイアウトを容易に変更することが出来ます。スタイルシートを変更するだけで、どのようにページが変化するのかレイアウトを選んで確認してみてください。

どちらかをクリックしてください layout 1 または layout 2

進歩したレイアウト

HTML のみでレイアウトしていたころは、ボーダーの無い TABEL タグを利用してレイアウトを整えていました。TABLE タグでのレイアウトでは、TABLE の中に TABLE を作ったりしていたので自由に配置が出来なかったり、TABLE の乱用のおかげでブラウザの描画が遅くなってしまいました。

CSSが利用できるようにより、ページのレイアウトがずいぶんと自由かつ自然に行えるようになりました。また、スタイルシートの部分を別ファイルに記述することで、ページの内容を変更することなくレイアウトを変更することが出来るようにもなりました。

CSSによりレイアウトが自由に行えるようになったのですが、CSS にも機能のレベル(バージョン)があったり、ブラウザーによって CSSレベルの準拠の度合いがまちまちです。また、ブラウザに独自の CSS拡張を施しているものもあります。CSS を利用して、ほとんどのブラウザに同じレイアウトを実現するには、W3C による CSS 規格の主要な属性を使用してください 。

本文とスタイル

CSSを利用するには、「コンテンツを記述した .html ファイル」と「スタイルを記述した .css ファイル」を作成することで汎用性のあるページを作成することが出来ます。.htmlファイルにスタイルを記述することも可能です。しかし、同じレイアウトのページが複数あるときに、レイアウトを変更したくなった場合、すべてのページを編集しなくてはならなくなります。CSSの定義は、なるべく別ファイルで管理することをお勧めします。

スタイルを定義したファイルを読み込むには、HEAD タグ内で LINK タグを使用するかSTYLE タグ内で @import を使用します。

<HEAD>
...
<LINK REL=STYLESHEET TYPE="text/css" HREF="style1.css">
<style type="text/css">
@import url(style2.css);
</style> ... </HEAD>

コンテンツ・ページ

スタイルを指定できるようにコンテンツである.html ファイルを記述するには、それぞれのヘッダー・タグやパラグラフ・タグにユニークな class や id を指定します。

class を使ってスタイルを定義する場合、ピリオド(".")をはじめに指定してユニークな名前を指定します。

<HTML>
<HEAD>
  ...
<STYLE TYPE="text/css">
.sea { color: #0000FF }
</STYLE>
  ...
</HEAD>
 
<BODY>
  <H1 CLASS=sea>青色で表示されます</H1>
</BODY>
</HTML>

id を使ってスタイルを定義する場合、シャープ("#")をはじめに指定してユニークな名前を指定します。

<HTML>
<HEAD>
  ...
<STYLE TYPE="text/css">
#forest { color: #00FF00 }
</STYLE>
  ...
</HEAD>
 
<BODY>
  <H1 id=forest>緑色で表示されます</H1>
</BODY>
</HTML>

ここで class と id の違いですが、class は分類に使用し、id は固有の名前を付けるために使用します。同じようなスタイルを持たせることができるものを class として定義し、他に無い固有のスタイルを持たせるものを id として定義します。そのため、class として定義したスタイルはページ内で何度も使えるが、id として定義したスタイルはページ内で一度しか使用できません。

スタイル・ページ

スタイルを記述する .css ファイルは、W3C による CSS 規格の主要な属性を用いて好みのレイアウトになるようにスタイルを定義します。

スタイルの定義は、既存の HTML にタグにそのままスタイルを定義する方法と、ユニークな class名や id名を使用して定義する方法があります。

HTML のタグにそのままスタイルを定義する場合:

H1 {
  color: #0000FF;
  font-size: 20pt;
}

class を使ってスタイルを定義する場合、ピリオド(".")をはじめに指定してユニークな名前を指定:

.sea {
  color: #0000FF;
  font-style: italic;
}

id を使ってスタイルを定義する場合、シャープ("#")をはじめに指定してユニークな名前を指定:

#forest {
  color: #00FF00;
  font-weight: bold;
}

最後に

ここでは、CSS を使用するメリットを少しは感じられるかなという程度の紹介です。CSS の属性にどんなものがあるのか詳しく知りたい場合、W3C のサイトで調べるか書籍を購入して学習してください。