ランディングページなどで、画像が消えたり表示されたりするのは、どうしてだろう?
この記事はこんな疑問にお答えします。
本記事の内容
・ランディングページでの画像が消えたり表示されたりする
・背景画像を固定する
・実際のソース
■ランディングページでの画像が消えたり表示されたりする
「ランディングページを見ていると、表示されている画像が消えたり、また現れたりするよね」
「あれはどうやっているんだろう」
縦に長いランディングページを見ていると、最初に表示されていた画像が、下にスクロールすると消えてなくなるのに、さらに下にスクロールするとまた現れたりしますよね。
僕が初めて見た時、「いや、これどうやっているんだろう?」と不思議に思いました。
とても高度なスキルがないとできないんじゃないかな・・・。
実際にはそれほどスゴイことではないのですが、方法がわからなかった僕は、「こんなことできないよ」と素直に思ったものです。
HTML CSS を学んだ人からすれば、「そんなの簡単じゃん」と言うと思いますが、スキルが低いととても難しいことに思えてしまうものです。
では、その方法とは・・・
「背景画像を固定する」です。
「えっ?!そんな簡単な方法なの?」
簡単な方法なのですが、その背景画像に写真などを使うと、途端にスゴイことのように見えるから驚きです。
「そう思うのはお前だけや」と言われてしまいそうですが・・・。
■背景画像を固定する
では、実際の方法です。
HTML でbody要素に背景を設定します。
それを画面横いっぱいに表示します。
その際、body のmargin が自動で取られるので、margin の値を 0 にしておきます。
そしてbody の中に、各要素を入れていき、その各要素にも背景を指定すると、各要素が表示されている部分は、body の背景より上に表示されるので、body の背景は消えているように見えます。
その後、背景を指定していない要素が表示されると、body の背景がまた表示されるので、再び現れてきたように見えるのです。
簡単ですが、body の背景にオシャレな写真などを背景として設定すると、デザイン性が高まって見えるので不思議です。

■実際のソース
わかりやすく表示されるものをコーディングしてみました。
以下のようになります。
Background Sample
ボックス1
ボックス2
ボックス3
ボックス4
body {
background-color:skyblue;
background-size:cover;
margin:0;
}
#box1 {
background-size:cover;
width:100%;
}
#box2 {
background-color:green;
background-size:cover;
margin: 0;
padding:0;
width:100%;
}
#box3 {
width:100%;
height:700px;
margin:0;
background-color:pink;
}
参考にしてみてください。
スポンサードサーチHTML&CSSとWebデザインが 1冊できちんと身につく本