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

<font> タグの置き替え

では次に、使用することが非推奨とされている <font> タグをドキュメントから削除しますが、その前にドキュメント内のこれらのタグを検証することにしましょう。通常、ドキュメント内には一つの系統のフォントが使用されていることがほとんどであり、たいていの <font> タグ内には基本的に同様の設定が記述されています。ここでは、ページ内につぎの 4 つの <font> タグがあるとしますが、みなさんもドキュメント内のタグを検証して、フォントのパターンを見つけだしてみてください。

<font face="Arial, Helvetica, sans-serif" size="3">
<font face="Arial, Helvetica, sans-serif" color="#990000" size="+1">
<font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="-2">
<font face="Times New Roman, Times, serif" size="4"> 

このケースでは、Arial フォントが大半の <font> タグ内に使用されています。ここでは、一番上の <font> タグが最も頻繁に使用されているものと仮定し、これをデフォルトのテキストスタイルとして使用することにします。

1. Dreamweaver のメニューから [編集] - [検索 / 置換] を選択して、ドキュメント内の <font> タグを削除します。
2. [検索および置換] ダイアログボックスが開いたら、[検索] ポップアップメニューから [特定のタグ] を選択し、その横に表示されるポップアップメニューから [ｆont] を選択します。ここではタグの属性を問わず、ドキュメント内のすべての <font> タグを取り出したいので、マイナス記号 (-) のアイコンを押して属性指定を削除します。
3. [アクション] ポップアップメニューから [タグを除去] を選択し、[すべて置換] ボタンをクリックします。
4. これで、すべての <font> タグが削除できたので、次に先ほど Dreamweaver が生成した body, td, th、のルールを編集して、ページ全体のテキストに関するルールを定義します。ふたたび [ページプロパティ] ダイアログボックスを開き、[外観] の中の [ページフォント] リストから指定するフォントセットを選択します。

ここでフォントのサイズについて考えてみましょう。フォントサイズを指定する際には、ピクセルと em スペースという 2 つの単位が重要になります。どちらの単位を使用するべきかは、視覚的なデザイン性とアクセシビリティのどちらを優先するかによって異なります。各種ブラウザやプラットフォームにおいて共通のページ表示結果を求める場合は、ピクセルを使用することを推奨します。ただし、この場合、サイトのアクセシビリティにやや問題が生じます。これは、ピクセルが固定された単位であるにもかかわらず、旧式のブラウザやスクリーンアシスタントにおいてテキストのサイズが大きくなってしまうからです。一方、より柔軟な単位の em スペースを利用してフォントサイズを指定した場合、たとえユーザーが旧式のブラウザを利用していても正しくテキストサイズを大きくすることができます。ただし、この場合ページのデザイン性に問題が生じることがあります。どちらの単位を使用するかは、ターゲットとするユーザーのニーズに合わせて選択するようにしてください。このチュートリアルでは、em スペースを使用することにします。

em スペースとは、任意のフォントにおけるアルファベット m の幅を一つの単位としたサイズです。したがって、仮に Microsoft Internet Explorer が標準サイズでフォントを表示するように設定されている場合 (通常は、約 14 ピクセル)、1 em は 14 ピクセルに相当します。

[修正] - [ページプロパティ] を選択して、フォントサイズを定義してみましょう。先述の <font> タグでは、ブラウザのデフォルトサイズに相当するよう、サイズ 3 が指定されていたので、ここでは 「1 ems」にしておきます。これで、次のようなルールが完成します。

body,td,th {
   color: #FFFFFF;
   
   font-family: Arial, Helvetica, sans-serif;
}

ご覧のように、Dreamweaver は以前に定義されていた body, td, th に新たな属性を追加するだけで、新たな定義をいちから記述するわけではありません。デザインビューに切り替えて、ここまでの作業を確認すれば、新たなルール定義に沿ったテキスト表示が行われていることが確認できます。

メモ: "em" という単位は、Dreamweaver のポップアップメニューでは "ems" となっています。しかし、厳密には "em" の方が正しい単位名であり、Dreamweaver が生成するコードには正しい単位名の "em" が記述されます。

これでまず最初の <font> が CSS ルールに置き換わりました。次に、以前削除した他の <font> タグも置き替えてみましょう。

次のルール

1. [CSS スタイル] パネルに戻り、パネルの下側にある [新規 CSS スタイル] ボタンをクリックします。新しく定義するルールは、ページ内に存在する要素ごとに適用していきます。またここで定義するスタイルは、ページ内で繰り返し使用できるよう [クラス] として定義します。[定義場所] を[現在のドキュメントのみ] とし、[名前] を [.title] にします。名前の始めにピリオド (.) が含まれていることに注目してください。このピリオドがクラス定義であることを意味します。ちなみに CSS では、ピリオドで始まる場合はクラス名、シャープ記号 (#) で始まる場合は ID 名になります。またタグを再定義する場合はタグ名をそのまま使用します。このチュートリアルのサンプルでは、タイトル部分のタグが次のようになっていたことに注目してください。

   <font face="Arial, Helvetica, sans-serif" 
   color="#990000" size="+1">
   

2. [OK] をクリックすると、[.title 用の CSS スタイル定義] ダイアログボックスが表示されます。上記の <font> タグでは、既に body, td, th の定義に使用したものと同じフォントが設定されていたので、「.title」には、フォントの色とサイズだけを定義します。ダイアログボックス内の [タイプ] カテゴリにある [カラー] から #990000 (濃い赤) を選択します。
3. またテキストをタイトルとして表示するので、標準のフォントサイズより一回り大きめに指定しましょう。[サイズ] を 1.2 em に設定します。これで、通常より 20% 大きめに文字が表示されます。
4. スタイルが定義できたので、早速ページ内のテキストを選択してスタイルを適用します。この際、テーブルセル内にテキストがある場合は、セル自体を選択してスタイルを適用します。選択した箇所に対してスタイルを適用するには、[プロパティインスペクタ] の [スタイル] ポップアップメニューから、先ほど作成しておいた title スタイルを選択します。

タイトル部分のテキストが Arial フォントのままで表示されていますね。これは、既に body, td, th タグといった、上位のタグにおいて定義されたスタイル情報がそのまま継承されているからです。

ここまでに紹介した手順を繰り返して、ドキュメント内の残りの <font> タグを置き替えてみてください。

ページ 3 / 4

前のページ

次のページ