◆後半はこちら

---

■Web標準とは

Web標準という言葉は、一昨年くらいから使われ始めた言葉だが、最近はあまり使われなくなり、普通に制作会社がWeb標準に準拠してWebを制作し始めている。しかし、まだまだ私を含めてきちんと理解しきれていないところがあると思われるので、いったん整理してお伝えしたい。

Web標準というのは、Web Standardsという言葉を日本語にしたものだが、そもそもこの言葉は何なのか。堅苦しい言葉で言うと、「標準的な技術を利用してWebサイトを制作しようという考え方の定義をまとめたもの」である。

標準的な技術とは何か。WebサイトはHTMLやCSSという技術を使って制作されるが、これらの技術はW3C（World Wide Web Consortium）というアメリカにある非営利団体によって勧告されている。HTMLとは何か、HTMLはどのように書くのかということは、W3Cのサイトに仕様書としてまとまっている。

本来Webサイトを制作する者はこれらの仕様書をじっくり読み込んで、どういう仕組みになっているか理解して制作するべきなのだが、最近は書籍やソフトも充実しているので、仕様書自体を読む機会は少ない。

Web標準というのは、このW3Cの仕様書に従ってWebサイトを制作することをいう。

では、なぜWeb標準に準拠する必要があるのだろうか。身近な例で考えてみるとわかりやすい。 例えばJIS規格では鉛筆の太さや紙の大きさなどを定めているが、これによって鉛筆の太さが決まっているため、コクヨの鉛筆をトンボの鉛筆削りで削ることができる。当たり前の話に思えるが、もしそれぞれのメーカーがバラバラの太さの鉛筆を作ってしまうと、コクヨの鉛筆を買ったらコクヨの鉛筆削りを買わなくてはならないなど、利用者にとって不便なことになってしまう。

JIS規格自体は法律ではないので守らなくてもかまわない。なので中にはJIS規格外の鉛筆もあるが、それはもしかしたら製作者の怠慢だったり傲慢であって、利用者のことを考えていないのかもしれない。 それはWeb標準という規格にも言える。

Web標準を守らないで作られているサイトは世の中にたくさんあるが、それは作った人やクライアント先の会社の環境ではきちんと見ることができ、レイアウトもきれいでデザイン性も高いと評価が高いのかもしれない。しかし、そのサイトを見ている人たちの中にはもしかしたら正常にWebサイトを見ることができない人たちがいるかもしれないし、身体障害者にとっては非常に使いにくいサイトになってしまっているかもしれない。

Web標準に沿ったサイトを作ることによって、いろいろな人たちが使いやすいサイトにしていこうというのがWeb標準である。

■Webとは

そもそもWebとは何か。 Webが生れたときは確かに印刷物の代わりにネットワークを通じて画面上で見るという使われ方をしていた。が、Webの本当の利点はそこではない。 ワンソースマルチユースというのだが、一つの元となるものからさまざまな使い方ができるようにするというのがWebの本当の利点である。つまり、一つHTMLを作れば、パソコンや携帯電話を使って大人でも子供でも、自分たちの使いやすい形でデータを見ることができるということである。

Web標準に準拠したサイトの場合、文字の大きさをユーザーが変更できので、パソコンで表示しても携帯で表示しても、音声ブラウザでもきちんと読むことができる。 しかし、Web標準に準拠していないために文字の大きさが変更できないサイトの場合、Webが本来持っているこれらの力を発揮できないことになる。

■「ちゃとWeb」するためには

わが社では毎年テーマを掲げさせていただいている。今年は「みんなにWeb」というテーマを掲げているが、昨年は「ちゃんとWeb」というテーマを掲げて、Web標準をきちんと研究してWeb標準に準拠したサイトを作ることを目標にしていた。

「ちゃんとWeb」をするためには、HTML、CSSの存在意義とその役割をきちんと理解し、利用することが必要である。まだきちんとお話のできていないクライアンイトさんの場合によくあることなのだが、自分の環境のパソコンのWebブラウザでキチンと表示されていなければ嫌だ。逆に自分の環境で表示されていれば他のブラウザでは確認しないということがある。こういうのはWeb標準としては困る。

Webというのは、紙のデザインをそのまま画面に映すというものとは根本的に異なるので、美しいレイアウト、つまり「文字の折り返し位置はここでなくては嫌だ」とか、「フォントはこれでなくては嫌だ」とか、「大きさはこれでなくては嫌だ」というのは、紙ではもちろんこだわっていいところなのだが、Webではそこはこだわるべきところではないということを理解してほしい。

そこでまず、HTMLについて説明したい。 HTMLは、HyperText Markup Languageの略称である。Languageというだけあって、HTMLは言語である。つまり、英語などの外国語と同じように、何かを伝えるための外国語に近いもので、単語と文法で成り立っている。

例えば、単語というのは太字を表すbや、イタリックを表すi、フォントを表すfなどである。これらの単語で＜単語＞効果を出したい部分＜/単語＞のように効果を出したい部分を挟むことで効果を出すことができる。これを文法といい、これらの操作のことを「マークアップ」という。最近はHTMLを組む人のことをマークアップエンジニアと言うことも多くなってきた。

WebサイトのことをHyperTextと言っていたので、Webサイトを作るマークアップ式の言語のことをHTMLという。

■HTMLのバージョン

HTMLは出来上がったときの1.0から、現在は4.01になっている。その後「XHTML」という新しいものが登場した、現在のメジャーバージョンはXHTML1.0で徐々に1.1に移行中である。それに伴い、HTMLの4.01は徐々に使われなくなっていくものと思われる。なので、今から使うのであればXHTML1.0または1.1ということになる。

■XHTMLとは

HTMLがバージョンアップしていくにつれて、だんたん本来の目的から外れてきた。この状況を苦々しく思っていたW3Cが、この状況をいったん白紙に戻して改めて作り直したものがXHTMLである。そのため、HTMLに比べてXHTMLの方が非常にシンプルになっている。

■HTMLの本来の目的

HTMLは、本来は構造を意味付けるための言語である。つまり、文書の中の大見出し、小見出し、本文、署名などの構造を意味づけるための言語が本来のHTMLである。

ところが、だんだんWebデザイナーという職業が出てきてWebにデザイン性を求めるようになってきたため、HTMLがバージョンアップしてくるにつれてだんだん装飾に使われるようになってきた。その最たるものがテーブルコーディングである。

例えばYahoo! Japanのサイトを見てみると、本来は表として使うべきテーブルがレイアウトに使われている。これはExcelを使っていろいろな文章を作っているようなものである。もちろんテーブルコーディング自体がそれほど悪いというわけではないが、テーブルコーディングの何をW3Cが気に入らないかというと、「目的以外の使われ方をしている」ということである。そこで、目的以外のHTMLの使われ方を排除したものがXHTMLである。

では、XHTMLではデザイン性のあるサイトは一切作れないのかといえばそうではなく、その代わり、Webデザイナーがデザイン性を高めるために使うものとしてCSSが開発された。

■CSSとは

CSSはCascading Style Sheetの略で、XHTMLがその役割をしなくなった「装飾」を司るための技術である。CSSもHTMLと同じように単語と文法で成り立っている。

例えば単語はフォントの色を表すcolor、余白を表すmargin、罫線を表すborderなどがあり、スタイルシートを使えば、HTMLの部分には装飾のタグを使わなくていいということになる。 わが社のサイトも装飾はすべてCSSによって作られているので、ブラウザでCSSを無効にするというメニューを選べば、装飾のない純粋なHTMLを抜き出すことができる。これにより、ワンソースマルチユースが実現できる。

HTMLやCSSは前に説明した通り外国語と同じようなものなので、単語と文法を覚えないことには作れない。もしWebサイトを構築する機会があるのであれば、Amazonで「HTML CSS辞典」と検索すると何種類か本がみつかるので、それを購入するなり図書館で読むなりして覚えていただく必要がある。

■御社のサイトは「ちゃんとWeb」か

これまでの説明は制作者よりの話だったが、指示をしたりチェックをする立場の場合、これから挙げるいろいろなツールを使って御社のサイトが「ちゃんとWeb」、つまりWeb標準に準拠しているかどうかチェックする必要がある。

1.　HTML lint-gatewayで確認（googleで「HTML lint」で検索）
このサイトでWebサイトのURLを貼り付けてチェックボタンをクリックすると、そのサイトがWeb標準に準拠しているかチェックして採点してくれる。今のWeb制作者であればほとんどの場合このサイトをご存知なので、チェック結果がもし悪い点数だった場合には結果のプリントアウトを示せばたぶん修正してもらうことができるであろう。

ただ、一つ注意しておかなければならないところは、必ずしも100点を目指す必要はないということ。100点を取れないことはないのだが、100点を取るためには人に見づらいサイトを作らなければならないという本末転倒なことになることがあるからである。

例えばわが社のサイトをチェックしてみると、1行目に 「XHTML1.0 では XML宣言をすることが強く求められています。」 ということで6点減点されている。

実は、XML宣言をしてしまうと、Internet Explorer6.0で正しく表示されないという現実的な問題がある。これから先この6.0というバージョンは消えていくだろうが、まだまだ使用している人が多いので、これは減点6点になったとしてもXML宣言を入れるべきではないとわが社は判断している。

2.　多くのブラウザで確認
今、実際に使われているウェブブラウザとしては、WindowsのInternet Exploror6.0と7.0で約70％くらいのシェアになっている。逆に言うと、3割近くの人たちは違う環境でWebを見ているということになる。

具体的には、今非常に人気があり10％くらいのシェアがあるFirefoxは、Windows版とMac版とがあり、全然見た目が異なってくる。

次にMacintoshではAppleが作ったSafariが4％くらいある。4％を少ないと見る向きもあるかもしれないが、結構多いのではないだろうか。後はOperaという会社が作っているOperaというブラウザがあるが、これが1％くらいである。シェアが少ないので無視する人も多いのだが、実はOperaは非常に重要な位置を占めるブラウザである。携帯電話やPHS、任天堂のWiiに標準で搭載されているため、今後、パソコン以外からWebにアクセスする人が増えてくることを考えると無視できない。

WebサイトはWebブラウザによって文字の大きさや折り返し位置など見た目が全然異なってくるため、多くのブラウザできちんと表示されているか確認する必要がある。

3.文字の大きさを変化させて確認
文字の大きさが変化することによって文字が重なって読めなくなったり、リンクが見にくくなったりするWebサイトがある。なぜこんなことが起こるかというと、Web標準に準拠せず、標準の見た目だけでWebサイトを作ってしまったからだ。 そんなことが起こらないように、あらかじめ文字の変化によるレイアウトの崩れのチェックをしておく必要がある。ただし、その際にはInternet Explorerでは行わないようにする。なぜかというと、文字の大きさの段階が5段階しかないためあまり参考にならないからだ。これがFirefoxだと文字サイズを無段階で調整できるので、こういうブラウザでチェックするようにする。

4.CSSが利用できない状態を再現
Firefoxの拡張機能に Web Developerというものがある。これをインストールしておくと、CSSが利用できない状態を再現するのに便利である。これにより、携帯電話でどのようにみえるのかをある程度シミュレーションすることができる。

5.専用ツールを利用する（「富士通 アクセシビリティ」で検索）
先ほどのHTML lintは、HTMLが文法として正しいかを確認するツールだが、富士通のWebInspectorというツールは、障害者や高齢者がWebサイトを見たときにどのようになっているのかをチェックしてくれるものである。

このツールを使ってわが社のサイトをチェックすると、残念ながら富士通のアクセシビリティの観点からすると点数が悪くなっているが、わが社もデザイン会社なのでデザイン性を高めてお客様に魅力的に見ていただくことに重点を置いてしまったためこのような点数になっている。

もちろんもっと高齢者の方に見ていただきたいとか障害者にも使っていただきたいサイトを作るときにはわが社もそのあたりを考慮してこのツールでいい点数が取れるように作成させていただく。

■大事なこと

Web標準をきちんと理解できた方が陥ってしまう罠に、「あれはWeb標準なのですか？」とか「テーブルを使わなければWeb標準なのですか？」とか「CSSでデザインすればWeb標準なのですか？」などの質問を受けることがあるのが、それも少し違う。

もともとWeb標準や「ちゃんとWeb」の目的は、「誰でも使えるWebサイトを目指す」ということだけである。なので、「テーブルを使わない」ことでも「すべてのブラウザで完璧なレイアウトを保つ」ことでもない。目的を見失わないことが大切である。

2007/06/27 00:00:00