当サイトに訪れてくる閲覧者において、スマホやタブレットといった携帯端末による表示が5割を超えており、対するパソコンはそれ以下になるという、時代の変化を目の当たりにさせられる状況になっている。閲覧環境に左右されず、どのような機器でも問題なく表示できるよう、入念なセッティングとチェックを繰り返している。
パソコンでの閲覧において、唯一気に入らない、なんとかしたい部分がある。
index.htmlにはHeadline枠を設けており、更新内容を表示するようになっている。スクロールして過去の履歴を表示することができるが、左側に大きなスクロールバーが出ていて、その配色と黒背景の都合から、けっこう目障りだったりする。
これ。
携帯端末であれば、スクロールバーは通常は消えている。スワイプすると、黒背景に合わせた灰色の細いスクロールバーが浮かび上がり、指を離せば勝手に消えるようになっている。レスポンシブウェブデザイン絡みでの設定はしておらず、端末側の都合、狭い画面をできるだけ広大に使うための、ブラウザによる非常にありがたい支援機能となっているらしい。
Internet Explorerであれば、scrollbar-***-colorプロパティで変更し、黒背景に合わせた色を設定できたりするが、IE独自仕様となっていて、今の時代に用いることはできない。
普段はスクロールバーが消えており、マウスのポインタがHeadline枠に入ってマウスオーバー状態のときだけ、スクロールバーを表示。ポインタが枠から外れれば、元のスクロールバーが消えている状態に戻る…そんなCSSのコードは書けるのか。
いろいろ試行錯誤してみて、hover擬似クラスを使えば意図したデザインに仕上がることが分かった。
Headline枠に書かれた更新情報は、通常はoverflow: hidden;で枠外の部分は非表示にしておく。Headline枠用に設定した要素にhover{overflow: auto;}を追加記述しておくことで、ポインタがHeadline枠内に入ってきたときだけ、スクロールできる。
こうしてHeadline枠のスクロールバーを消した、現在のindex.htmlのレイアウト。いまどきのパソコンの画面領域なら、周囲の空白部分が大半を占めるものと思われる。更新情報が下限に達すれば、そこでスライド終了。縦が実測558pxしかなく、レイアウト全体が上へ向かってスライドすることはない。
基本は対象物を消しておき、マウスオーバーでhover擬似クラスによって表示させる点は、当サイトのリンクボタン、ポインタが触れたときだけアンダーラインが出るのと全く同じ(このブログ、WordPressは別設定)。たった一行でスクロールバーを消すことができるなんて、もっと早く設定しておけばよかったかもしれない。