Yukino
マスターすれば、静的で物足りなかったページが、動きのあるおしゃれなページに生まれ変わりますよ！
それでは早速やってみましょう〜！
用意するもの
- HTMLエディタ
- 背景用の画像３枚
INDEX >>
スクロールしたくなるデモ
百聞は一見に如かず！
実際どんな風になるのかお見せします。
なんだか楽しくてずっと上下にスクロールしたくなりませんか？
See the Pen background-attachment by Yukino Watanabe (@yukino0on) on CodePen.
マーケティング的 背景固定のメリット
カーテンが上がっていく感じ。
と表現する人もいますね！
文字は通常通り動いていくのに、背景が固まっています。
これをマーケティング的に見ると、伝えたいことに集中させられる
というのがメリットじゃないかなと思います。
文字をあえて少なくすることで、「なになに？次は？」というワクワクを掻き立てられます。
つまり、スクロールしてどんどんのめりこませて行くLP（ランディングページ）でも有効な手法ではないでしょうか。
「リバウンド繰り返していませんか？」
「実はそれ、あなたは悪くないんです。」
「XXなら、痩せたあと体重をキープできる！」
みたいな感じですね。
デモでも一応そんな風に書いてみました。
99%の人が自分のヒジを舐められない。
でもそれを知った90%の人が試しに舐めようとする。
らしいですよ。
すごく前のビデオですが、アメリカにいた時に面白い子どもの本があって、そこに書いてありました。
よかったらみて見てください。
にしても画質悪い。
当時は綺麗だと思っていたけど。たった5年でここまで進化するんですね・・。
HTML/CSSコーディング
ではやり方です！
HTMLとCSSそれぞれ見ていきます。
シンプルなHTMLでOK
今回は、箱が３つのHTMLにしました。
それぞれの箱に言葉が入っています。
これ以上説明のしようがない・・というくらい簡単な構造です。笑
クラスは、固定させたい背景を持つdiv要素に.fixedをつけています。
それぞれのdivの背景を別々の画像にしたいので、それぞれに.bg1, .bg2, .bg3というクラスをつけます。
background-attachmentで背景を固定できる
続いてCSSです。
先ほどのクラスに対して、それぞれ違う背景をbackground-imageで指定します。
ここまでは一緒ですね！
はい、ここが魔法です！笑
固定させたい背景のdivに.fixedクラスをつけたので、この子たちに
background-attachment: fixed;
というCSSを使ってあげます。
たったこれだけ。
あとは、見栄えをよくするために
- 背景をいっぱいに表示させる
- 高さを指定
- 文字を真ん中に
というような感じで整えてあります。
ぜひ使ってみてくださいね！
スマホ（iOS）では表示されない・・！！
さて、このとっても簡単に背景を固定させるbackground-attachmentというCSS。
残念なお知らせです。このCSSはiOSが未対応です。
スクロールの効果がより期待できるのはスマホなんですが、iOSではいつもと変わらず背景が動いていってしまいます。
ただ。
ご安心ください。
ちゃんと裏ワザがあります。
擬似クラスというのを使うのですが、これはまた別の記事で解説したいと思います。
Yukino
おしゃれサイト制作ならLinksbase
Linksbase（リンクスベイス）は、ワードプレスをベースに、高いデザインスキルを駆使したホームページをご提供しています！
女性ならではのおしゃれなサイトデザインながら、芸術のおしゃれだけでなく、マーケティング観点を加味したご提案いたします。
モットーは、企業やサービスを【ブランディング】し、お客様に「選ばれる」ためのホームページ制作。
ブランディングとは、「〇〇といえばここ」という意識をお客様に根付かせること。「価格競争知らず」「リピート客がたくさん」「社員が長く働いてくれる」そんなビジネス、始めませんか？
