ホームページをバランス良く表示するには？
▼
来年の１月１日でこの｢ハリウッド最前線｣も10周年を迎え、いよいよ11年目に突入するわけですが、それもひとえに読者の皆様のあたたかいご支援のおかげです。そこで感謝の意を表すべく、サイト開設以来初の大がかりな改装工事を始めた結果、改めてＨＴＭＬ(ハイパー･テキスト)の基本(ベーシック)を認識しました。
まず、今回の改装工事の目的は、この10年間でサイト全体の構造がかなり複雑化していたのを再構築し、読者へアクセスしやすくすること･･････右図は改装工事前(上)と後(下)のホームページで、ここから直接すべてのコンテンツにアクセスできる改装後のパターンと比べ、改装前の構成だとコンテンツを選択するまでのプロセスが３段階あります。
加えて、改装前はサイトを構成する３つのセクションで目次が分かれていたため、他のセクションへの移動は読者を混乱させる嫌いがありました。それなりに意味のある構成ですが、改装後のパターンと比べた場合、たしかに慣れない読者へ｢ユーザー･フレンドリー｣ではなかったかもしれません。
ただ、こうしたサイト構成に関する方向性や具体的なデザインなら、アマ･プロを問わず制作者たるもの追求するのが当たり前です。程度の差はあれ、どのホームページへもそれなりの工夫が凝らされている反面、過半数の制作者は素人(アマチュア)だというインターネットの現状を考えれば、デザイン面でほとんどが寂しさを拭えないのはしかたないでしょう。
しかし、さすがと思わせる少数派のプロがデザインしているホームページでさえ、あんがい無神経な部分はあり、改めてＨＴＭＬ(ハイパー･テキスト)の基本(ベーシック)を認識させられたというのがこの部分です。たとえば、インターネットでもメジャー企業のホームページに限ると、ほとんどプロのデザインでありながら、その類のページでも意外なほど多いのは、特定の枠を超えた場合、表示のバランスが崩れるパターンで、そこまでは考慮していないのがはっきりとわかります。
もちろん、こうした営利を目的とした企業ページは、ある程度ターゲットが絞られているため、特定の枠を超えた場合は意図的に考慮していないのかもしれません。つまり、せいぜい大きくて19インチ程度のモニターを使う一般消費者が相手なら、解像度は1024ピクセル×768ピクセルの画面へ表示するという前提のデザインでじゅうぶん間に合います。たとえモニターの解像度が1280ピクセル×1024ピクセルだとしても、大きい画面ほど閲覧ソフト(ブラウザ)自体は一回り小さく設定するのが普通です。
▼
解像度が大きいモニターの場合問題は、(１)更に解像度が増え、そこへ｢最大化｣した閲覧ソフト(ブラウザ)を表示する時、(２)印刷する時、そして(３)別の閲覧ソフト(ブラウザ)で表示する時、それぞれバランスはとれているかどうか？･･････先ほど｢特定の枠を超えた場合｣と書いたのが、これらの状況を指します。別の閲覧ソフト(ブラウザ)だとどうなるかは、じっさい表示した結果を見比べながら調整するとして、まず(１)と(２)の基本的な問題をご説明します。
同じ｢ハリウッド最前線｣の(改装後の)ホームページでも、もし特定の枠内でしか考えないと、解像度が1600ピクセル×1200ピクセルの画面へ表示した場合、左図の上のようにコンテンツは偏ってしまうのです。それが元のＨＴＭＬ(ハイパー･テキスト)へたった２行書き加えるだけで、その下の図のようなバランスのとれた表示になります。これは印刷する時も変わりません。
印刷をする場合の違いを示したのが右図で、バランスをとる方法は、やはり元のＨＴＭＬ(ハイパー･テキスト)へ２行書き加えるだけです。そして、書き加えたからといって特定の枠内での表示が変わるわけではなく、(１)と(２)の基本的な問題が解決できます。
印刷の場合 理屈は簡単で、要するにどのような画面への表示であれ絶えず｢センタリング｣をするよう指定しておくわけです。中でも見落としやすいのが縦方向のセンタリングで、人によってはそこまでの必要性を感じないかもしれませんが、見落としているのと意識しているのとでは大きな違いがあります。そこで、ともかくセンタリングのためのＨＴＭＬ(ハイパー･テキスト)への具体的な記述方法です。
Windowsのメモ帳といったテキストエディタでＨＴＭＬ(ハイパー･テキスト)を開くと、中身は基本的に｢ヘッダ部(<head>と</head>で囲まれた部分)｣と｢本文(<body>と</body>で囲まれた部分)｣から構成されているのがわかります。前者は書類のタイトルや特徴等の文書情報を記述するためのセクションで、タイトルが出る以外、書き込まれた内容は閲覧ソフト(ブラウザ)へいっさい表示されません。表示されるコンテンツを収めたのが後者で、それをセンタリングするための記述は･･････
<body>
<table height=100% border=0 cellpadding=0 cellspacing=0><tr><td align=center>
本文
</td></tr></table>
</body>
こうして本文の最初と最後に１行ずつ書き加えた結果、表示する対象が何であれコンテンツ自体のサイズを超えるまで変化はありませんが、超えた場合は表示する対象のサイズを100パーセントとして、その中央へ位置するようになります。もし縦のセンタリングが不要と思われるかたはテーブル機能を使った上記の記述例から｢height=100%｣の部分を外すか、テーブル機能の代わり本文の最初に<center>、最後に</center>と書き込んでも結果(つまり横方向だけのセンタリング効果)は同じです。
いっぽう、縦のセンタリングでも、それがフレームで分割したページの一部であれば、バランス上、最後のコピーライトの行などは除いてセンタリングしたい時があります。たとえば、わが｢ハリウッド最前線｣の｢ポスター･ギャラリー｣は３つのフレームでページが構成されており、左図は一般的な閲覧ソフト(ブラウザ)での表示と、より解像度の大きな画面(モニター)へ縦長に表示した場合との比較です。メインのフレームの最後のところを、よく見てください。
こういったパターンでは、わざわざ縦のセンタリングをやらないほうが、むしろすっきりするかもしれません。したがって、やる以上は他のフレームとのバランスを考えたいものです。テーブル機能が便利なのは、部分的なセンタリングが可能で、｢ポスター･ギャラリー｣はその機能を活かしています。
コンテンツを一まとめにセンタリングしたのが先のホームページの例なら、こちらは途中(コピーライトの手前)でコンテンツを２分割し、前半のみをセンタリングしました。かといって、ＨＴＭＬ(ハイパー･テキスト)への記述が難しくなるわけではありません。
<body>
<table height=100% border=0 cellpadding=0 cellspacing=0><tr><td align=center>
本文Ａ
</td></tr>
<tr><td valign=bottom>
本文Ｂ
</td></tr></table>
</body>
上記の記述例で｢本文Ｂ｣というのが、｢ポスター･ギャラリー｣では最後のコピーライトの行に該当します。また、見出しの部分も独立させて３分割すれば、もっと微妙なバランスを調整できますが、様々な条件での妥協点を見つけるのは、いよいよ難しくなってゆくでしょう。しかし、興味があるかたは試すだけの価値があるのでは？
最後にセンタリングとは関係なく、印刷する時のバランスで一つ注意点を書いておきます。以前｢スタイリッシュな背景｣で、どうすればＨＴＭＬ(ハイパー･テキスト)の背景を固定できるかご紹介しました。このページでグラデーションの背景を固定しているのも、まったく同じ方法です。こうした縦方向のグラデーションなら背景画像の幅がいくら狭かろうと、縦方向だけ固定して横方向はリピートできますから問題ありません。そこで縦方向ですが、今回の改装工事で最初は768ピクセルへ余裕を持たせ、24ピクセル×800ピクセルのグラデーション画像を何パターンか作成し、テストをしてみました。
背景を印刷する場合 すると、ある程度まで解像度が増えようと閲覧ソフト(ブラウザ)に表示する限り不具合は無かったものの、印刷してみると背景が寸足らずなのです。インターネット･エクスプローラの初期設定(ディフォルト)では背景まで印刷しませんが、設定を変えれば背景を含めて表示どおり印刷できます。その時、用紙は日本のＡ４であれアメリカのレター･サイズであれ、背景画像の縦が800ピクセルでは足らず、1024ピクセルで作成し直した結果が右図です。
ただ、印刷する場合を考慮して800ピクセルを1024ピクセルへ伸ばすといっても、一般的な閲覧ソフト(ブラウザ)で表示されるのは、せいぜい背景画像の上半分か３分の２程度ですから、グラデーションの見た感じがかなり薄くなってしまいます。そのまま伸ばしたのでは相当イメージが変わるため、色の調整は不可欠です。そこまでやって、ようやく納得がゆくことでしょう。
もっともインターネットの性格上、いくらがんばってデザインしたところで閲覧ソフト(ブラウザ)のフォント･サイズなど読者が個々に設定している部分へは残念ながらコントロールが及びません。それは覚悟の上、現在｢ハリウッド最前線｣も着々と改装工事の進行中、来年１月１日の完成を請うご期待！
＊ ｢Yokochinのハイパーテキスト･マニュアル｣ではテーブル機能やスタイ
ルシートの｢background｣に関して、より詳しい解説がご覧いただけます。
|
お断り