新しいブラウザを使ってＷＥＢサイトを閲覧していると、本文がスクロールしても背景が固定したままのサイトを見かけることがあります。これを実現する方法を示しましょう。
実は「カスケーディング・スタイルシート」（ＣＳＳ）を使えばわりと簡単にできるのです。元々ＣＳＳを使っているなら、ほんのわずかの「おまじない」を書き加えるだけで背景が固定されます。下のリストの(3)の部分、青色で書かれた background-attachment:fixed がバックグラウンドを固定する「おまじない」です。既にＣＳＳで背景を指定しているなら、この一言を書き加えるだけでＯＫです。<body>タグで背景を指定している場合は少し手間が掛かりますが、下のリストをよく見てテキストエディタで作業すればそれほど大変と言うことはないと思います。（追記：「おまけ」参照）
(1)が、「スタイルシートを使います」という宣言です。実はほとんどのブラウザはこれが無くても正しく表示出来るらしいですが、それは約束違反ですからきちんと宣言を書きましょう。
(2)〜(4)の間が<style>要素です。この中にスタイルシートの本文を書きます。下のリストでは説明のため<body>要素だけにスタイルを定義していますが、実際にＣＳＳを使う場合は色々なＨＴＭＬ要素に対するスタイルの定義をここに書き並べることになります。
赤字で書かれた部分は説明用です。実際のＨＴＭＬテキストには書きません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_Jis">
ここまではお約束の宣言文です。charsetを実際に使う物に合わせる、
という他は大抵このままで構わないかと思います。
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> (1)
<STYLE TYPE="text/css"> (2)
<!--
ここからＣＳＳの「本体」です。<style>という要素を知らない、
古いブラウザが、ＣＳＳの中味をそのまま表示してしまわないように、
ＨＴＭＬのコメントとして書くことが推奨されています。これはこれで別
の問題の原因になるの可能性があるですが、現在のところ、この方法が
一番「安全」かと思います。
body {background-image:url(wall_neko6.gif);background-color:#EEFFFF;
color:#000;background-attachment:fixed} (3)
-->
</STYLE> (4)
</head>
<body>
ここに本文を書きます。
</body>
</HTML>
NetscapeNavigator4.x以下ではこの機能は使用出来ません。指定しても無視されて、テキストと一緒に背景がスクロールします。無視されるだけでとくに副作用は無いようです。テキストと背景が同時にスクロールする場合と比べて、パソコンが処理するのに余分に時間がかかるようです。スペックの低いマシンで見ている場合は、ちょっとまどろっこしい感じがするかもしれません。
ＩＥ固有の拡張属性で<body>要素にbgproperties=fixedを指定出来るんですね。これなら、元々ＣＳＳを使っていない環境でも簡単です。
<body background="wall_neko6.gif" bgproperties=fixed>
ＩＥだけに対応出来ればよいのならこれで良いらしいです。もちろんＷ３Ｃの標準からは外れた物になりますので、標準に従うならＣＳＳで実現しなければならない、ということになります。
戻る | このサイトのトップへ