背景を固定する

新しいブラウザを使ってWEBサイトを閲覧していると、本文がスクロールしても背景が固定したままのサイトを見かけることがあります。これを実現する方法を示しましょう。

CSSなら簡単です

実は「カスケーディング・スタイルシート」(CSS)を使えばわりと簡単にできるのです。元々CSSを使っているなら、ほんのわずかの「おまじない」を書き加えるだけで背景が固定されます。下のリストの(3)の部分、青色で書かれた background-attachment:fixed がバックグラウンドを固定する「おまじない」です。既にCSSで背景を指定しているなら、この一言を書き加えるだけでOKです。<body>タグで背景を指定している場合は少し手間が掛かりますが、下のリストをよく見てテキストエディタで作業すればそれほど大変と言うことはないと思います。(追記:「おまけ」参照)

各行の説明

(1)が、「スタイルシートを使います」という宣言です。実はほとんどのブラウザはこれが無くても正しく表示出来るらしいですが、それは約束違反ですからきちんと宣言を書きましょう。
(2)〜(4)の間が<style>要素です。この中にスタイルシートの本文を書きます。下のリストでは説明のため<body>要素だけにスタイルを定義していますが、実際にCSSを使う場合は色々なHTML要素に対するスタイルの定義をここに書き並べることになります。

赤字で書かれた部分は説明用です。実際のHTMLテキストには書きません。

<!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)

<!-- 

ここからCSSの「本体」です。<style>という要素を知らない、
古いブラウザが、CSSの中味をそのまま表示してしまわないように、
HTMLのコメントとして書くことが推奨されています。これはこれで別
の問題の原因になるの可能性があるですが、現在のところ、この方法が
一番「安全」かと思います。

body {background-image:url(wall_neko6.gif);background-color:#EEFFFF;
 color:#000;background-attachment:fixed} (3)


-->
</STYLE> (4)

</head>
<body>

ここに本文を書きます。

</body>
</HTML>

注意事項

NetscapeNavigator4.x以下ではこの機能は使用出来ません。指定しても無視されて、テキストと一緒に背景がスクロールします。無視されるだけでとくに副作用は無いようです。テキストと背景が同時にスクロールする場合と比べて、パソコンが処理するのに余分に時間がかかるようです。スペックの低いマシンで見ている場合は、ちょっとまどろっこしい感じがするかもしれません。

おまけ

IE固有の拡張属性で<body>要素にbgproperties=fixedを指定出来るんですね。これなら、元々CSSを使っていない環境でも簡単です。
<body background="wall_neko6.gif" bgproperties=fixed>
IEだけに対応出来ればよいのならこれで良いらしいです。もちろんW3Cの標準からは外れた物になりますので、標準に従うならCSSで実現しなければならない、ということになります。
戻る | このサイトのトップへ
Ads by Sitemix