ＣＳＳ作成編
-2 ページ内容の検証
ここからは、旧来のページをWeb標準準拠ページにリニューアルしていくための具体的手順について考えていきます。
ページ内容の見直し
まずは既存ページを検証していきます。
CSSでスタイルを設定しながらデザインしていくというWebデザイナーさんもいらっしゃるそうですが、私は新規ページ作成の場合は ページ全体のバランスや設定を企画するために、画像ソフトを使用しています。
このデザイン案の作成時に 全体像をつかみ、細部のデザイン設定案を練っています。
尚、現状ではCSSでの作成不可能なデザインもあることを認識しておく必要もあります。
テーブルレイアウトされた既存ページを検証する場合は、本格的なページデザインを行う前に済ませておかなければならない作業があります。
既存サイトの中を、「HTMLの内容」、「適用されているCSS」、「配置されている画像やオブジェクト」の３つに分けて検証していきます。
①「HTMLの内容」の検証
一番重要なのは文書構造そのものであるHTMLの検証です。
特に テーブルタグを使って複雑なレイアウトをしている場合、伝えたい情報が提示される順序通りに配置されているかチェックし 正しく入れ替える必要があります。見やすさやわかりやすさの前に、コンピュータープログラムに情報を伝える作業があるということを忘れてはいけないのです。
CSSレイアウトでHTMLページ作成をしていくと、前述「構造と見栄えの分離」を実感します。
HTML文書内ではあくまでも ページ内のどの情報が重要なメッセージなのかだけを考えるからです。
上図は当サイトを模したサンプルページの、CSSを施す前段階のブラウザ表示です。
情報提供として、メニューよりテキスト部分が伝えたい優先度は上位なので、上部に記述しています。
テーブルレイアウトの場合、簡潔な言い方をすると、コンテンツの並び方は「伝えたい順」ではなく「左上部から表示される順」になります。
ページ上のレイアウトは後からＣＳＳによって生成されるので、表示よりまずは情報の重要性を重視して、HTML文書を作成します。
上の例は配置が単純な場合ですが、複雑かつ情報量の多いサイト構成の場合、実際の見た目の情報配置と 文書上の重要性の序列は異なることが多いかと思います。
情報を伝えるだけなら Webページはこれで充分と言えます。
テキストブラウザではこのようなスタイルの表示になりますし、音声ブラウザでは ページの上から順番に読み上げられていくことになります。
情報の並べ方が大事なのはこのためです。
②「適用されているCSS」の検証
HTML文書内で使用されるタグは 上図程度の種類で済むと言えます。
ちなみに当サイト作成にあたり、HTMLタグ辞典を参照し全非推奨タグの使用を避けました。
当サイトのコンテンツ内で使用しているタグは上図の要素程度です。ファイル容量も5～6KB程度です。
非推奨タグや装飾的要素のタグなど不要なものを排除し、構造を示すシンプルなタグのみを内容に合わせてつけていきます。
③「配置されている画像やオブジェクト」の検証
テキスト・画像・オブジェクトなどのコンテンツ内容、つまりページを構成する部品類を準備します。
テキストはメモ帳のようなエディタに書き留めたもの、その他画像やオブジェクト類、それらを準備しておいて、あとから基本構成のできあがったHTML文書へ流し込む方法が合理的でしょう。
