Webデザイン |
Lesson 10 | 背景画像を固定配置した スクロールテクニック |
制作・文 | 境 裕司 | |||
> | To Use | CSS | ||
> | Browser | IE 7over | Firefox 3over | Safari 4over |
紙媒体とは違い、Webページでは異なるレイヤーを使い、コンテンツ領域と背景を分離することが可能だ。背景にレイアウトの型を描き、その上コンテンツをスライドさせるテクニックも容易に実現できる。 |
01
【1-1】サンプルページは、ヘッダー領域+コンテンツ領域+フッター領域の標準的な構造パターン
【1-2】
02
【2-1】大見出しには、font-size:6emを指定。使用している「em」は、ブラウザで設定されたデフォルトのフォントのサイズを1とする単位になっている
【2-2】
03
【3-1】ページの文字色と背景色は(背景画像の有無に関わらず)セットで指定しておく
【3-2】
04
【4-1】body要素に背景画像の指定。背景画像の中央部に、コンテンツ領域をおさめる。
【4-2】
05
【5-1】
【5-2】コンテンツ領域を背景画像にあわせて、幅を520ピクセル、中央揃えにする
【5-3】
06
【6-1】「background-attachment:fixed」の指定によって、背景画像とコンテンツを分離。背景の上に透明のフィルムを重ねているイメージ
【6-2】
【6-3】
07
【7-1】
【7-2】
【7-1】【7-2】ページズーム機能で縮小したときの表示結果(右)。背景画像も縮小表示されるため、幅が足りなくってしまっ た。幅を拡張するか、背景色に溶け込むようにグラデーションを追加しておくとよい