my style

私のスタイル

私のWebの経歴

最近、光ブロードバンドに変更しあちこちのサイトに訪れて感じることがあります。

アナログ時代

私がインターネットを楽しむようになったのは、1995年11月だったと思います。この頃はモデムでアナログ回線を使っていました。

1996年1月31日プロバイダの「ベッコウアメ」と2人のユーザーが、警視庁保安課から家宅捜査を受け、確か無修正のヌード写真が数多く掲載されていたサイトの１人（~kameだったと思います）が逮捕された時には少々がっかりしたことを覚えています。当時はそんな平和な時代でした。モデムの速度は忘れてしまいましたが、現在のものから比べるととても低速でどのサイトを表示するのにもかなりの時間がかかっていましたが、わくわくしながらページが表示されるのを待っていたものです。

ISDN時代

2001年4月にISDN回線に切り替えた時、通信速度が飛躍的に向上し驚きました。その後2004年1月に光に変更するまでの間ずっとISDNでした。途中でADSLなるものが登場しましたがあまり興味も示さぬままでした。しかし、この頃になるとインターネットが日本中の人々から利用されるようになり、限りなくWebサイトが増殖していきました。ほとんどの方がADSL回線の利用者であったはずです。

それぞれの作成者が工夫を凝らしたサイトを訪れていましたが、そのうちページの表示に多くの時間がかかるようになっていきました。原因は画像処理でした。多くのサイトで画像をWebに最適化せず多用しています。画像が６４０Ｋを越えるものも多くその画像を何枚も貼り付けているページが多く存在しています。こんなページにたどり着いた時はロードが終わるまで２０分程度かかることもざらでした。

Webサイトの作成当初に考慮したこと

昨年（2003年9月15日）ひょんな事から、自分でもサイトを作りましたが

最初に考慮したこと

１画像を多用しない、大きな画像は使わない。

でした。

その次に、私の好みなのですがメインのブラウザはNetscape Navigatorでしたので

２Internet Explorer独自機能は使わない

Internet Explorer独自機能には、とても魅力的なものがたくさんあります。でも、独自機能は、所詮独自機能です。他のブラウザで正しく標示されません。

３可能な限り「標準準拠モード」で記述する。

「標準準拠モード」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

で作成するぐらいでした。

色使いに関する配慮

なぜ、色使いに関する配慮が必要なのか

そうこうしていたある日、テレビの特集で色盲の人たちがLEDの表示で困っている、と言うものをやっていました。たとえば東京の地下鉄の路線図が解りづらい、黒字に赤で表示された駐車場の「満車」が確認しずらい等でしたが、色盲の人の生命にかかわることだと知らされ愕然としてしまいました。詳しくは下記のサイトをご覧ください。

このページでは「色盲」と表記することにした理由は、岡部正隆氏の
「色盲の人にもわかるバリアフリープレゼンテーション法」の「なぜ「色覚異常」「色覚障害」「色弱」などではなく「色盲」なのか？」に詳しく載っています。

画像のチェック

そこで画像はImageJ1.30とそのpluginsのVischeckのVischeckJ1.0を使用し（それぞれ、VischeckサイトのDownloadページからダウンロードできます。）色盲の人に見えるか確認を行いました。

< a >タグに関する配慮

また、< a >タグには「色覚の多様性と色覚バリアフリーなプレゼンテーション」を参考にさせていただき
a:link{ color: #0000ff;}
a:visited{ color: #000066;}
a:hover{ color: #FF0099;}

を設定しています。ポインタを重ねると、それぞれの色に変化します。

MAC版のInternet Explorer5.2では変化しません。ごめんなさい。

色使の配慮に関し参考にしたサイト

ページを作成するに当たり常に、

国立遺伝学研究所に勤務されていた岡部正隆氏
東京大学分子生物学研究所高次構造研究分野の伊藤啓氏

両氏が作成された色盲の人にもわかるバリアフリープレゼンテーション法

たなかさんの

カラーバリアフリーガイドのページ
アンケート集計結果のページ

その他のサイト

KRISTALL+（クリスタル・プラス）のFARBENBLINDHEITのサイト
十人十色覚同盟のサイト

を参考にさせていただきました。

バックグランドカラーの配慮

インターネットへの法規制（1996年2月2日可決のワイセツ表現の規制(Communication Decency Act)を盛り込んだ米国の電気通信法改革法案）が審議された頃、それに抗議の意志を表示するためバックを黒くしたページが大量にありましたね。しかし、現在作者の意図は不明ですが赤いバックに黒文字とか、< body bgcolor="#ffffcc" text="#bbbbff" >とかのページを散見します。好みの問題かもしれませんが、

４私はバックにわざわざ色を使わない。

人類５千年の歴史と伝統をふまえバックは白を文字は黒を基本とし、文字と画像が重ならないように留意し作成することに心がけています。

後記１８の理由から一部変更しました。(2005-6-4)

その他の配慮

文字や画面そのものに対する配慮 ５文字、画面そのものを点滅させない。

覚えていますか？昔、アニメで問題になりました。発作を誘発するおそれもあります。

６フォントのサイズをemで指定する。

視力は個人で異なります、サイズは固定しません。

７スペースで見栄えを調整しません。

スペースで調整してもうまくいかないものです。うまくいかないことに努力はしません。

追加した配慮

ページの表記方法に関する配慮 ８a:{ text-decoration: none;}の使用を止めました。

アンダーラインがあればリンクが張ってあることが理解しやすくなるはずです。可能な限りウェブコンテンツ・アクセシビリティ・ガイドラインに沿います。(2004-9-27)

９制作者の承諾なしに<marquee>の使用を止めました。

集中力が短時間しか続かない方もいます。文字が動いたり、ボタンの色が変化したりすることで集中できなくなりページの内容を把握することが困難になるおそれがあります。せっかく作ったページを読んで頂けないことは悲しいことです。<blink>も含め、当然今後の使用もしません。(2004-10-26)

ページレイアウトに関する配慮

１０ページレイアウトのために<table>を使用することを止めました。

実験的に旧版の上鹿川の日々で２ヶ月程度試用しましたが<div>を使用しレイアウトしてもなにも変わりません。<table>を使用することで、ページリーダーなどを使用している方を混乱に陥れるようなことは止めました。また、視力の弱い方はスタイルシートを使用しないで文字を大きくしてご覧になるかもしれません。この時<table>はその方に障害を作ってしまうおそれがあります。

文字に関する配慮

１１{font-family: "ヒラギノ明朝 Pro W3", 平成明朝,"ＭＳＰ明朝", serif;}の使用を止めました。

古くさい私は、出版物の本文の文字は、「明朝体」だと思っています。しかし、視力が弱い方には「ゴシック体」の方が読みやすいそうですし、画面を拡大されている方には明朝体の文字はギザギザで読みづらいそうです。私はMacintosh II fxからのMacユーザーですので気が付かなかったのですが、最近職場でWindowsの使用を強要され、私のサイトが読みづらいことに気が付きました。JIS X 8341-3に沿い長年使用していた明朝体を強要しないようにします。(2005-2-10)

光過敏性発作に対する配慮

１２< blink >タグについて

サイトの内容はすばらしいのですが、サイトの作成に使用されているソフトが勝手に<blink>を書き出しているようです。この忌まわしいNetscape独自のタグ<blink>は、Netscape6.xでは廃止されていました。しかし、Mozilla/5.0 Netscape/7.0でゾンビのごとく蘇ってきました。Firefox/1.0を２００４年１１月９日から使っていますが所詮 Mozilla/5.0 は Mozilla/5.0 です、画面が点滅してしまいます。

１３< blink >印の標示

リンク先の画面の大部分が点滅しているサイトには、前記５の理由、前記９の理由から、

また、「制作者はお気づきでないと思われますが画面の大部分が点滅するサイトには「< blink >」と標示させて頂きました。「IE」では問題ないのですが、「mozilla」等のブラウザをご使用の方はご注意ください。」とお断りし< blink >印を付け加えることにしました。(2005-2-10)

視覚障害者への配慮

読み上げソフト対応度チェック １４チェック方法

IBM東京基礎研究所で開発されたaDesignerを使用し主要なページをチェックました。その結果は、惨憺たるもので視覚障害者への配慮が足りないことに愕然としました。全てのページをチェックし変更するようにします。また、今後はアップロードする際にチェックを行うことにします。(2005-5-26)

１５全角スペースの排除

IBM東京基礎研究所で開発されたページリーダーは、ご丁寧に全角スペースを「スペース」と読み上げてくれます。前記７の理由でほとんど使用していませんでしたが、可能な限り を使用し全角スペースを排除していきます。(2005-6-4)

１６文章内で使用している言語を可能な限り明示します

私のサイトは日本語のみですので<html lang="ja">と、明示していますが、もし英語で記載した部分には< lang="en">と、明示することにします。(2005-6-4)

１７<h1> <h2>等の見出タグを使い、段落を明確にする。

ページリーダー等読み上げソフトを使用されてある方は、文章がだらだらと長くなると理解しにくくなるそうです。見出タグを使用し段落を明確にし文章を簡潔にするよう心がけます。(2005-6-4)

１８見出タグにあえて{ border-color: #e0ffff; background-color: #efffff;}を設定しました。

前記４と矛盾しますが、前記１７の理由で段落を明確にしていくと、視覚に障害のない方に段落が把握できなくなる障害を作ってしまいます。このためあえて<h2>や<h3>に{ border-color: #e0ffff; background-color: #efffff;}を設定しました。(2005-6-4)

見出タグを{ border-color: #ffff99; background-color: #ffffcc;}に変更しました。

色を使用する時はWebセーフティーカラーを使用するようにしました。しかし、

{ border-color: #e0ffff; background-color: #efffff;}

を

{ border-color: #00ffff; background-color: #ccffff;}

に変更すると、枠線がきつい感じがしましたので

{ border-color: #ffff99; background-color: #ffffcc;}

を使用することにしました。(2005-12-12)

バリアフリーへ向けてさらなるチェックを行いました

HTML 4.01,CSSチェック １９チェック方法

FirefoxのツールWeb Developer Toolbar[日本語版]0.9.3を使用しチェックしました。その結果、３日間睡眠がほとんど取れませんでした。おかげさまでチェック済みのアイコンを表示してよいとのお許しをほとんどのページにいただきました。

Web Developer Toolbarは株式会社インフォアクシアのサイトにあるツールのページからダウンロードできてました。あなたのサイトにバリアを作らないためにまずはHTML 4.01,CSSに対応することをおすすめします。このサイトにはInternet ExplorerのツールバーWeb Accessibility Toolbarもあります。みんなが少しずつ努力すれば、みんなが利用できるページが増え続けるはずです。それが、WEBの姿のはずです。(2005-7-16)

バリアフリーへの道はさらに続く

XHTML 1.0 Strictへの移行を開始しました ２０チェック方法

バリアフリーへ向けサイトのページをHTML 4.01 Strictからより厳格な記述を要求されるXHTML 1.0 Strictへ書き換えることにしました。チェックの方法は前回と同じでFirefoxのツールWeb Developer Toolbar[日本語版]0.9.3を使用しチェックしましています。前回の睡眠不足が幸いし、かなり簡単に変更が可能です。チェック済みのアイコンを表示してよいとのお許しをいただけるよう少しずつ変更していきます。

でも、バリアフリーの道は、茨道です。<?xml version="1.0" encoding="ISO-2022-JP" ?>と仕様に従いきちんと宣言するとFirefoxでは「標準準拠モード」になるのですが、Internet Explorerでは「過去互換モード」になってしまい、半日ほど悩み続けました。険しい道のりのようですがブラウザの思惑に惑わされながらもバリアを取り除くため精進を続けます。(2005-8-14)

現在は<?xml version="1.0" encoding="Shift_JIS" ?>と宣言しなければいけませんが同じことです。(2006-4-8)

XHTML 1.0 Strictへの移行を終了しました

諸般の事情で作業が停滞していましたが、何とか終了しました。(2005-9-10)

若干のリニューアル

各ページの先頭にナビゲーションメニューを表示するなどの、若干の変更を行いました。変更のついでに

見出タグを変更しました。

見出

見出に{ width: 93%; padding: 0.5em 1em; text-indent: .1em; border: solid #000080; border-width: 0 0 1px 1em; background-color: #ffffff; color: inherit;}を使用することにしました。(2006-4-8)

２１ナビゲーションメニューの読み飛ばし

柄にもなくヘッドイメージやナビゲーションメニューやパンくずリストを設定したため、読み上げソフトをご利用の方はなかなかページの本文へたどり着けなくなってしまいました。

読み上げソフトはページを読み込むたびに<body>の先頭から忠実に読み上げてくれます。しかし、ヘッドの部分にメニューなどを書くと同じことを何度も読み上げてくれるのでうるさくて堪りません。

ヘッドメニューなどを一番最後の部分に記載し{ position: absolute;}を利用することも考えましたが、テキストブラウザや古いブラウザを使用している方またはcssを無効にした時には、ページの把握ができなくなる虞があります。

このため、アクセスキー [9] を設定しパンくずリストへジャンプできるように設定しました。(2006-4-8)

`css`の書き換え

リニューアルに伴いcssを、MozillaとWindows Internet Explorer 6.xとMac Internet Explorer 5.xとにそれぞれ適用できるようにしました。

MozillaとWindows Internet Explorer 6.xとは、!importantを記述しWindows Internet Explorer 6.xをWindows Internet Explorer 6.xのバグを利用してだましています。

Mac Internet Explorer 5.xには、やはりMac Internet Explorer 5.xのバグを利用し\*/を記述しだましています。

バージョン5.x以上のブラウザでは、意図したとおりの表示ができていると思っています。しかし、W3C CSS Validatorでチェックすると要素が「再定義されています」と警告されてしまいます。(2006-4-8)

アクセシビリティのチェックふたたび

アクセシビリティのチェックをCynthiaに行ってもらいました。ほとんどのページでテストに合格しましたが、彼女は日本語が得意じゃないようです。

本文の中にリンクを続けて書くと、</a>と<a>の間にはテキストを書かなければならないと忠告し続けます。

本文の中にリンクを続けて書くと、</a>と<a>の間に全角文字をいくらかいても駄目でした、半角文字を１文字入れると合格になります。このため、リンクが連続するときには泣く泣く を挿入しました。

とても忙しい彼女ですが、株式会社インフォアクシアのサイトにあるFirefoxのツールバーWeb Developer Toolbar[日本語版]やWindows Internet Explorer 6.xのツールバーWeb Accessibility Toolbarを利用すると簡単に連絡できるはずです。(2006-5-30)

CSSがらみのウェブログをはじめました

通勤途中の、道ばたや電車の中、職場で行き詰まったときなどに湧き出る雑念を記憶にとどめるには少し年齢が邪魔をし出しました。

、ということで、ブログサイトCSSでSiteを作ってみました。