うーん・・・

ホームページ　窓からのぞく様に一部を固定

解決済

質問者：bbbbbb5
質問日時：2015/10/13 18:11
回答数：1件

説明が難しいのですが・・・宜しくお願いします。
ホームページを作成しておりますが、ページの一部分を
窓から覗く様なイメージ？で向こうの画像を固定したいのですが・・
何と説明したら良いのか分からないので下記をご参照ください。

スクロールしても枠内イメージ部分だけ固定するという感じでしょうか・・

最近見かけるのですが、何と言う名称のものなのでしょうか。
またどうすれば実現出来るのでしょうか？

ご指導宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： weakweak
回答日時：2015/10/14 03:21

パララックスですね。

①css3だけでできるものと、②javascriptも併用してできるものがあります。
また一番簡単に実装できる③パララックスっぽいものもあります。質問者さんの知りたいものは恐らくこれ③かと思います。
①,②の方法についてはcss3に対する知識やjavascriptの知識が必要となるのでここでは説明しません。

③は、bodyにbackground-position: fixed(こんなプロパティ名だったと思います。いつもショートハンドで書いてるので忘れました)で背景を当て、セクションごとにbackground-color: #fffなどと設定します。
するとbackground-colorを設定していないセクションだけにbodyの背景が見え、添付画像のような効果になります。

<body style="background: url(bg.png) fixed">
<div class="sec1" style="background-color: #fff">ここは白背景</div>
<div class="sec2">ここだけにbodyの背景が見える</div>
<div class="sec3" style="background-color: #fff">ここは白背景</div>

ただ、この場合sec2では左右いっぱいに背景画像が広がるので、基本的には添付画像のように左右に色は乗りません。解決方法としては例えばborder-widthを20pxなどをsec2につけるなどがあるかと思います。もう一つの解決方法として、bodyではなくsec1, sec3, あるいはその中の任意の要素にbackground-position: fixedを設定する方法もあります。しかしこの場合、モバイルブラウザではfixedが無効になります(モバイルではbodyに対するfixed以外は無視されます)。

一般的には②javascriptと併用するものが主流ですが、新しいブラウザに対応を限るのであれば①の方法でも可能です。
背景画像は主要なコンテンツではないので、個人的には①css3のみで実装、あるいはそれっぽくなればいいだけなら、ここで紹介した③の方法でもいいのではないかなとも思います。