スタイリッシュな背景
ここしばらく読者の皆様からのお便りでよく聞かれるのは、｢最新情報｣や｢今月のベスト10｣などのページをスクロールしても背景が動かないのは、どうしてですか？･･････そこで今月は前回に引き続き｢ＨＴＭＬ文書(ハイパーテキスト)｣のテクニックをご紹介します。
背景の画像や色を指定する場合、従来は<body>タグの｢backgraund｣属性および｢bgcolor｣属性を使ってきましたが、これだと背景画像を画面全体へ並べて表示する以外の選択はありません。このページのように背景を動かさないでスクロールしたいなら、他の方法を使う必要があります。ネットスケープの6.0まではインターネット･エクスプローラや一部の閲覧ソフト(ブラウザ)でしか機能しなかったスタイルシートへHTML4.0から加わった｢backgraund｣がそれです。
この拡張機能は<style>タグの｢body｣属性を使って設定し、左のようにスプリプトを記述すれば背景が赤くなります。また、｢red｣の代わりに｢url("../../images/bgyoklg.gif")｣と画像のURLを記述すれば、今ご覧になっている背景となり、色と画像の両方を指定したい時は｢red url("../../images/bgyoklg.gif")｣と半角を空けて記述すればいいのです。もっとも、両方指定しても画像が透明化GIFでない限り、色のほうは隠れて見えません。
<head>
<style type="text/css">
body {background: red}
</style>
</head>
ここまでの機能は<body>タグとまったく同じですが、スタイルシートだと更にオプションがあります。たとえば、このページのスクリプトは右のように記述されています。
<head>
<style type="text/css">
body {background-image: url("../../images/bg_bfade.jpg");
background-repeat: repeat;
background-attachment: fixed;}
</style>
</head>
まず、３つの(下線を引いた)うち最初の｢background-image｣は背景画像を指定するオプションです。背景画像しか指定しないなら、先のスクリプト例と同じく｢-image｣を省略しても構いません。また、このページのスクリプトでは使っていませんが、これとよく似た色を指定する｢background-color｣というオプションもあります。先のスクリプト例では略式の｢background｣を使っており、｢background: red｣の部分を｢background-color: red｣と記述しても同じ意味です。
次の｢background-repeat｣では背景画像をどう並べて表示するか、４つの選択があります。このページで指定した｢repeat｣は、従来の<body>タグと同じく背景画像を画面全体へ並べて表示する機能です。スタイルシートだと、あと横方向にだけ並べて表示する｢repeat-x｣、縦方向にだけ並べて表示する｢repeat-y｣、並べないで元の画像を１枚だけ表示する｢no-repeat｣が選べます。
中央の黒枠の部分が元の背景画像具体例としては、左図中央の黒枠の部分が｢pendant.gif｣という画像だとすれば、次のように記述することで画面中央へ置かれた｢pendant.gif｣が上下縦方向にだけ並べて表示される以外は白い背景となります。一見フレームを使ったような、左の部分だけ色や柄が違うページを作るのも簡単です。
ちなみに、この作例で使っている｢background-position｣という背景画像の位置を指定するオプションは、なかなか重宝します。
<head>
<style type="text/css">
body {background: white url("../images/pendant.gif");
background-repeat: repeat-y;
background-position: center;}
</style>
</head>
もし｢background-position: center｣が｢center｣でなく｢left｣なら、上下縦方向に並んだ｢pendant.gif｣は画面の左寄りとなり、一見フレームを使ったような効果が得られるばかりか、位置はパーセンテージや長さで細かく指定することも可能です。
パーセンテージや長さで位置を指定する場合、半角を空けて横と縦の数値を記述します。初期設定の｢0% 0%｣が画面の左上を意味し、右下は｢100% 100%｣が基本です。つまり｢14% 84%｣であれば画面左から14パーセント、上から84パーセントの位置であり、｢2cm 2cm｣であれば画面左から２センチ、上から２センチの位置を意味します。
もし１つの数値しか記述されていないと、それが横の位置を決定し、縦の位置は自動的に｢50%｣あるいは｢center｣と設定され、作例で｢center｣と指定したのも｢center center｣、これを｢left｣へ変更すれば｢left center｣と解釈されているわけです。また、｢center center｣が｢50% 50%｣、｢left center｣が｢0% 50%｣と同じ意味なのはおわかりいただけると思いますが、ここでひととおりのバリエーションをまとめておきましょう。
｢top left｣ ＝ ｢left top｣ ＝ ｢0% 0%｣ ｢top, top center｣ ＝ ｢center top｣ ＝ ｢50% 0%｣ ｢right top｣ ＝ ｢top right｣ ＝ ｢100% 0%｣ ｢left, left center｣ ＝ ｢center left｣ ＝ ｢0% 50%｣ ｢center｣ ＝ ｢center center｣ ＝ ｢50% 50%｣ ｢right, right center｣ ＝ ｢center right｣ ＝ ｢100% 50%｣ ｢bottom left｣ ＝ ｢left bottom｣ ＝ ｢0% 100%｣ ｢bottom, bottom center｣ ＝ ｢center bottom｣ ＝ ｢50% 100%｣ ｢bottom right｣ ＝ ｢right bottom｣ ＝ ｢100% 100%｣ このページのスクリプト例に戻って、残る｢background-attachment｣は背景を固定したままスクロールできるという強力なオプションです。背景画像を固定する｢fixed｣の他、初期設定の｢scroll｣が選択できます。｢scroll｣を選ぶと背景はページと一緒にスクロールされ、もし｢background-repeat｣の設定が｢no-repeat｣であれば、背景は画面の外へスクロールされた後、見えなくなってしまうのでご注意ください。
もう１つ気をつけなくてはいけないのが、いくら｢background-attachment｣は｢fixed｣が選択されていようと、｢fixed｣をサポートしないプラウザでは機能しないため、そのつもりで｢background-repeat｣を｢no-repeat｣に設定すれば、固定されるはずの背景がページと一緒にスクロールされ、やはり画面から消えてしまいます。
<head>
<style type="text/css">
body {background-image: url("../images/banhlywd.gif");
background-attachment: fixed;
background-position: 98% 12%;
background-repeat: no-repeat;}
</style>
</head>
スクリプトを書く時は、その可能性まで考慮しておくべきでしょう。中でも｢background-repeat｣が｢no-repeat｣で｢background-attachment｣が｢fixed｣の場合は要注意です。｢no-repeat｣と｢fixed｣を指定するなら、まず｢no-repeat｣と｢scroll｣を指定して問題がないか確認して下さい。そうすれば｢scroll｣を｢fixed｣へ変更して機能しなくても(妥協できる範囲内なので)心配いりません。
あと、背景全体を固定しておくばかりでなく、ページをスクロールしても絶えずロゴが右上へ表示されるようなパターンも考えられます。左のスクリプトはその一例ですが、じっさいの感触をつかんでいただけるよう、｢小咄集｣の１ページを使って簡単なサンプル･ページを作ってみました。いかがでしょうか？ (もし、｢スタイルシート｣をサポートしないブラウザでサンプル･ページをご覧になった場合、ロゴは左上へ表示され、ページと一緒にスクロールします)
＊ ｢Yokochinのハイパーテキスト･マニュアル｣ではスタイルシート
の｢background｣に関して、より詳しい解説がご覧いただけます。
|
お断り