HTML備忘録 / 基本方針

HTML専用エディタは、無意味なDIVタグを大量挿入しソースを肥大化させ可読性を落とし、アクセシビリティに対する配慮は欠落、その上、正しい文法が使用されている保証もない（私の知る限りでは概ね正しくない）。そこで、作成はテキストエディタ手打ちで行う。

そもそも私は、アクセサリやフリーソフトで解決できる事に出費する余裕を、実生活上も精神衛生上も持ち合わせていない (^_^;)

旧スタイルではNetscape Navigator 2.0の文字化け対策で、iso-2022-jpを使用していた。しかし1996年リリースのNetscape 2.0は既に絶滅しており、iso-2022-jpを使う理由は無い。であるが、使っていけない理由も見当たらない。

辺りを見渡し日和った結果、積極的理由は無いが広く使われるUTF-8を採用した。不都合が起こらなければ、変更することはないと思う。なお、正確にはBOM（Byte Order Mark）なしのUTF-8Nで、BOM付きだとjQueryが動作しなくなることがある、爆弾不要！と記憶せよ。

配色

システムカラー16色のカラーネームとRGBコード

#000000 black	#808080 gray	#c0c0c0 silver	#ffffff white
#0000ff blue	#000080 navy	#008080 teal	#008000 green
#00ffff cyan	#00ff00 lime	#ffff00 yellow	#ff00ff magenta
#808000 olive	#800080 purple	#800000 maroon	#ff0000 red

旧スタイルではDos、Windows 3.1やEGC（PC-9801のWindows 95など）など古い環境対策でシステムカラー16色のみで配色していたが、この対応はすで意味を失っている。しかし同時により確実なコントラストを提供する人的配慮でもあり、その必要性は今も変わらない。また、すでに「時代おくれ」の「らしい色」として定着している事もあり（少なくとも本人はそう思っている）、システムカラー16色のみで配色する。

最も基本的配色である文字色と背景色も旧スタイルを踏襲し、黒背景に白文字とする。最大コントラスト差は白と黒の組合わせであり、個人的感覚だが「ホワイトボードに黒マーカー」より「黒板に白チョーク」が見やすく感じる。

残された色を無駄使いしない、例外を作らない、この2点からリンクは既読未読など区別せず黄色で統一する。また、色情報が失われた場合でもリンクを表せる様に、アンダーライン省略は認めない。リンクにはマウスオーバー白反転強調も併用している。カーソルの無いタッチ環境では無意味であるが、私がPCユーザーなんで (^^ゞ

CSSレイアウト

旧スタイルは旧型対応でガチガチのTableレイアウトだったが、膨大な作業量、可読性損壊、メンテナンス性最悪、と提供側のデメリットは大きかった。また、閲覧側でCSSの無効化や差替えで再整形する障害にもなっていた。今回の対象環境では基本的CSS実装に問題がない事から、レイアウトはすべてCSSで行なって提供側の負担を減らし、かつ閲覧側の都合で再整形できるようにする。

ページレイアウト

これまで640×480 px（通称VGA）を基準に横幅580 pxで作成していたが、今時のPCモニタでは最低でも1024×768 px（XGA）は表示可能である。しかし小型タブレットも存在するのでその対応として800×600 px（SVGA）を標準とし横幅は780 pxとする。

文字サイズデフォルトの場合、横幅780 pxをフルに使うと行文字数が多くなり読み難くなる。そこで増加した200 pxからスペーサー20 pxを引いた180 pxをサイドメニューに割り当てた。

文章には読みやすい行文字数があるので横幅の制限は譲れないが、最近の大型モニタでは周辺に巨大余白（余黒？）が出来て結構間抜けである。

しかし、この画面一杯にレイアウトして、通常の小型モニタで操作性を損なう（不快な）横スクロールバーを表示させてしまう事に比べれば害は少ない、たぶん無害、私が笑われるだけですむ。

黒背景にぎっしり文字が並ぶと圧迫感が生じるので、文字が並んで画面が単調になった場合には圧迫感軽減を目的に、イメージ画像を含む適当な画像を挿入する。この間抜けなスクリーンショットがなくても状態は十分に把握できると思うが、レイアウト、見た目の問題で配置している。って、それが黒いのは如何なものか (^_^;)

JavaScript解禁

SSL足切で基本的なJavaScript対応に問題があるブラウザは無くなったと思われるので、JavaScript／jQueryを解禁する。但し、全ての環境の挙動を把握している訳では無いので、エラーや非対応時に深刻な情報欠落が起こらないように、ナビゲーションや重要情報の提供には使用しない。

また、閲覧者にとって受入れのデメリット（セキュリティ問題）より受入のメリットの方が大きい（より良いScriptを享受できる）と判断し、併せてDomStorageも使用可とする。これで、Scriptのコーディングも非常に楽になる。

なお例外的に「伝言板」へ移動はJavaScriptで行っている。これはソースにベタ書きしないことによって、URLの自動収集をブロックする事が目的で、掲示板改造支援サイトの「URLのJavaScript表示」を使わせて頂いた、感謝 m(_ _)m

ナビゲーション

トップページ

ここ「時代おくれ」では表紙と呼んでいるが、トップページがサイトマップを兼ね一目でサイトの趣旨内容が理解できるように心懸ける。なお、画面左側の画像群は予定項目の追加など、重要更新のバナー用に準備しているが今のところ機能していない。

サイドメニュー

各ページに全コンテンツにアクセス可能なサイドメニュー（ほぼサイトマップ）を設置する。本文のスクロールで消えないようにCSS単純固定や追従型とすると、メニューが長くなって画面下部にはみ出した場合、その部分はアクセス不能となる。そこで、JavaScript/jQueryによるフロート方式を採用、スクリプトは神戸ホームページ制作センターの「サイドメニューが下まで行ったらそこで固定するJS」を使わせて頂いている、感謝 m(_ _)m

個人的にこのサイドメニューは気に入っているが、ページが長くなるとページ下部から相当量のスクロールをしないとサイドメニューの最上部にアクセスできず、鬱陶しい。そもそも、サイドメニューの挙動を知らない閲覧者はスクロールしない。常に、適切なページ分割（ページ長）を意識する必要がある。

現時点の問題ページは「プログラミング」、あれは長すぎ (^_^;)

サイドメニューは別ファイル読込みで共通化するのが作成管理上は都合がよい。しかし「JavaScript解禁」の方針に従いスクリプトなしでも表示できる様に、非常～に面倒^*だが「敢えてベタ書き」にしている。これで、スクリプトトラブル発生時にも安心できる。

^*サイドメニューに1ヶ所でも変更があると全ページ書き直し。

ナビゲーションスキップ

便利なサイドメニューであるが、最初から順番に読み上げるスクリーンリーダーでは大量の障害物となってしまう。そこで不要な場面でスルーできるように、ページタイトルの後にメニューをかわし本文に移動するスキップを、ページ末に表示中のサイドメニューへ移動するスキップと表紙まで戻るスキップを設置している。

ナビゲーションスキップは、1x1 pxの透明Gifにそれぞれの目的リンクを設定して実現しており、読上げ時以外は見えない（聞こえない）ので特にその存在が気になることはない。

なお、最高裁判所ではキーボード操作にも配慮した見えるスキップを設置しているが、将来的に必要を感じたらこれを導入するかもしれない。