Cascading Style Sheets
ホームページビルダーなどの作成ソフトで作ると、だいたい同じに見えます。 それ、変じゃありません？ 見た目に関して動作の異なるブラウザで、なぜ同じに見えるのでしょうか。
ホームページのファイルは HTML のタグで文章をマークアップしています。 W3C が勧告する HTML DTD（文書型定義）のバージョンで言えば、HTML 3.2 で見栄えに関するタグや属性が定義されました。 この DTD を使って作るのなら別に構わないのですが。
CSS の説明を期待して このページへ来て頂いた人には申し訳ありません。 CSS そのものは たくさん解説サイトがありますし、使い方も難しくありません。 それに W3C が勧告する CSS Level が上がるたびに更新しなければいけません。 ここではなぜスタイルシートを使うのかをシリーズで書いてみました。
難しいことよりホームページ作成ソフトで作ったページの HTML ソースを見たことはありますか。 テキストエディタで開いた途端、見る気が失せてしまいます。 キ、キタナイ……。 それが第一印象でした。 言っちゃ悪いが、無理矢理 同じに見せるようにしている。 少し凝ったページを作ると非視覚系のブラウザでは意味が分かりません。 これが WEB ページの目的なんでしょうか？ と言う前に、なんて乱雑なソースを書くのだろう。
Microsoft のアクセシビリティのページなんて立派なことが書いてあるのに、TABLE タグに summary 属性すら書かれていません。 そもそも文書型定義も宣言されていません。 そんなのアクセシビリティを論じる以前の問題だと思いませんか？ 反面教師として参考にどうぞ。 あ、内容は参考になります、これは本当。
ということで違って見えるのはブラウザの実装の違い。 これを同じに見せるのは HTML の目的（全ての人が読める＝アクセシビリティを良くする）ではないと開き直ってしまいました。 というか、そう考えた方が楽です。 特定のブラウザでテキストの羅列になろうと可読性の障害になるわけではありません。 むしろタグの使い方の誤りで意味が分からなくなるよりはマシです。
このサイトのトップページに関して言うと、Netscape 4.x では画像も表示されません。 テキストも左詰めの羅列状態です。 しかし読めますし意味は分かります。 説明が必要な画像については、コメントしています。 そんなの見に来てくれた人に失礼じゃないかって？ 音声リーダー（音声ブラウザ）で「ナンノコッチャ」な内容を視覚障碍者に聴かせることを考えれば、見栄えが悪いなんて大きな問題ではない。 と思う。 じゃないかなあ。（弱気） とにかく見た目は違っても内容が同じに伝われば良いということで。
ユーザービリティというと Accesskey や Tabindex を書いているかという HTML の話になり易いのですが、そんな話より使い勝手を良くした方がいい、ということだと思います。 とりあえず自分が使い難いと思ったことを改善する。 それだけしか出来ません。
デザインに凝ると、これが難しい。 自分が見てる画面と同じ大きさで、他の人も見ているとは限りません。 いーんじゃない、横スクロールバーが出るだけじゃん。 その通り。 でも経験しないと横スクロールの面倒さは分かりません。 自分が小さい画面で見た時つくづく思いました。 ということで、このサイトは横 550 ピクセル以上ならスクロールバーが出ないようにしています。（しているつもりです）
自分のブラウザの大きさを変えてみるのは最初で最低のユーザビリティです。 これは少なくても「自分と同じ環境」という枠の中で、どのように見えるか確かめられます。 文章主体のページで横スクロールバーが出たときの面倒さが良く分かります。 現実的な大きさ（ 600 ピクセル※程度）で出ないようにしておいた方が良いかも知れません。
文字サイズを固定すると自分は読めても人は読めないということが起ります。 また、自分のディスプレイと違う解像度（ dpi ）の場合、というか高解像度になれば相対的に小さくなります。 自分のディスプレイで小さくして COOL な画面だと悦に入っていると、高級機からは胡麻粒にしか見えてないということになります。 これは私も気をつけよう。 歳をとると、これがよく分かるんだなあ。
どこがリンクなのか分かりやすくすることが一番です。 なのでクリッカブルイメージマップなどは使いません。 説明を付ければ良いのかもしれません。 でも説明するなら そこにリンクを貼っておけば済みます。 特別必要ない限り画像の一部にリンクを貼るというのは反対です。 あとよく使うと思われるリンクは右側に配置しました。 左利きの人、ごめんなさい。
開くのが毎度 重いというページがあります。 これ、訪問者避けには効果抜群。 NHK のホームページ なんかも重い。 そうかと言って、JavaScript を切っていると次へ進めないなど企業のページにもたくさんあります。 重さは相対的ですから基準を設けることが難しいのですが「画像が多いと重い」 というのは間違いないようです。 うちは、せめてもの罪滅ぼしに「重いです」と表示しています。 あと、むやみに JavaScript や FLASH は使いません。
見やすさはデザインのひとつ（ユニバーサルデザイン）ということで、コンテンツページは統一した構成を心掛けるようにしました。
ときどき JavaScript でブラウザ上のマウスの左クリックを禁止しているサイトがあります。 これは制作者が思うほど効果はありません。 というか自己満足にすぎません。 左クリックは Windows 環境の IE の場合がほとんどですが、SHIFT + F10 というキー操作で 左クリックと同じ動作をします。 なんのために左クリック禁止にするのか、あまり意味がありません。 さらに JavaScript を OFF にしていると何も起こりません。
JavaScript で動作させるものは、とんでもなく間抜けになる場合があります。 また、IE 以外でも動くとは限りません。 というよりも正しく動かないと思った方が良い※ぐらいです。 左クリック禁止ぐらいなら閲覧者は「気付かない」で済みますが、中には「笑える」状態になっているのもあります。 え、ここだって？ その通りです。
自分のサイトがユーザーフレンドリーかどうか、とりあえず考えてみる目安です。
表題や見出しを付けるというのは文書としては当たり前ですが、見た目の理由で画像や TABLE を使いたい時もあると思います。 その時でも <H1> などの見出しを書いておきましょう。 これは非表示にできますが、書いてないと どうにもなりません。 見出しがあれば、それだけでナビゲーションになる場合※もあります。 レイアウトを工夫するより、ずっと簡単です。
ユーザビリティとアクセシビリティを厳格に区別する必要はないと思っています。 ユーザーは閲覧者であり、同時にブラウザというユーザーエージェントの使用者でもあるわけです。 「使い勝手の良さ」というのは、そのユーザーエージェントの使い勝手にも左右されるので、サイト制作者がどんなに頑張っても改善できないこともあります。 もちろん、ユーザビリティやアクセシビリティを考慮しなくても良い、ということではありません。
「すべての閲覧者」にとってベストな方法はない。 けれども「すべての閲覧者」が利用可能な状態になっていることが望ましい。 利用可能な状態にするためにユーザビリティやアクセシビリティを考えなくても、本来、きちんとマークアップしていればユーザーエージェントが技術的にサポートできます。 アクセシビリティはマークアップが基本。
という動機を否定しません。 タグで何とかしようと思うのならスタイルシートを使った方が格好良くなりますし、文書のためにも良い結果につながるかもしれません。 このサイトを万一 格好良いと思われるのであれば、どうぞ参考にして下さい。 レイアウトなど意匠上の一切の権利を主張する気はありません。 でも人気が出たらどうしようかと、ちょっと考えたりします。 取らぬ狸の皮算用。
CSS 外部ファイルのダウンロードはリンクをクリックして下さい。 IE の場合は開くアプリケーションを聞かれると思います。 メモ帳などのテキストエディタを指定して下さい。 Netscape の場合はテキストファイルとしてブラウザ上に表示されると思います。 それぞれのファイルサイズは 10KB 以内です。 CSS の使い方 もご覧下さい。
ブラウザが新しくなるたびにページの見た目を直さなければならないなんて馬鹿げています。 ホームページ作成ソフトは 「商品」 だから良いのですが、それを使って作ったページは どうなるのでしょうか。 ブラウザや作成ソフトに振り回されているだけです。 見た目にこだわる以上、それだけのために未来永劫に更新し続けなければなりません。 それが仕事なら……。 どちらにしても疲れます。
世間や WEB には、『一歩上を行く WEB デザイン』 とか 『知ってトクするホームページ制作』 などのように魅力的なタイトルの本やサイトがあります。 役に立たないとは言いませんが書いてあることを信用してはいけません。 もちろん、このページも。
index.htm
