背景の繰り返し・表示位置・固定表示の指定について
本日の教材動画はこちら
前回に引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。動画の後半が死ぬほど説明不足だったため、実践される人は一旦最後まで読んでいただけるとわかりやすいかと思います。
背景の繰り返し設定について
前回一瞬だけ触れた背景画像の繰り返し設定のプロパティについて、より詳細に見ていきましょう。まず背景の繰り返し設定は background-repeat プロパティを使用します。設定できる値は下記の4つ。
- no-repeat → 繰り返さない
- repeat → 縦横に繰り返す
- repeat-x → 横に繰り返す
- repeat-y → 縦に繰り返す
実際に使ってみましょう。まずは適当に背景が表示されるようdivにboxというクラス名をつけてページを作ります。
divの縦横幅を指定、背景色グレー、背景画像に猫画像を指定しました。繰り返し設定については現在何もしていないため、初期値である「repeat（繰り返す）」で表示されていることがわかります。
縦にだけ、横ににだけ背景を繰り返させる方法
では値部分を「repeat-x」「repeat-y」にしてみましょう。ｘは横軸、yは縦軸のことですので、表示もまんま横のみ繰り返す、縦のみ繰り返すになったことがわかります。
背景の表示開始位置を指定する。
こちらも前回ちらっと触れましたが、背景の表示位置の詳しい指定の仕方をみてみましょう。背景位置の指定には「background-position」のプロパティを利用します。指定できる値は下記の3つとなります。
- キーワードで指定 → center / top / bottom / left …などの位置で指定（※）
- ％ → 左上を基準に、そのBOX内の〇％の位置から開始するという指定
- 数値 → 数字+単位で明確に開始位置を指定する方法
※ この方法はそれぞれ0% 50% 100%指定しているのと同じ効果が得られる。
こちらも実践で見てみましょう。何もしなかった場合は「左上に表示・繰り返し表示」となりますので、分かりやすいよう no-repeat に設定したうえで位置を指定してみます。
上側は「center」のみの指定の為「ど真ん中」に表示されます。％表現だと縦50%横50%と同じ位置に表示される形になります。
対して下側は「center right」の指定で、「真ん中の右より」という指定をかけました。％表現だと縦50%、右0%の位置に表示になります。bottom、leftであれば下100%、左0%という感じです。わかりやすいですね！
自分で微調節をしたい場合は勿論「35%、70%」や「100px、500px」など、％指定や数値指定を使えばOKです。凝ったサイトを作る場合はこちらのほうを使う事が多いかもしれませんね。
スクロールした際の背景表示の指定をする
次にスクロールバーがある場合、背景をどのように表示するかの指定をしてみましょう。使うプロパティは「background-attachment」…なんですが、まずここで冒頭で言っていた「動画が死ぬほど説明不足」だった部分を先に説明しておきましょう。
動画は軽くソースとCSSを見せた後「〇〇の場合はこんな感じで表示されてー...」と説明が続くのですが…。実際にやってみるとわかるのですが、動画通りにCSSを組んでも同じようには表示されません。何故なら
なんか知らない間に外部CSS読み込みが1個増えてるから…。誰だよお前！！今までいなかっただろ！！急に出てくんな！！
どうやらこの外部CSSでページの背景色やら表示幅やら果ては背景URLの指定まで行っているようなのですが、動画ではこの外部CSSの説明は一切されないため最初かなり「？？？？」となります。明らかにCSS指定少ないけどなに…？どういうこと…みたいな。
というわけで、謎の外部CSSをいつも使うCSSにまとめて記載し、自分なりにページを作りました。動画と中身一緒かはわかりませんがある程度同じ見た目になっているはずです。初心者向けの説明動画のはずなんですが、たまにいきなり謎仕様ぶっこんでくるので混乱してしまう…。
気を取り直して、スクロール表示時の背景について見ていきましょう。
background-attachment の表示の違い
まず使える値は下記の3つとなります。
- fixed → 背景画像の位置を固定、スクロールしても動かない。
- scroll → スクロールに伴って背景画像も移動する
- local → そのBOXのスクロール一に合わせて移動する
まずは動画の通り画像を表示させるためのボックス枠を3つ作ります。（冒頭brがたくさん入ってますが、検証画像をわかりやすくするためにいれたものです。無視してください）
動画では4行くらいしかない外部CSSもきちんと全部記載しました。ページの背景を黒色、DIVの幅を設定し、文字色は白、背景画像の指定とスクロール設定はオートにしてます。
fixed の表示について
値をfixedにした場合の表示です。fixedは「ページ全体の背景を固定」するため、スクロールバーを動かしても背景は動きません。（赤い矢印がスクロールバーの位置です）
もちろんページごとスクロールしても背景画像の位置はかわりません。上記はまるで表示位置がかわったように見えますが、ページ全体を下にスクロールしたことによりBOXから見える背景の位置がかわっただけです（冒頭にbrをいれるなどしてスクロール量を増やすとわかりやすいです）。
scroll の表示について
次に設定を scroll にします。これは「ページ全体のスクロールに伴って背景画像を動かす」設定です。上記のようにページ全体ではなく、BOX内のスクロールがある場合、BOX内スクロールを動かしても文字が動くのみで背景画像は動きません。
上記のように「ページをスクロール」させた場合は、スクロールと一緒に背景の位置が動きます。
local の表示について
最後にlocal表示です。こちらは「BOX内のスクロールにあわせて背景画像を移動させる」という内容です。ページ全体をスクロールした場合はscrollと同じ動きをしますが、BOX内でスクロールした場合は上記のように画像も一緒にスクロールし、見える範囲がかわります。
この辺りは文字や画像だと少々分かりにくいので、動画を参照しながら勉強するとわかりやすいです（私の説明が下手で申し訳ない）。
【参考サイト】
background-position …… 背景画像の表示開始位置を指定する
