アクセシビリティ
デベロッパーリソース

目次

  1. はじめに
  2. <body> 属性の置き換え
  3. <font> タグの置き替え
  4. その他の不要属性の置き替え

既存サイトの段階的な CSS への移行

<body> 属性の置き換え

では早速スタイルを定義してみましょう。ここからは、置き替えるタグを抽出し、同様の (場合によっては、それ以上の) 効果を実現するためのスタイルを作成する作業に移ります。Dreamweaver MX 2004 を起動して、テーブルによってレイアウトが構成され、なおかつ従来の手法でページの見栄えが定義された任意のページを開いてください。まず、ファイルのバックアップを取っておきます。

CSS への移行の第一ステップとして、通常 <body> タグの属性として定義されていたページプロパティを置き替えることから始めてみましょう。<body> タグの属性はページによってまちまちですが、ほとんどの場合つぎのような構成になっているはずです。

<body bgcolor="#E6e6e6" text="#FFFFFF" leftmargin="0" 
topmargin="0" marginwidth="0" marginheight="0">

<body> タグ内の属性を次の手順で置き替えます。

  1. Dreamweaver MX 2004 を起動します。
  2. テーブルでレイアウトが構成された HTML ドキュメントを開きます。
  3. Dreamweaver MX 2004 をコードビューに切り替えます。
  4. <body> タグを見つけて、body 以降にあるすべての属性を削除します。

重要: <body> タグ内に OnLoad ハンドラといった JavaScript が記述されている場合、これらの属性はそのままにしておきます。上の例の場合、bgcolor、text、leftmargin などといった属性は、すべて不要です。これらの要素は、すべて CSS を利用して <body> タグを再定義する手法に切り替えます。

Dreamweaver MX 2004 から <body> タグを再定義するには、つぎの 2 つの方法があります。[ページプロパティ] ダイアログボックスを使用するか、あるいは [CSS スタイル] パネルを利用してスタイルを手動で入力するかです。ここでは、[ページプロパティ] ダイアログボックスを使用してスタイルを定義してみましょう。一つ注意しておかなければならないのは、この方法でスタイルを追加した場合、スタイルの定義が外部のスタイルシートではなく、作業中のドキュメント内に定義されてしまうことです。最終的にはスタイルを外部スタイルシートにて定義するのが望ましいのですが、個人的にはまずドキュメント内でスタイルを定義し終わってから、外部のスタイルシートに書き出すという方法の方が作業しやすいのではないかと思います。

<body> タグを次の手順で再定義してみましょう。

  1. メニューから [修正] - [ページプロパティ] を選択して、bgcolor や text 属性などの値を元通りに設定し直します。[ページプロパティ] ダイアログボックスをご覧になるとおわかりのように、Dreamweaver MX 2004 からはデフォルトのページフォントやフォントサイズ以外にも、従来の HTML では設定することができなかった数々の属性も新たに定義できるようになっています。取りあえずここでは、先程削除した属性だけを指定することにしておきましょう。ダイアログボックスでの作業が完了すると、Dreamweaver は自動的につぎの 2 つの CSS ルールをドキュメントの <head> 内に生成します。 

    <style type="text/css">
<!--
body,td,th {
   color: #FFFFFF;
}
body {
background-color: #e6e6e6;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
}
-->
</style>
  2. ここまでに行ったスタイル定義は、[CSS スタイル] パネル (メニューから [ウィンドウ] - [CSS スタイル] を選択) 内に表示されている <style> タグを展開して確認することも可能です。
  3. 上記のコードの中に body タグが 2 度登場していることに注目してください。一度目は、td、th とともに body が登場しています。CSS 初心者のために補足すると、これは上記 3 つのタグすべてに対して文字色 #FFFFFF が再定義されていることを意味します。

以前にも説明しましたが CSS を導入する最大の理由は、ページを表示する上で必要なコード量を減らすことにあります。ご覧のように、CSS は各項目をコンマ記号 (,) で区切ることによって、複数のルールを一行で定義できるようになっています。

ページ 2 / 4
前のページ
次のページ