「Web標準」で得をする!?(前編)

先週は、Webの世界は「セマンティックWeb」に近づいていくというお話をしました。

その「セマンティックWeb」向かう流れの中で、Webデザイン・構築においては「Web標準」ということが、最近、業界誌やセミナー等で盛んに謳われています。
英訳すると「Web Standard」。
なんだかちょっとアカデミックな響きですね ^^;

では「Web標準」とは一体、何なのでしょうか?

Web標準とは、一言で言うと「WebコンテンツをW3Cの仕様に準拠して制作すること」となります。

W3Cというのは、Webで利用される技術の規格を定めている団体です。
http://www.w3.org/

さて、こんな話を始めると当然に
「あら大変!うちのホームページは、Web標準なのかしら」
という話になります。

安心してください。
実は、世の中の多くのWebサイトが、W3Cの規格に準拠していない、つまり“Web標準でない”サイトなので。
(こんな理由じゃ安心できない!? ^^;)

なぜそうなってしまったのか!?

それは、これまでブラウザを提供してきた会社(MicrosoftとNetscape)がWeb標準の実装に消極的だったからと言われています。
つまり、Web標準でサイトを作っても、思った通りにブラウザに表示されないのです。

“Web標準で作る”ということは、当然に“正しいHTML”でページを作成するということです。
“正しいHTML”ということは、当然、そのHTMLを構成するタグも、正しい使い方をされなければなりません。

例えば、レイアウトをtableタグでマークアップする場合がありますが、本来tableタグはレイアウトをするためのものではなく、表を表示するためのものです。なので、レイアウトを組むためにtableを使うのは、本来は良くないとされています。

じゃぁ、レイアウトはどうやって整えれば良いのでしょうか?

答えは、CSS(スタイルシート)です。
まず、正しいHTMLで文書をマークアップします。そしてCSSでレイアウトをしていきます。

言葉ではなかなか実感がわかないと思うので、実例をお見せします。
まずこれは当社のウェブサイトです。
(作りかけですみません・・・)
https://www.weblab.co.jp/service/index.html

このドキュメントからスタイルシートを外すとこうなります。
https://www.weblab.co.jp/service/index_noncss.html

見てすぐにおわかりになると思いますが、HTMLの方は非常にシンプルなHTMLです。デザイン要素は、CSSに記述しています。

最近、本屋さんに行って、Webデザイン関連の書籍コーナーに行くと「(X)HTML + CSS でデザインする」とか、そういうタイトルの本がたくさん置いてあります。
つまり「Web標準」や「(X)HTML + CSS」というのは、ブームというか、トレンドなのであります。

それにしても、CSSはとっつきにくい!
ブラウザによって表示のされ方も違うし。
ご自分でホームページを作っている人の中には、苦手意識のある人も多いと思います。
にもかかわらず、なんでブームなのでしょう。

実は、主にSEOやアクセシビリティにおいて、メリットが多いからなのです。
次回、その辺りを詳しくお話します。

  • このページを共有する