ホームページを作ろうヨ!!

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

その2★視覚性を重視しない音声ブラウザやテキストブラウザに対応できる

スタイルシートの基本として「box」という概念があります。

複雑なレイアウトをする場合、これまではテーブルの各セルに内容を書き込んで配列していたわけですが、テーブルについての解説（「テーブルの基本その1・構成要素を知る」参照）をお読み頂ければ分かるように、テーブルを構成する各セルのHTML上での記載順序は予め定められています。それは必ず左上のセルから始めて横に向かい、その終わりまできたら次の行に移るという順序ですね。

行

・

列.....

1.	2.	3.
4.	5.	6.

この順列の制約があるために、テーブルを用いたレイアウトで例えば各項目へのリンク（ナビゲーション・メニュー）を画面の上や左に集めて表示した場合、HTML上では必ずこのメニューの記載が本文より先に来ます。従って、各ページにこれが設定されていると、HTML上で書かれている順に上から読み上げてゆく音声ブラウザを利用しているユーザーは、ページを移動するたびごとにまずメニューが読み上げられることになり、必要とされる本文内容はその読み上げが済まないと出てこないことになります。これが音声ブラウザのユーザーにとって極めて不都合であることは言うまでもないでしょう。しかしテーブルに配列の法則が定まっている以上、テーブルでのレイアウトでは、画面表示をそのままにしてHTML上での記載位置を下に持ってくることは出来ません。これがテーブルの限界なのです。

それでは、セルの位置をテーブルから切り離して、画面上の自由な位置に表示することが出来ればどうでしょうか。画面上で上や左に固めて表示したいナビゲーション・メニューでも、HTML上で本文が書き込まれているセルより下に記述することが出来れば、音声ブラウザのユーザーにとってもムダなリンクの読み上げを我慢することなく、必要な情報をすぐに得られるので問題解決です。しかし、テーブルそのものにはその機能がありません。そこでスタイル・シートです。

スタイル・シートを使って「box概念」を利用すれば、テーブルでは「セル」とされていた枠を、テーブル本体から切り離してバラバラの積み木状態にし、自由に配列出来るようになります。つまり、ひとつのbox内に書き込まれている内容は、それを一塊としてHTML上のどこにその内容の記載があっても、画面表示位置を自由に指定できるということですね。

1.ヘッダ
2.リンク	3.内容
4.フッタ

テーブルでのレイアウトは、

HTML上でのセルの記載順序が定まっている。

音声読み上げは記載順になるので、

上の例のような場合、内容に来るまで時間がかかる。

また、編集時にも容易に位置を入れ替えることができない。

→

セルをバラバラにして、HTML上でどこに書いても

画面上の好きな位置に表示できるようになれば、

記載順序は関係なくなるので音声ブラウザにも配慮でき、

編集時も内容を移動することなくワンタッチで位置を変更できる。

こうしておけば、音声ブラウザのみならずテキスト・ブラウザのユーザーにとっても都合が良いでしょうし、また作成者側には、boxの位置指定を変更するだけでレイアウトを変えることが出来るというメリットもあります。

なお、この「box概念」は、上の例のようにテーブル・レイアウトでのセル内容を一塊にして扱えるだけではなく、例えば<p></p>で括られた段落ひとつのような細かな要素自体を「box」として扱うこともでき、それぞれの位置を任意に指定する他に、背景色や背景画像、周囲の枠線やマージン（余白）なども個別に設定できます。つまり、全ての要素を画面上どこにでも自由に配置することができ、boxどうしが重なり合うような位置指定をした場合でも、その表示優先順位を設定することもできるので、イメージする通りの画面表示が可能になります。そう考えると、スタイルシートが音声ブラウザなどへの配慮ばかりではなく、視覚性の向上に与える影響もかなり大きいということがお分かり頂けるでしょう。

「box概念」については、Vol4. CSSにおける「BOX概念」とは? で詳しく解説しています。詳細設定については、その後の章で解説してゆきます。