（6）：基本レイアウト

2003年7月18日作成／2003年12月22日更新／1加筆／1追加

ページの見栄え、基本レイアウトについてまとめてあります。旧型機種を使用してい ると自動的に気が付く『傾向と対策』で、既にほとんどが『時代おくれ』全体に適用され ています。

テーブルによるレイアウトは忌み嫌われていますが、W3Cのウェブコンテンツ・アクセ シビリティ・ガイドライン1.0では『テーブルを線形化して意味が通る場合を除いてテー ブルをレイアウトのために使用しない 、レイアウトのためにテーブルを使用する場合は 表示を制御する目的で構造を表すためのタグを使用しない』とされており、禁止事項では 有りません。私は、条件を満たしていれば、テー ブルをレイアウトに用いてもよいと解釈しました。少なくともページ 全体<pre>固定や、全行<br>改行に比べれば遥かにマシです（知ってる私は 前科者・・・^_^;）。

この章は使用イメージを表すためにborder="1"として罫線を表示させてありますが、 実際には罫線は非表示です。その 場合、borderの省略はNN4で1pxの隙間に なりますから、明示的にborder="0"とします。

線形化して意味が通るテーブルと言うのは、表示ではなくソースの記述順に解釈（処 理）してページの意味がわかる状態を指します。

テーブルによる段組の例ですが、左側の場合はソース順に段落が1→3→4→2→5と処理 されるため、意味が通りません。右側の場合は、入れ子にしたテーブルが左から右に読ま れるため段落は正しい順番で処理されます。

なお、判り易くするため極端な例を上げていますが、テーブルの入れ子も非常に嫌わ れています。テーブルを幾重にも入れ子にす ると、表示が遅くなる、システムリソースを馬鹿食いする、入れ子の限界を突破するとブ ラウザがフリーズする、などの障害がでます。テーブルによるレイアウ トは決して誉められたものではないので、可能な限り簡略化し、複雑な入れ子は避けまし ょう。ここのトップページは悪い見本、ナビゲーションバー（もどき）部分は・・・です(^^ゞ。

テーブルによるレイアウトには、Netscape Navigator1〜4で画像と文字がかぶるのを 防ぐ効果もありますが、テーブルが巨大になると読み込み・整形終了まで何も表示されな い弊害がでるので、テーブルを幾つかに分割し、部分ごとに表示させます。複数テーブル に分割されたページの自動文書処理の可否は不明 です。W3CのValidationサービスのアウトライ ン表示を見る限り、問題はなさそうに見えますが、段落（内容）を単位として分割するの が安全そうです。

CSSでレイアウトされたページ、特にコンテンツが横方向に配置されたページの場合、 非対応環境ではソース順にずらずらと縦方向に細長く表示されます。解像度の低い旧型機 種でそれなりに都合が良い事も確かですが、作成者の注目度を表しているかもしれない項 目の順番が逆転したり、同時に（左右に）並んで表示されないと意味をなさない項目が泣 別れたりと、都合の悪い事も起こってしまいます。

ソース上の記述順序とCSSによる表示結果（順序）は基本的に関係無い（と聞いている ^_^;） ので、まず非対応環境で利用しやすい順番・レイ アウトで表示されるソースを書き、次にCSSでコンテンツを再配置すると言 う事も可能ではないでしょうか？

CSSの手間を嫌って<table>で誤魔化しているお前が言うな！と突っ込まれたら ・・・ですが、古い環境にも感心がある方はご検討下さいm(__)m。

私は大型高解像度モニターの画面いっぱいに文字が並んだ状態が許容できません。文字 には読みやすい横幅（文字数）が有ります。同様に、低解像度の小型モニターで画面がはみ 出し横スクロールバーが出た状態も勘弁なりません。どちらの画面を見ても読む気が失せて しまいます。そこで、高解像度モニターの解像度を落とすことはできても、低解像度モニタ ーの解像度を上げることはできないこと、『時代おくれ』のメインは旧型機種であること から、低解像度モニターに画面幅を合わせると いう安直で批判の多い手法を採用します。

テーブルによるレイアウトの最大の目的は、旧型機のVGA画面（640×480）を基準に画 面サイズを絶対値固定することです。さらに画面の小さいモバイルで不都合が予想されま すが、対象環境から除外したので大丈夫です（開き直り ^_^;）。テーブルの横幅を580ピ クセルに固定すると、ブラウザの縦スクロールバーを加えた状態でちょうどVGA画面いっ ぱいになります。VGAではやや圧迫感があり、解像度800×600〜1024×768で程良く表示され、 それ以上の解像度では結構マヌケです(^^ゞ。貴方のモニタではどうなっているでしょうか？

最近気が付いたのですが、私は常に（全ての）ウィンドウを最大化し切り替えて表示 させますが、これは小型モニタで身に付いた習慣のようです。大型モニタを当たり前に使 用している最近パソコンを始めた人は、内容に会わせてウィンドウサイズを調整するので、 マヌケな画面にはならない様です。

ここまでは横幅の問題でしたが、低解像度モニタの場合には縦幅問題もあります。技 術的なレイアウトではなく文章構成上の問題です。横幅を制限した都合上、１段落の行数 は増える傾向にありますが、VGAの１画面に （このページの）通常行で11〜12行、拡大されている強調部分では6〜7行程度しか表示で きません。1段落が1画面を超えると読み辛くなるので、内容文脈的に可 能であれば1段落は1画面に収める様にします。

同様に表も縦長になる傾向がありますが、内容を絞り込む、分割するなどして可能な限 り1画面に収める様にします。どうしても表が1画面に収まらない場合は、適宜タイトル行 を挿入する、特定項目に（目印として）単位をつける、縦・横に色分けするなど見やすく する工夫を行ないます。

一般にホームページの作成にはWindowsとMacintoshそれぞれの基本256色、より安全を 狙う場合はこの256色の中から両システムが共通で持っている216色、ブラウザセーフカラ ーの使用が推奨されており、ほとんどの場合、それで問題はありません。しかしWindows（ 事実上PC/AT互換機）とMacintosh以外にもコンピューターは存在してお り、WindowsやMacintoshでもブラウザやOSの種類、CRT（ブラウン管）かLCD（液晶） かで実際の発色が異なります。

そこで当サイトでは、より多くのコンピュータで同じ表示が得られることを期待し て、文字と基本背景色にはシステムカラー16色の みを使用します。

この16色はLCDでteal（#008080）がかなり 白っぽく見える事を除けば、ほとんどのモニタでほぼ同一の発色を 示し、EGCのPC-9801でも表示可能でした（ん〜、因果関係が逆かもしれな い ^_^;）。Windows（PC/AT互換機）でもMacintoshでもな い、できるだけ突飛な環境をお持ちの方、伝言板へ 表示の可否を書き込み頂けると助かります。また、表示の可否と直接的関係 は無いかもしれませんが、この16色は、HTML4.01、CSS1と2で定義済みです。

画面の配色はカラー バリアフリーガイド Ver.1.01を参考にしました。管理人（たなか）さんは『まったく のシロウト、子供が「色覚異常」と言われただけの、いっかいの主婦・母親』と断りを入れ ていますが、非常に参考になりました。必見サイトです。

試行錯誤の結果、究極のハイコントラストであり環境による発色ズレの無い白と黒の 組合せが残り、モノクロ画面での視認性を考慮 して『背景色・黒−基本文字色・白』の組合 せを採用しました。Windowsのデスクトップ配色、ハイコントラスト黒 も参考にしています。

大雑把に言ってモノクロ画面では色は白・灰色・黒の3色に還元されてしまいますが、 白背景では灰色の文字の視認性が悪くほとんど黒色の文字しか見えませんが、黒背景の場 合、色の区別は難しいですが白文字も灰色の文字も読めます。このモノクロ画面対策がハ ンディキャップユーザー対策にも有効ではないかと考えています（根拠はありません、く どい様ですが素人の発想ですから ^_^;）。

システムカラー16色を使用した背景黒に基本文字色白の組合せは、多様な環境での再 現性と視認性は抜群です。その一方で配色を工夫しないと画面を単調陰鬱にしてしまいま すが、色数が制限されているため美的センスが要求されます。残念ながら私には備わって おらず、この様なダサ画面となっておりますm(__)m。また、公的サイトの場合は『黒いペ ージはエロサイトか非合法サイト』と言う偏見との戦いも待っています。今のとこ ろ、対策が施された配色に気付いてくれるのは圧 倒的少数派で、しばしば悲しい思いをします(T_T)。

あと、非常に普遍性の低い私固有？の問題です。この16色の組合せの場合、隠し文字 に使える色はNavy（#000080）しか有りませんが、環境によって隠れすぎたり見えすぎ たりして、あまり適当な色では有りません。なぜ隠すかって？『大きな声では言えないが 小さい声ならOKよ(^_-)』と言うお遊びです。

見えすぎも問題ですが、見えない環境で文章の存在そのものを見落としてしまう可能 性があります。そこで文頭の単語は通常色、その続きをNavyの隠し文字としました（遊ぶ 手間は惜しみません！）。不自然に文章が欠けて いる、あるいは変な隙間に興味がある方は、選択反転して御覧下さい。概ね 悪口か本音です(^^ゞ。