XHTML CSSについて
専門的な話題が続き恐縮ですが、どうぞお付き合いください。
XHTML CSSとはインターネットブラウザでページを表示させるためのマークアップ言語と見栄えを制御するスクリプトのことを指します。以前はHTML4.0など時代とともにマークアップ言語も進化してバージョンが上がってきました。少し以前まではHTMLのみでページ構成をおこない、デザインのレイアウトに用いたのがテーブルと称されるタグを細かく組み合わせて表示させていました。この方法により各社ブラウザの解釈相違にも左右されずに均等な表示がされ、プログラマーの間では主流となっていた手法でした。時代がすすみ、あらゆる分野でユーザビリティが重要視され高齢者、身障者のいわゆるバリヤフリーがWEBのシステムにも標準（WEB標準に準拠した）として考えられるようになりました。HTML4.0以後、開発された新しいバージョンのマークアップ言語がXHTML＋CSSにマッチしているのです。バージョンの進んだXHTMLはシンプルな文書構造のみで機能し、シンプル＝分かりやすさ がユーザビリティを可能にします。そしてもうひとつのCSSというスクリプト言語は元来テーブルを使用したデザインレイアウトに変わり、外部のプログラムとしてXHTMLのデザインの部分を担います。テーブルレイアウトがどうして推奨されなくなったのかは、テーブル＝表 の本来の目的のみに使用されるべきことがWEB標準に定義されてデザインを組むためのものではないという解釈に基づきました。それにより完全に分離された文書構造＝XHTML と視覚要素・デザイン＝CSS が、WEB標準のユーザビリティに欠かせないプログラムということになりました。
WEB標準の考え方は昨今の人道的な視点から、当然のことであると考えます。正当なお仕事をするために、私が自社で取組む事業も、必然的に人道的な社会参加＝WEB標準によるあたりまえの開発・製作になるわけです。
私はサラリーマン時代が長かったこともあり、その経験が今は経営者として、営業マンとして、技術者として多くの場面でクライアントさまとの関係性にユーザビリティとアクセシビリティを持った対応・応対を、無意識に考え行動しているようです。未経験の部分も多々あり、そのことがまた成長に繋がっていると感じるこのごろです。
XHTMLにおいてWEB2.0の要素について取り上げます。最近よく耳にするWEB2.0という言葉はWorld Wide Webの様々な点での進化を総称したもので、WEBページが文字や画像情報を提供するものから、WEBページ上でユーザが買い物をしたり、WEBページ上で展開されるプログラムをユーザ同士が操作して、コミュニケーションを広げたりなど、プラットフォームとしてのWEBが展開されることを指します。具体的なシステムとして、ブログやmixiに代表されるソーシャル・ネットワーキング・サービス、RSSフィードを利用したポッドキャスティングなどが数多くのユーザに利用されています。WEBの日々躍進する進化の背景にはXHTMLに大きな役割が存在しています。ブログなどの更新情報を即座にネットワークに知らせるRSSの技術は、XMLというマークアップ言語にはじまります。そのXMLを処理できるように開発されたのがXHTMLで、ブログなどはXHTMLとXMLによるシステムで構成され爆発的なブログ人気がWEB2.0という進化したネットワークを産み出しました。現在、新しく公開されるホームページのほとどんどがXHTMLで作られていますが、以上のようなXMLと組み合わせたタイプ＝WEBページ情報をRSSで配信するホームページはそれほど普及していません。ページ要素がSEOに有効になることは言うまでもないのですが、せっかくのRSS機能を利用しない手はないと私は考えています。いずれにせよ導入に際してオプションとして料金も発生しますが、XHTML＋CSS＋RSSをフルに利用することでユーザビリティ・アクセシビリティ・SEO対策・RSSによる間口を広げる自己配信型のWEBサイトがメリットを多く含んだものになるのです。今後お取扱いする案件ではこのソリューションを是非ともすすめたいと思っています。
CSS＝Cascading Style Sheets導入に際してのメリットを具体的にお話します。WEB標準に準拠していない、テーブルレイアウト＝表組でレイアウトデザイン の場合各ページ毎のHTMLファイルの中にレイアウトデザインに関する情報が含まれます。構造要素50+レイアウト要素が100としたときに1ページあたりのファイル容量は150となったとします。サイト全体で50ページだとして、単純計算ではサイト全体のファイル容量が7500になりますね。この大規模サイトをXHTML・CSSで構築するとどうなるでしょう。統一されたデザインを基にCSSファイルが150のものを3つ用意したとします。このCSS3ファイルでサイト全体のデザインレイアウトを制御するとして1ページの構造要素50×50=2500、CSSファイルが150×3=450、2500+450=2950となり、テーブルレイアウトのサイトより4550のも容量が軽減されました。更にWEBスペースの節約とブラウザでの通信速度も50通りのファイルをいちいち読み込むのに比べ、共通した3つのファイルを読み込むことの差で表示速度においても向上します。次にサイト更新の際にベースデザイン変更といった大規模な修正が必要な場合、前者の方法では50ページすべてのレイアウトデザインの要素を修正しなければいけません。費用も新規案件に近い規模でかかります。後者のCSSではどうでしょう。レアアウトデザインの部分がCSS・3ファイルですからその3ファイルの修正だけで済みます。サイトをがらりとイメージチェンジしても経費を大きく抑えられます。
WEBサイトのページデザインにおいて、基本となるページ構成を段組でまとめます。ページ上部がロゴマークなどを配したヘッダー=header、中央部が2カラム、3カラムの構成になり、メインの部分をコンテンツ=contents、ナビゲーションリンクなどの部分をナビメニュー=navi menu またはサイドメニュー=side menu と呼びます。そしてページ下部に企業情報やコピーなどを表示させる、フッター=footer。トップページ、以下サブページを含みサイトの規模が大きくなるにつれ、各ページの統一感とナビゲーションの表示位置がユーザビリティ的に重要となってきます。通常、多くのサイトで採用されているのがヘッダー・左ナビメニュー・右コンテンツ・フッターの段組です。趣向の差はもちろんあると思いますが、私が推奨するのはヘッダー・左コンテンツ・右ナビメニュー・フッターです。その根拠は、多くのユーザが右手でマウス操作をし、ブラウザウインドウの表示・クローズボタンが右上に配置されていること、人間の目が、ウインドウが展開されて始めて注目する視点が左側上部ということを考慮して、左コンテンツ・右ナビメニューのレイアウトがユーザビリティ的に有効だと考えるからです。
