スクロール･バーのカスタマイズ
今回ご紹介するのは、いわば｢スタイリッシュな背景｣の続編で、スタイルシートの新機能を利用したスクロール･バーのカスタマイズ方法です。ご自分のホームページを自らデザインされているかたが、それをインターネット･エクスプローラで表示した場合、たとえブラウザの画面内に納まるページであれ右側のスクロール･バーは残るのを、なんとか消そうと試みたことがありませんか？
フレームを使うと画面より小さいページのスクロール･バーは表示されず、大きいとしても各フレームを指定する際、アドレス(URL)の後に｢scrolling="no"｣と書き加えれば、そのフレームだけスクロール･バーが表示されません。ひょっとしたら、それを<body>タグへ記入してみると？･･････儚(はかな)い望みは無残にも打ち砕かれた苦い経験があるのは私ばかりでないと思います。ところが、スタイルシートへ追加された拡張機能で今や(インターネット･エクスプローラに限って)スクロール･バーの表示は思いのままなのです。
そもそも私がハイパーテキスト(ＨＴＭＬ文書)を作成する上で既存のソフトを嫌い、メモ帳しか使わない理由の１つは、日々ＨＴＭＬの機能が進化している反面、それらは必ずしも既存のソフトへ組み入れられると限らず、たとえ組み入れられるにしてもソフトとして開発(プログラム)するだけ時間的なズレ(遅れ)が生じます。したがって、これまでこのコラムでご紹介してきたＨＴＭＬ関係の裏技(および表技)は、もし既存のソフトをご使用中のかたがそのソフトで出来ない場合こそ、ぜひお試しください。
<html>
<head>
<style type="text/css">
body {scrollbar-base-color:#ff0000;}
</style>
</head>
決して難しいことではありません。たとえば、既存のソフトでご自分が作成されたハイパーテキスト(ＨＴＭＬ文書)をメモ帳で開くと、２行目か３行目は｢<head>｣で、その何行か後に｢</head>｣と記述された行が見つかるはずです。見つかったなら、｢<head>｣の次へ左の記述例で臙脂(えんじ)色の３行を書き加えてみて下さい。見つからないとしても、１行目か２行目は｢<html>｣のはずですから、その次へ左の記述例どおり(緑色の２行を含む)５行を書き加えます。
こうしてメモ帳で書き加えた文書を｢上書き保存｣し、それをインターネット･エクスプローラで開くと、スクロール･バーは赤くなっているのがおわかりでしょう。原点をご理解いただけたとして詳細へ進むと、まずスクロール･バーを縦横とも表示したくないなら、<style>タグの｢body｣属性を使い、右図のようにスプリプトを記述します。これでスクロール･バーが表示されず、画面はすっきりする反面、もし読者がこちらの意図したサイズ(たとえば800×600ピクセル)より小さく画面を(たとえば640×480ピクセルで)設定しているとページ全体を見られない可能性はあるので、ご注意ください。
<head>
<style type="text/css">
body {overflow:hidden;}
</style>
</head>
さらにスタイルシートが便利なのは、フレームと違ってスクロール･バーの表示を縦か横だけ指定できる点です。｢ハリウッド最前線｣のサイトマップのような横長のページだと、右(縦方向)のスクロール･バーが不要でも下(横方向)のスクロール･バーは必要です。こういう場合、｢overflow｣の後へ｢-y｣を付け足すと縦のスクロール･バーだけが表示されません(左図)。また、横のスクロール･バーだけを表示したくない時は｢-y｣を｢-x｣にします。
<head>
<style type="text/css">
body {overflow-y:hidden;}
</style>
</head>
ちなみに、｢hidden｣の代わり｢none｣と記述しても同じ効果を得られますが、この場合スクロール･バーは表示されずその部分だけブランクとなり、また｢hidden｣の代わり｢scroll｣と記入すればスクロール･バーが表示され、縦の初期設定はこの状態です。したがって、わざわざ｢overflow-y:scroll｣と記入しなくても構いませんが、横の場合は指定するのとしないので必ずしも結果が同じとは限りません。
その一例が縦横両方を指定した右図のスクリプトで、これだと横のスクロール･バーは隠れ、縦のスクロール･バーだけが表示されます･･････つまり、初期設定とほとんど同じ設定ながら、この設定ではページの横幅が画面のサイズより長くなっても初期設定のように横のスクロール･バーは表示されず、ページの一部が隠れてしまう可能性はあるわけです。
<head>
<style type="text/css">
body {overflow-x:hidden; overflow-y:scroll}
</style>
</head>
もちろん、縦と横がこのスクリプトと逆の指定も可能であり、わがサイトマップは｢overflow-x(横)｣が｢scroll(表示)｣、｢overflow-y(縦)｣が｢hidden(隠す)｣と記述しても、ほとんど同じ効果を得られます。ただ、このような画面より横長のページの場合、｢overflow-x:scroll｣を省いても効果は変わりませんが、同じページをそれより大きな画面で見た時は、省くと下のスクロール･バーが表示されないのに対して、省かないとしっかり表示されます。
スクロール･バーの表示を指定できる他、もう１つ｢body｣属性へ加わった強力な拡張機能として(冒頭の記述例のごとく)スクロール･バーの色も指定できるようになりました。このページの右側のスクロール･バーがブラウザの色と違うことは、たぶんお気づきでしょう。スタイルシートへ次のように記述した結果がこれなのです。
このページの場合は｢アロー｣と｢ベース｣と｢トラック｣の色だけを指定していますが、あと｢３Ｄライト｣、｢ダークシャドー｣、｢フェース｣、｢ハイライト｣、｢シャドー｣と選択肢は合計８パターンあります(指定する色の番号が知りたいかたは、私個人のホームページの｢ハイパーテキスト･マニュアル｣で詳しく解説していますので、そちらを参照して下さい)。
<head>
<style type="text/css">
body {scrollbar-arrow-color:#b00f0f; scrollbar-base-color:
#f0f0ff; scrollbar-track-color:#f4f4ff;}
</style>
</head>
８パターンが、それぞれスクロール･バーのどの部分へ反映され、スクリプトをどう記述すればいいかは、以下に挙げた図でおわかりいただけるはずです。図①が初期設定、つまりスタイルシートで何も指定しない状態だとして、図②から図⑨までは各選択肢の｢#0099cc(薄目のブルー)｣を使った実例と指定する時の名称(記述方)が並べてあります。
なお、これらの選択肢を単独で用いても、このページのように複数で用いても問題はありません。ただ、複数で指定する場合、｢ベース｣と｢トラック｣の色を濃くしすぎたり同じ色を使って見にくくならないよう注意して下さい。たとえば、このページと同じパターンで｢ベース｣と｢トラック｣の色をどちらも｢#003366(濃い目のブルー)｣へ、｢アロー｣の色を｢#b00f0f｣から｢#0099cc｣へ変更したのが図⑩です。
これではスクロール･バーがページから浮き上がってしまう上、操作性も良くないでしょう。やはり、ページ全体のバランスが肝心で、極端な場合は図⑩の見にくい部分さえ逆手にとって効果的な使い方が考えられます。
① ② scrollbar-3dlight-color
③ scrollbar-arrow-color
④ scrollbar-base-color
⑤ scrollbar-darkshadow-color
⑥ scrollbar-face-color
⑦ scrollbar-highlight-color
⑧ scrollbar-shadow-color
⑨ scrollbar-track-color
⑩ ｢聖林写真館｣のスライドショーはメニューが右側のフレームへ表示される一方、出演作一覧のほうは左側のフレームへ表示されるのでメニューのスクロール･バーが邪魔です。かといって、すべての女優リストを表示するためには先の｢overflow:hidden｣でスクロール･バーを隠す手も使えません。
対抗策としてメニューをフラッシュで作成する方法が１つ、あるいは｢アロー(上下の三角形)｣を除いてスクロール･バーを背景と同じ色で塗り固めてしまうか？･･････結局、｢聖林写真館｣では手間のかかる前者より簡単な後者を採用しました。また、こうした自分の発想が活かせる部分は、裏返すと既存のソフトに必ずしも期待できない部分なのです。
冒頭で述べたハイパーテキスト(ＨＴＭＬ文書)を作成する上で既存のソフトを嫌い、メモ帳しか使わない理由へ帰着するわけですが、とにかくＨＴＭＬ機能の進化は本来の意図がどうあれ使い方次第で自由に活かせます。<meta>タグのhttp-equiv属性(オプション)で指定できるrefreshは再ロードをしなさいといういう意味です。今でこそこの機能を応用したスライドショーが当たり前とはいえ、かつて私が｢聖林写真館｣のスライドショーへ取り入れた時点から少なくとも半年以上はインターネット上で他に例を見ませんでした。
未だ私が不思議なのは、いくらコンピュータへ詳しくとも本職が作家であり、そちら(コンピュータ)の分野はしょせんアマチュアに過ぎない私でさえ思いつくアイデアが、なぜ私より半年以上遅れてインターネット上へ現われ？ なぜマイクロソフトのようなメジャー中のメジャー企業からこの｢ハリウッド最前線｣にコンテンツのライセンスを打診してくるのか？ なぜ先々月(２月)で110万件以上の月間アクセス件数と30万件弱の日間アクセル件数を記録したのか？･･････結局は自分の｢こだわり｣が原点なのでしょう!?
お互い、インターネット上で人を触発できるような｢いいページ｣を作っていこうではありませんか!!
|
お断り