ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ プロフェッショナルのウェブ品質は高品質 ]

プロフェッショナルのウェブ品質は高品質

リニューアルのテーマともなったのがこの表題である。品質とは何を指すのか。それは以下に述べる文書型宣言の「HTML 4.01 Strict」の文書構造だったり、文字サイズを変更できることに代表される「アクセシビリティ」だったり、更新作業を考えたSSIの採用やCSSのみでレイアウトしたデザインだったりして、そのどれもが相互関係にあるのだ。

12 Januaryr,2006

SSIで作るウェブのナビゲーション

まず、筆頭に挙げたいのがServer Side Include(SSI)である。どのページにも同一の記述を必要とする場合にこれが力を発揮する。この存在を知らない人はJavaScriptで同様の効率を実現させた人もいただろう。しかし、この記事を読んだ諸君で賢明な方はServer Side Include(SSI)をウェブで検索することになるだろう。ここでは詳しい説明は割愛する。

さて、早々に効力を発揮したのがフッターの処理だ。リニューアルしてわずかで年が明けてしまったので”Copyright 2005 ”を”Copyright 2006” に訂正しなければならない。通常であればこの更新作業は記述されたページの分だけ強いられてしまうが、SSIを使えば1ページだけの更新作業で大丈夫だ。

メインのSSIはサイドバーに配置したナビゲーションメニューだ。テーマ別に階層メニューを拡張する予定もあるため、効率的なSSIが活躍することになる。また固定的でないメニュー構成(例えば時節的なキャンペーンなど)はこの方法が一番適しているだろう。

ただし注意点がある。SSI を使ったページは、クライアントのリクエストに対しその都度サーバーからデータを送信することになる。ページを素早く表示させるキャッシュ機能が無効になることを意味するので、SSIには重い画像は使ってはいけないということだ。

装飾する画像と意味のある画像を切り分ける

何と言っても問題はこれだ。今回のリニューアルのテーマといってもいい。論理構造化したhtmlを無駄にしないためにも、テキストはテキストのままで画像に代替したくはない。そうなると画像の役割はテキストを飾るデコレーションになるか、純然たる写真などに代表される本来の意味のある画像の二種類に切り分けられることになる。

例えば、Firefoxのブラウザを起動して”スタイルシートを使わない”をクリックすると、諸君のウェブはどんなふうに表示されるだろうか。つまり、このファンクションを利用することでウェブページの簡単なチェックが出来てしまう。

過去の作者のページは間違いなくぐちゃぐちゃに表示されてしまう。特にたくさんの画像をテーブルにはめ込んだページなどは申し訳なくなるぐらい酷い。論理構造化の考えのないHTMLは哲学を持ち合わせていない人間のように薄っぺらく見えてしまうのだからたまらず逃げ出したくなる、そんな気分に陥ってしまう。

今回、そんな感慨を胸に作者が意図したのは、必要なイメージだけを表示させ論理構造化されたテキストを表示させるということだ。このことは結果としてウェブポジショニング(SEO)にとってとても有効になる。

装飾に使われたイメージを全て背景画像として処理させるとどうなるか。それはスタイルシートを読み込まない場合は当然背景画像も表示されないことになる。このことは、半端な画像の断片にどんな内容の”alt”を付ければよいんだろうという疑問への回答につながると思う。

つまりこうなってくると、イメージに対しての手法や考え方を180°転換させなければならなくなる。このことは文章に書いてしまえば数行で終わってしまうし、簡単に実行できるように思えるかもしれないが、実際にやってみるととてつもなく苦労をすることになった。

ブラウザの文字のサイズを変えられるようにする

当初、一部のテキストを固定サイズで設定したが、それを改め全てをサイズ変更できるように変更した。またその為にレイアウトの変更も伴なうことになったが、全てCSSで設定しているので比較的楽に作業は進んだ。

文字のサイズの捉え方は現段階ではこう考えている。ieでは”最大”まで、Firefoxでは”標準から二段階アップまで”変更したときにデザインが崩れないようにレイアウト設計する。最も見栄えが最適化されるのは標準サイズの時である。もうひとつ、ieでは”小”でも読めるサイズ設定を心がけた。

少しだけ話は脱線するが、横浜市が出しているWEBページ作成基準というものがある。厳密なる作成基準が定められていて、全体的に正しい方向性を感じることができる。ちゃっかり自分のところの作成基準として運用させてもらうというのもいいだろう。このぐらいの敷居値を設けていれば、基本的なノウハウを持たないウェブデザイナーは尻尾を巻いて逃げ出すだろうから。

その中でHTML文書の文法をチェックし、採点できる”Another HTML-lint gateway”が紹介されていたので、そういうチェックサイトをまとめてみた。それが次のお題だ。

「HTML 4.01 Strict」の文書型宣言を行う

W3Cによると全てのHTML文書は文書型宣言を行うべきであるとされている。現在の奨励される文書型は「HTML 4.01 Strict」である。ここでの定義は文書の構造を厳密に提示し、レイアウトに関するマークアップは排除される。言い換えれば、レイアウトとデザインは全てCSS(Cascading Style Sheets)で受けもつということだ。

ブラウザは初めにこの文書型宣言の情報を取得し、その仕様に添ってHTMLソースの内容を解釈して表示を行うと考えればいい。文書型を宣言するということはマークアップのルールに基づいて書いてあり、その仕様はここでは「HTML 4.01 Strict」であるということだ。

余談だが残念なことに、以上のような説明がウェブ制作会社から価値ある情報として語られることは極めて少ない。ある意味自分で自分の首を絞めてしまうことになるからだ。

さて、文書型宣言をしたHTMLは文法チェックサービスを行うサイトによってその内容の可否が判明する。文法に関心が無かった人はここでチェックをすると新しい発見があるかもしれない。

WDG HTML Validator
”Validate entire site”をチェックしてURLを打ち込めば、サイト内全てのページをチェックすることができる
Another HTML-lint gateway
結果を採点と解説で参照できる日本のサイト。満点が100点で減点は際限がない。
W3C Markup Validation Service
作者はここのサービスを利用した。このページの右側にあるサイドバーの下に表示されているアイコンをクリックすると本サイトの診断結果が表示される。尚、利用できるHTMLのバージョンはHTML2.0、HTML3.2、HTML4.01Transitional、HTML4.01Frameset、XHTMLなど。
W3C CSS Validator
ついでにCSSはここのサービスで万全にチェックできる。

主観で捉えられることが多いウェブページだが、以上のような厳密な観点でウェブを点検するという行為は時折必要に迫られるであろう。何しろ、ウェブデザイナーがお手本にしているメジャーなサイトは殆どが合致していないようだから。

レイアウト(box要素)と標準・互換モードとの関係

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。