盗んで増やそう！CSSデザインの引き出し: 第1回 背景を固定して、サイトに奥行き感を出す
この連載について
はじめまして。「盗んで増やそう！ CSSデザインの引き出し」を担当することになりました大谷剛です。第1回目ということで、まずはこの連載について説明します。
この連載は、実際のサイトを参考に、みなさんにCSSデザインのアイデアとテクニックを身につけてもらうことを目的としています。下記の流れを大枠として、記事を構成していこうと考えています。
- 参考となるサイトをピックアップし、盗むアイデアを紹介する。
- そこに使われている技術や実装方法を解説する。
また、内容が多岐にわたったり複雑難解化することを避けるために、次のことを前提として執筆しています。
- 解説の内容やサンプルの動作環境はモダンブラウザーを対象としている
- 聞き馴染みのある用語に置き換えている（例：レンダリングエンジン→ブラウザー）
盗むデザインアイデア
今回は、参考サイト「Nyansa」から、「背景を固定して、奥行き感を出す」というアイデアを盗みます。
まずは、Nyansaにアクセスして、ページ最下部までゆっくりとスクロールしてみてください。
背景に敷かれている都市の画像が、スクロール量に関わらず、固定表示されています。また、サイト最下部までスクロールさせると、街道画像も固定表示されていますね。
都市画像と街道画像が背景画像として固定表示されつつ、コンテンツがスクロールした際に背景画像が見え隠れするため、ユーザはサイト全体が二層構造（背景画像の層とコンテンツの層）になっているような錯覚に陥ります。これにより、奥行きを感じる視覚効果が得られ、サイトの面白みが増しています。
一時期、「パララックス（視差）」と呼ばれる視覚効果を利用したサイトが増えましたが、それと近しい効果がありますね。「パララックス」で検索すると、パララックスを利用したサイトがいくつかヒットするので、興味のある方はチェックしてみてください。
今回盗むアイデアの特徴は、少ないCSS記述で実現可能であり、使い方次第で大きなビジュアル効果を生むという点です。検索してヒットするパララックスを利用したサイトを作るには、ある程度の（この連載の想定読者レベルには敷居が高い）技術・知識が必要となりますが、今回盗むアイデアであれば実現が容易です。
それでは「背景を固定して、奥行き感を出す」というアイデアを盗み、一つの表現テクニックとして身につけましょう。
鍵となるbackground-attachmentプロパティ
「背景を固定する」ための鍵となる技術は、ズバリ！ background-attachmentプロパティです。しかも、今回盗むアイデアを実現するために覚えるべきことは、background-attachmentプロパティのみでいいのです！
background-attachmentは、画面がスクロールされた際の、背景画像の表示位置を指定するプロパティです（attachmentは日本語だと吸着や接着といった意味合いです）。background-attachmentプロパティに設定できる値は、以下の3つです。
プロパティ値 内容 scroll スクロールすると、背景画像も一緒に移動します fixed スクロールしても、背景画像は固定された状態で表示されます local 要素内において、スクロールすると、背景画像も一緒に移動します
背景を固定するにはこの中のfixedを使用します。
div { background-attachment: fixed; }
仕様上、fixedを使用した際にブラウザーは以下のように振る舞います。
- fixedが指定された要素の背景画像は、viewport（後述）を基準に固定表示される
- 当該要素がviewportに表示されると、その当該要素の領域分だけ、背景画像が表示される
この振る舞いを利用して、「スクロールした際にコンテンツで背景画像が見え隠れする」ように実装するのです。言葉だけではわかりにくいと思いますので、サンプルを作りながらみてみましょう。
サンプルでアイデアを試す
それでは、参考サイト「Nyansa」と似たページとして、スクロールしても背景が固定されるサンプルをひな形から作成してみましょう
// ひな型 <!doctype html> <html lang=”ja”> <head> <meta charset=”utf-8″> <style> html, body, header, footer, div { margin: 0; padding: 0; } header { height: 200px; } footer { height: 200px; } div { height: 800px; } </style> </head> <body> <header></header> <!— ヘッダー領域 —> <div></div> <!— コンテンツ領域 —> <footer></footer> <!— フッター領域 —> </body> </html>
このひな形の構造は次のようになっています。高さ200pxの領域headerとfooter、そして高さ800pxの領域divを縦に並べた図です。
これをブラウザーで閲覧すると次のように表示されます。viewportはブラウザーの表示領域だと思ってください。headerとdivの一部が表示されている状態になりますね。
このひな形を修正して、headerとfooterに背景画像を敷いてみましょう。
（省略） header { height: 200px; background-image: url(‘./header.png’); /* ヘッダー用の画像を設定する */ background-repeat: no-repeat; /* 繰り返して配置しない */ background-position: top center; /* 上揃え */ } footer { height: 200px; background-image: url(‘./footer.png’); /* フッター用の画像を設定する */ background-repeat: no-repeat; /* 繰り返して配置しない */ background-position: bottom center; /* 下揃え */ } （省略）
背景画像を敷いたときの構造は次のようになっています。
これをブラウザーで閲覧すると次のように表示されます。headerとfooterに画像が表示されましたね。ここまではみなさんの想定通りではないでしょうか。
それでは、背景を固定するために、background-attachmentプロパティの値をfixedにします。
（省略） header { height: 200px; background-image: url(‘./header.png’); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; /* 固定配置} */ footer { height: 200px; background-image: url(‘./footer.png’); background-repeat: no-repeat; background-position: bottom center; background-attachment: fixed; /* 固定配置} */ } （省略）
背景を固定したときの構造は次のようになっています。
これをブラウザーで閲覧すると次のように表示されます。
上図の背景を固定したときの構造はみなさんの想定通りでしょうか？ 背景画像が敷かれている領域がheaderやfooterではなく、viewportになっています。これは、background-attachmentプロパティの値をfixedにした場合、「背景画像はviewportに対して固定表示される」というルールが存在するためです。
注: 厳密にはviewportに背景画像が敷かれるわけではないのですが、ここではわかりやすさを優先しています。
そして、background-attachment:fixedが適用された領域と重なった部分のみで背景が表示されるようになります。ちょうど、headerやfooterがマスク的な役割を果たしていると考えると理解しやすいでしょう。
画面下部までスクロールした場合、構造は次のようになります。
これをブラウザーで閲覧すると次のように表示されます。
最後に、各値をbackgroundプロパティにまとめてサンプルの完成とします。
// 完成形 <!doctype html> <html lang=”ja”> <head> <meta charset=”utf-8″> <style> html, body, header, footer, div { margin: 0; padding: 0; } header { height: 200px; background: url(‘./header.png’) no-repeat top center fixed; } footer { height: 200px; background: url(‘./footer.png’) no-repeat top center fixed; } div { height: 800px; } </style> </head> <body> <header></header> <div></div> <footer></footer> </body> </html>
最後に
今回盗んだ「background-attachmentプロパティを使用して背景画像を固定する」というデザインアイデアを使えば、少ないプロパティだけでも面白味のある視覚効果が得られるのではないでしょうか。一つのテクニックとして、みなさんの今後の制作に活かしていただければ幸いです。