HTML初歩の初歩

〜その13〜
構造と見栄え

<font size="+2"> などとHTMLによって見え方を記述する事が、HTML3.2までは行われてきました。しかしHTML4.0以降は、HTMLは文章の論理構造だけをを記述し、「見栄え」はスタイルシートで整えるという方針が示されました。

HTMLで記述した「見栄え」を表現する事が出来るのは、一部のブラウザに限られています。携帯端末や文字だけを表示するブラウザでは、そんな指定をしても、表示に使われるフォント(文字)は一種類だけですから無視される事が多いのです。

一般的なブラウザでも、私のような中年は若い人に較べると、小さな文字では見難くて疲れます。それなのに <font size="-2"> 等と指定してあるページは、若者以外は見るなと言っているのか、意地悪をしているとしか思えません。もっと悪いのは <font size="8pt"> 等と「絶対値」でフォントを指定してあるページです。これですとブラウザ側でフォントサイズを変えようとしても、簡単には出来ません。

こうした「見栄え」を前提にして意味をなすページでは、携帯端末や文字だけを表示するブラウザを利用している人には、意図するところが伝わらなかったりします。例えば色の違いに依存して意味を伝えようとしているページの意図は、そうした色を識別できない人には伝わりません。

ではスタイルシートによって見栄えを指定するのは良くて、HTML で指定するのはなぜいけないのでしょうか。HTMLで見栄えが指定されていると、ファイルのサイズが大きくなって、読み込みに時間がかかります。スタイルシートによる指定では、一つのスタイルシートで複数のページへの指定が可能です。同じ効果を上げるのなら、ファイルサイズが小さい方が良いのは当たり前です。

また上記のようなハンディキャップを負った人の場合には、ブラウザー側でスタイルシートを読み込まない設定にしておけば、妙に小さなフォントに悩まされる心配がなくなります。

TABLE は何のためにあるのでしょうか。もちろんデータを表形式にして見やすく整理するためです。しかし、かつて TABLE はレイアウトの主役でした。TABLE で border="0" と指定してやれば、こいうしたレイアウトに「利用できることもある」のです。

HTML で意図通りにレイアウトをするには、TABLE の中にもう一つ TABLE を二重、三重に配置します。こうするとHTMLだけで巧妙なレイアウトが可能になります。しかしこれは言うのは簡単ですが、やってみるとパズルのように時間がかかります。

ですから多くの人はこうしたレイアウトを、作成ソフトウェアにやってもらっています。その事自体を否定はしませんが、こうして作られたページのレイアウトが誰にでも同じ様に見てもらえるかについては、全く保証のない事を作者は知っておくべきです。

私が Internet Explorer 5.5 や Netscape6 を使っていたとしても、通信回線が携帯電話の 9.6kb だったり、アナログモデム経由の 56kb(実効速度は40kb台)だったりしますと TABLE の全体を読み込むまで画面には何も表示されません。いわゆる「重いページ」になってしまいます。ページ全体を TABLE で囲むのだけは絶対に止めましょう!

最悪なのは、TABLE によるレイアウトを前提にして、意図を伝えようとしたページです。画面の広さやブラウザの種類によって、TABLE は貴方が見ているようには表示されないものだ、という前提でページは書くべきです。

見栄えの極致は「クリッカブル・マップ」でしょう。大きな画像の上でマウスを使ってクリックする場所の微妙な違いによって、リンクする先が変わります。ヘボなクリッカブル・マップでは、正しいリンク先と画像の表示とがずれていて、健常者にとっても使いづらいものです。ましてや視力の弱い方や、微妙なマウス操作の出来ない方にとっては、リンク先を見るなと言うのとクリッカブル・マップはほとんど同義に映ります。

それでもクリッカブル・マップを使いたいのであれば、画像のサイズはなるべく小さくした上で、文字表示によってもリンク先へ行けるような仕組みを併設するべきです。

企業のページに多いのですが、スタートページに何の意味もない Flash によるアニメーションを配置してあるページが目に付きます。流行とでも思っているのでしょうか。単にそのページ製作を委託された会社が、Macromediaか何かの製品を使ったのでしょう。しかしその結果その会社の売上はWebページのせいで上がるどころか、絶対に落ちます。

私はそうしたページに出くわすと、隅のほうに小さな文字で SKIPと書いてあるのを見つけてやっとクリックする度に、「反対だろう、アニメーションを見たければクリックして下さい、とでもなぜ書かないのか」と思います。取締役会でのプレゼンテーションでは派手な方が採用されるのでしょうか。重役達に自分の携帯電話でそのページにアクセスさせてみたら、結果は違ってくるでしょうに、、、。

その小さなSKIPさえないページは、その場から直ちに立ち去る事にしています。こうしたページを「IT版裸の王様」と私は密かに呼んでいます。

世の中、高速回線ばかりではありません。通販で物を買いたい田舎ほど、ISDNさえ通じていないのがわが国の現状だという事を知らなければなりません。

しかしそのアニメーションが、重要な意味を持っているのならばまだしも、単なるシンボルだったりすると、私の電話代を返せと叫びたくなります。

Viewable with Any Browserのバナー

Viewable with Any Browserというキャンペーンがあります。こちらから日本語版翻訳版もご覧下さい。

AnyBrowser.comのバナー

どんなブラウザでも見えるかどうかのチェックにはAnyBrowser.com等を利用するのも良いでしょう。ここでは、Link切れチェックなど様々なサービスが受けられます。

作成ソフトを使うにせよ、自分でソースを打ち込むにせよ、結果として酷いページを作って公開してしまったら、その責任は作者にあります。IBMやAdobeに責任転嫁は出来ません。

幸いWeb上で文法チェックをしてくれるサイトがあります。

Another HTML lint
私のページの末尾にバナーが貼ってありますが、国内外を通じて最も正確・厳密です。各規格によるページの書き方解説もあって、重宝しています。日本語ですから安心かつ楽です。
WDG HTML Validator
Web Design Groupによる文法チェック。「Validate entire site」を選んで、TOPページのアドレスを入れると、一回でサイトにある全ページのチェックが受けられて便利です。
W3C HTML Validation Service
本家W3Cによる文法チェック・サービス。少々甘いという見方もあります。
What does your HTML look like in Lynx?
「あなたの HTML は Lynx でどう見えるか?」という日本語のページ。
WAI
W3CのWeb Accessibility Initiativeによる、アクセシビリティーのための指針が読めます。必読。
W3C CSS検証サービス
スタイルシートのチェックをしてくれます。

様々なブラウザ

正しくてアクセシビリティーが確保されたページは、どんなブラウザで閲覧しても必要な情報は伝わります。それでも依然として最も広く受け入れられるのはInternet ExplorerやNetscape等のUser Agent(UA)でしょう。しかし様々な制約の下にある人々を想定して、それら以外のブラウザを使ってみる事は無駄ではありませんし、自分のページを見直す良いきっかけになるかも知れません。

NCSA MOSAIC
元祖Mosaic、全てはここから始まりました(Internet Explorerのヘルプ>バージョン情報をお読み下さい)。現在はヴァージョン3.0と2.1.1があります。日本語の使えるバージョンもあるようです。

Amaya
WWW の標準化機関である W3C 謹製の HTML Editor 兼 User Agent 。2002年12月にAmaya 7.1 が公開されました。日本語はどうにか表示できますが動作は不安定です。

Opera
ノルウェー製のシェアウェアー(Windows 用は Ver5.12、広告が画面右上に入る版は無料です)。安定していて高速のブラウザのようですが、2001年秋現在では残念ながらShift_JIS以外で書かれた日本語のページでは文字化けしてしまうようです。

2001年末に発表された Opera 6.0 では日本語にも対応するようになりました。Opera は私の主力 User Agent になっています。

Operaは見栄えを簡単にカスタム出来ます。さらに詳しくは Opera のページをご覧下さい
初期設定(背景画像は変更済み)  Gnome風  Mac風  好みの設定  私の設定

WebBoy
結構有名な、DOS/V 上で動く IBM の WebBoy 。製品版だけあって常用可能です。SSL( Secure Sockets Layer )に対応しオンラインショッピングでカード番号を打ち込めますし、JavaScript も動きます。

w3m
日本語上で開発されたw3mは、World Wide Web を見る(Miru)の略だそうです。UNIX 系 OS 上で動かすようですが、Cygwin32 を使うと Windows 上でも動くそうです。

Lynx 日本語版
山形県立産業短期大学校庄内校の千秋さんのページから、Windows 上で動く日本語最新版が入手できるようです。(フリーウェア)同時に日本語簡単セットアップも入手しておくと楽できます。音声合成による読み上げが出来る Lynx for Win32 with Voice も patakuti さんのところにあります。

多くの HTML 入門書では無視されるか、書いてあっても Internet Explorer 等では無視されるためか、おざなりに扱われている HEAD 内に書くリンク情報ですが、例えば上記の lynx ではちゃんと冒頭に表示され Enter を押すと、リンク先の文章へジャンプできます。これがあるとないとでは、使い勝手に大きな差が出てきます。

他にも Mozilla でも同様のナビゲーションを表示させる事が出来ます。Internet Explorer に出来ないからって無視していると、世の中から取り残されてしまいます。多分 Internet Explorer 7 ではこの機能も実装されるでしょう。

主なリンク情報については、第8回の「関係を示す」でまとめてあります。


1 回   2 回   3 回   4 回   5 回   6 回   7 回   8 回   9 回   10 回   詳細目次   ページ冒頭



saiton.net/easy/html13.htm

©SAITO Toshiyuki