ウェブサイトの改善(メニュー関連, 脚注)

メニューの重複排除

従来、CSS疑似要素の:checkedをサポートしないブラウザ向けに下部に条件を反転したメニューが存在していました。

:checkedのサポート状況は Chrome 1.0 / Firefox 1.7 / IE 9.0 / Opera 9.0 / Safari 3.1 ですから、かなり古い環境に限られるですが、Windows XP/Vistaユーザーの方は困る可能性があります。

そのため、ドロワーメニューはcheckedで表示、下部のメニューはcheckedで非表示、と条件を反転させることで対応していました。

しかし、HTML上に(テンプレートで生成していますから実際には反復していないにせよ)重複した内容があるというのは好ましくありません。

そこで、ドロワーメニューについてcheckedで非表示と条件を反転しました。継承の関係で少しCSS記述量が増えましたが、ドキュメント中の重複を排除することができました。

また、メニュー表示中でもドキュメントのスクロールが可能ですが、ドキュメントをスクロールするとボタンが動いてしまうという問題がありました。これも、ボタンの配置方法を変更して修正しました。

この変更に従ってメニューの配置位置を変更しました。これに伴ってHTMLの構造が変化しましたので、CSSのセレクタ優先度と継承が変化してしまい、表示が乱れたため、この点についても追記して抑制しました。

メニューは背景色が透過色の黒、文字色が白っぽいグレーなのですが、これは問題になる可能性があります。

まず、透過色をサポートしていないブラウザの場合は白に白っぽいグレーとなってしまい、見づらくなってしまいます。

そこで、文字色に中間色グレーを定義したあと、rgbaによって非透過の白っぽいグレーに再定義しています。これによって、透過色に対応している場合のみ文字色も変更されます。

同様に透過色に対応していない場合のために背景色は黒で事前定義しています。

黒背景であるにも関わらずグレーを文字色として定義しているのは、 Dilloなど一部のブラウザでは背景色は無視するものの、文字色だけは適用するからです。

重複排除とは逆の方向になりますが、目次をメニュー内にも配置するようにしました。

これは両方同時に表示されるもので、利便性のための変更となります。

脚注についてはマウスを乗せた時点でツールチップ表示されるようにしようか、という考えがありました。

しかし、JavaScriptが意外なほどに長くなってしまったことと、スマホで見られる方が多いため、全員が読み込むにも関わらず受益者が少ないこと、そして操作方法もクリック1回で脚注にジャンプし、もう1回クリックすれば戻ってこれることから採用を断念、そのかわり目立ちやすくするためダガーを追加しました。