WEB標準

Web標準に関して庶民ホームページ製作所の対応をご説明差し上げます

ホームページ製作におけるWeb標準とは

昨今の急速なインターネット普及に伴い，当初は文章(文字)を見せる為だったホームページも随分と様相は変わり，画像，Flash，CGIやJavaScriptなどによるインタラクティブな存在へと変遷して参りました。

WEB標準準拠

こういった状況の中で各ブラウザは独自拡張を進め，ブラウザによってサポートするタグが異なったり，特定のブラウザだけに使える独自タグが増えたりと，ホームページの情報を広く共有できない不具合が発生しています。

これらの経緯の上に，このような不具合を解消し標準化を図ろうとする動きが出て参りました。また「標準化」とは前述のような表示に関する問題だけではなく，誰もがバリアフリーにインターネットに触れる事を可能にする事も意味しており，音声ブラウザや点字ブラウザなどに対応できるホームページ製作に努力する事も有用です。こういった標準化を促進する目的で勧告を発している「W3C」と言う機関があります。W3Cの勧告は多岐に渡り，すべての勧告に準拠する事は困難ですが，弊店では可能な限りW3C勧告に準拠するよう努力して参ります。

WEB標準の一例

W3C勧告内容の一例をご紹介いたします。弊店では以下の勧告を重視したホームページ製作に努力して参ります。もちろん順次，勧告案準拠に向けて継続努力いたします。

CSSによるレイアウト及び文字装飾その01: 従来はHTMLファイル内に記述されていたレイアウトや文字の装飾をCSSファイルに移動し，HTMLファイルは本来の役目である文章構造を担当させる。
CSSによるレイアウト及び文字装飾その02: テーブルタグなどで構築されていたレイアウトもCSSファイル内で定義する事により文章構造を損なわないようにする。上記2点の説明画像は概要です。この程度の物ですと標準化の意義は有っても，メリットは有りません。更に複雑な物に効果が出ます。また，ケースバイケースでテーブルタグも採用いたします。
バリアフリーなホームページ製作: 目や耳に障害を持つ方々が音声ブラウザや点字ブラウザを利用して閲覧される場合に，ホームページの内容を正確に把握して頂く為に，文章論理構造整理に加えて，画像を配置する際，文脈にマッチし，意味が通じるように留意した説明文を添付する。また，JavaScriptなどを利用した部位を製作する際，それを利用できない方々には説明文や他の誘導ページを用意して，全文解読可能な状態を維持します。

この様に標準化されたソース(HTMLファイル)は検索サイトのクローラーにも優しい構成となり，SEO対策にも有利に作用すると予測されます。

標準化への努力が趣旨ですので完璧では有りません。例えばこのページの中央列部分のソースをご覧下さい。「＜BR＞」を無頓着に使用しています。

■CSSとは
CascadingStyleSheetsの頭文字です。ホームページ(Webページ)のレイアウトを定義する規格です。これまでWebページのレイアウトはHTMLファイルに記述され，HTMLファイルはレイアウトに関するタグで満杯だったのですが，これは文書の論理構造を記述するという本来のHTML目的から逸脱した手法でしたので，Webページの視覚的構造を規定する枠組みとしてCSSが登場しました。CSSを使いますとホームページの見栄えに関する情報を文書構造を記述したHTMLから切り離すことが可能となります。また，このような文章構造適正化はSEOに有利という側面もあります。

■文章論理構造適正是非の調べかた
テキストブラウザを使用して円滑に読める文章か否かを調べる事が出来ます。テキストブラウザとは，画像やFlashなどを表示せず，文字(テキスト)のみを表示するブラウザです。Web標準の特にバリアフリーに関係する部分が良く理解できます。ＴＡＢＬＥタグを使用したサイトでの「本文を読む前に延々とメニューを読まされる」などを体感できます。ご興味の有る方々は対応ブラウザページの下方に有ります「Lynxについてはこちらをご覧下さい」からテキストブラウザを入手いただきお試し下さい。

■インタラクティブとは
ユーザー(閲覧者)の選択に応じて表示画面の内容が逐一変化したり，ユーザーとホームページ運営側との間に双方向のやりとりが存在していること等を言います。メールフォームや画像の可変などが一例です。

■W3Cとは
WorldWideWebConsortiumの頭文字です。インターネット技術に関わる企業，大学，研究所や個人などのITエキスパートが集い，インターネットで利用される技術の標準化をすすめる機関です。94年10月に発足。

■ブラウザとは
インターネット上のホームページを閲覧するアプリケーションです。Windows/InternetExplorerが多いですが，NetScape，FireFox，Opera，Mac純正safariなどがメジャーです。他にも多数のブラウザが存在しています。それぞれ，単なるホームページ閲覧だけでなくFTPや色々の機能を持っています。Windows，Macは勿論，他のOS用にも多数のブラウザが有ります。

■OSとは
オペレーティングシステムの事です。エクセル，ワード，アウトルックや，その他のアプリケーションを動作させる為の共通な基本機能を提供し，コンピュータのシステム全体を管理するソフトウェアを言います。Windows，Macなどが有名です。その他のOSにUNIXやLinuxなどが有ります。全体のシェアとしましてはWindowsが9割程度を占めているようです。

■CSSハックのお話
かつて様々なウェブブラウザが独自拡張を続けていた頃，同じソース(HTMLファイル)ですと製作者の意図した通りに表示されない等の不具合が出ていました。同じブラウザでもバージョンが違うと不具合が出ます。それ克服する為，それぞれのブラウザに対応したCSSを用意し対応する手段の事です。またブラウザ側でも，古い或いは違うブラウザ用に記述されたソースを吸収解釈して，取り敢えず体裁の取れた表示画面にする為に後方互換モードという動作を行っています。

■JavaScriptとは
ジャバスクリプトと読みます。ブラウザで利用するのに適したスクリプト言語(簡易プログラミング言語)です。以前は静的な表現(文章の閲覧など)のみ可能だったWebページに，動きや対話性を付加することを目的に登場しました。例えばマウスが触れると色の変わるボタンなどに利用します。弊店の「問合せページ」の入力チェックや入力内容確認に使用しています。このJavaScriptに似た記述(構造)の「Java」と言う言語が有りますが，似ているだけで違うものです。Javaの構造を模範した簡易版がJavaScriptです。

■ソースとは
ここで言うソースとは，ホームページ(Webページ)表示の為の元ファイルの事です。Windows/IEの方々は「表示」→「ソース」(または画面上で右クリック→「ソースの表示」)で，今ご覧になっているホームページのソースが見れます。その他のブラウザの方々は左側に有ります「ソースの見方」をご覧ください。(文字コードの関係でWindows/IEの方々はソース内の日本語文字部分が化けて表示されます。)

■タグとは
ソース内で文章(文字)やホームページ(Webページ)のレイアウトを定義する為の指示語です。例えば「あいうえお」とページに表記するには＜ｐ＞あいうえお＜|ｐ＞と，ソースに記述し，タグの説明の図ブラウザに表示させますと，この様になります。＜ｐ＞と＜|ｐ＞に挟まれている部分が文章(この場合は段落)としてブラウザに認識され，それを表示させます。これら単純な積み重ねでホームページ(Webページ)が構成されています。

バリアフリー努力の一例

弊店では文字サイズを小さくする場合には未対応ですが，大きくする場合におけるレイアウト崩壊は回避するよう製作努力しています。下記に弊店が製作したページと，某ビルダーサイトでの表示不具合の比較を提示差し上げます。ブラウザ側で文字サイズ100%と150%にして表示させました。レイアウト崩壊具合をご覧下さい。

文字サイズを変えて表示違いを比較
庶民屋の製作者側の文字サイズ指定		庶民屋のユーザー側の文字サイズ指定
上項の庶民屋サイトでは文字サイズを変えても全文が表示されレイアウトも崩れていません。
某サイトの製作者側の文字サイズ指定		某サイトのユーザー側の文字サイズ指定
上項の某サイトでは文字サイズを変えるとレイアウトが崩壊し文字が重なったり，枠から出ています。