Stylish
Accessibility
Design
を一個人サイトながら目指してみたものの5分で挫折、・・・
2025-03-20開設日更新日

(ちょっと長いですが、タイトルロゴ全文=サイトの正式タイトルになります。
「長過ぎ!」と思われる方は、略称Stylish Accessibility Designてんてんてんてんてんてんでお願いします)

当サイトの内容を一言で説明すると、
CSSは初級レベル JSやCGIに至っては超初心者の個人が、アクセシビリティに挑んだ経緯~経過のコラム
です(一部先行公開)

また、構成レイアウトは、別に運営中のWebサイトWindows10 Screen Customize Tips
に(簡略化していますが)ほぼ準じています。

(複数のWebサイト運営していますが、タイトルロゴがオレンジ系なのはここのみです。
(意図してそうなっています))


マイWebサイトの(黒?)歴史 - アクセシビリティに出会う前

インターネット黎明期にwebサイト作成を始める

私が「ホームページデビュー」したのは1997年・・・前世紀でした。

当時はネット代が従量制で多額だった事もあり、本を購入してサイト作成法を勉強し、愛犬のサイトを作成しました。
(当時「世界に向けて情報発信!」の時代だったので、英語ができないのに英語で作成)
その後、ご要望に応えて日本語のページも作成し、その過程で覚えたサイト作成法を基に(備忘録も兼ねて)、翌年HP Guide for Beginnersも開設しました。

しかし2003年頃・・・
Yahoo Japanに突如登録を切られてしまったのを直接のきっかけに創作意欲を失い、その後10年以上、サイトは殆どBBSメンテするだけになり、(元々「ネスケの人」ですが、この頃はPCスペックの都合もあり主にIE使用)ネットも暇つぶしに惰性でする感じになっていました。


再びwebサイト作成を始める

そんな私が再びサイト作成に目覚めたのは2016年
前年にWindows10ノートを購入し、PCと格闘の末ローカルアカントサインインに戻すのに成功し(MSアカウントの頃は、何かPCが「MSからの借り物」の感覚でした)、デスクトップ画面を「自分仕様」にできてPCに愛着も湧いてきたので、それを題材に、今回のコラムの基にもなったWindows Screen Customize Tips(当時のタイトル名は別)を新設しました。
(当時はCSS超初心者だったので、2025年現在と見た目こそあまり違いありませんでしたが「バリバリのテーブルレイアウト」でした)

が、当時の私は、サイト作成更新から離れていた間にネット界が激変していたのに迂闊にも気付いていませんでした

「世はChromeの時代で、私の好みとはかけ離れたフラットデザイン推奨、リンクには下線を付けないのが常識」

・・・一気にテンションが落ちましたが、気を取り直して今度は真面目にコンテンツ更新を続けました。
(今世紀初めに取得したきり寝かせておいたままのドメインを活用したかったという動機もありました)


webサイトの抜本的見直し開始

そして2018年、Google様の意向?で「httpsとレスポンシブができていないサイトは存在するにあらず」になり、
「私のサイトって、テーマ上、ほぼPCからしか来ないのに・・・(愛犬のサイトはほとんどアクセス無し)」
と思いつつも、フレームのサイトは擬似フレームに直し(当時CSS超初心者だった私にはこれが最難関)、他のサイトも可能な限りHTML5仕様に書き直しました。
(CSSも一から勉強し、その後初級の域までは来ましたが、そこからなかなか・・・
(「絵心ゼロ、でもスタイリッシュなデザイン大好き」な私にとって、CSSの進化は嬉しいものではあったけど、全然ついていけてなかったり)
因みに、私にとって一番大事なCSSは、アクセシビリティにも後々大いに関係してきますが、2021年頃にアップデートされた
「text-decorationプロパティ」
・・・それまで、1ピクセルの細いリンク下線をChromeで引こうと思ったら、面倒なCSS記述が必要だったので(PC用だけならまだしもレスポンシブでやろうと思ったらとにかく面倒過ぎ)、これは正に画期的でした!)


それから5年以上の間、前世紀作成のサイトはほぼそのまま残す事にし、Windows Screen Customize Tipsは細かい部分を地道に修正しながら運営して「そろそろCSSレイアウト的には完成かな」と思い始めた頃、ふと「ユニバーサルデザイン」なる言葉が目に留まりました。
(それまで、アクセシビリティに関して全く興味ありませんでしたが、思い返してみると、Windows Screen Customize Tipsは当初、「非アクティブウインドウバーに色を付ける方法&テキスト選択反転時の背景色を変える方法」のみでスタートしたのですが、「この文字は何色か書かないと分からない人もいるだろうな」と思い、色の名前の説明は必要最小限だけですが書いてはいました)

「ユニバーサル?・・・"大学のデザイン"じゃないよね?」