Webデザイン |
Lesson 8 | 構成要素の位置を固定する レイアウトテクニック |
制作・文 | 境 裕司 | |||
> | To Use | CSS | ||
> | Browser | IE 7over | Firefox 3over | Safari 4over |
ブラウザのウィンドウに表示されるWebページはスクロールしながら閲覧する巻き物に近い。通常は、背景画像も記事と同じようにスライドするが、positionプロパティを利用すれば固定配置が可能になる。 |
01
【1-1】
【1-2】
【1-1】【1-2】サンプルページはテキストだけで構成、画像は使用していない(装飾として配置される背景画像は使用している)
02
【2-1】コンテンツ領域は、ページの左端から40%の位置に表示されており、コンテンツ全体の幅は、ページ幅の48%になっている
【2-2】
03
「position:absolute;top:16px; left:20px;」と記述。デフォルトでは表示領域の左上が基点になるため、上から16ピクセル、左から20ピクセルの位置に大見出しがレイアウトされる【3-1】【3-2】。
【3-1】
【3-2】
【3-1】【3-2】配置したい要素の親要素に対して「position: relative」を指定すれば、親要素の基点から相対的に配置す
ることが可能。サンプルの場合は何も指定していないので、デフォルト(ページの左上が基点)が適用され
ている
04
コンテンツ領域全体の基本デザインも指定しておく。絶対配置した大見出しは独立した存在になっているため、後続の要素に影響を与えない、まったく別のレイヤー上に表示されていると考えてよいだろう。ウィンドウの幅を狭めてみると、大見出しが記事の上に重なるはずだ。通常の並列的な配置ではなく、前面に表示されているイメージだ(Photoshopなどの画像処理ソフトに搭載されているレイヤーと同様)【4-1】【4-2】。
【4-1】コンテンツ領域内の見出し、本文、区切り線、リンクなどのフォント、カラー(基本デザイン)を指定
【4-2】
05
【5-1】サンプルで使用している背景画像の大きさは800x600ピクセル、データサイズは84KBである
06
【6-1】
【6-2】
【6-1】【6-2】「background-attachment:fixed」(固定配置)を指定し、背景画像をページの左下にロックする
07
【7-1】
【7-2】
【7-1】【7-2】デフォルト表示(左)とページズームで縮小した表示(右)。ブラウザは、Safari 5を使用