ヘッダー部分とかグリッドレイアウトを飛び出しているように作る方法

ヘッダー部分とかグリッドレイアウトを飛び出しているように作る方法

海外のサイトとかでよく見られるんですが、背景画像がドーンと大きく置いてあり、その上にコンテンツがあるようなサイトがあるかと思います。

代表的なサイトと言えばWeb Designer Wallさんが有名だと思いますが、この用なサイトも背景画像さえ出来ればけっこう簡単に出来ちゃうんで、その組み方を解説したいと思います。

demo page

…ここからが続き

グリッドレイアウトを飛び出しているように作る解説

まず最初にbodyの背景画像やカラーを指定しておきます。

CSS

body	{
	margin:0; padding:0;
	background: #6C8EBC url(image/body.jpg) repeat-x;
	text-align: center;
}

bodyの背景画像やカラーを指定

その上に背景画像やコンテンツをのせていくって感じです。

CSS

#page	{
	background: url(image/page.jpg) no-repeat top center;
	padding: 140px 0 30px;
}

その上に背景画像やコンテンツをのせていく

それ以外に記述されている部分はコンテンツ見栄えを整える為に記述しているだけです。

demo page

Comments

MIYA

MIYA

ありがとうございます!

2009年03月09日 04:07

Y.

Y.

遅くなりました。
すいません…なんとか自力で解決することができました。
これからもサイトの運営頑張って下さい!

2009年03月08日 22:08

MIYA

MIYA

自分の環境化IE6 IE7で確認しましが、SideBarは動いていると思うですが…

2009年03月08日 21:17

Y.

Y.

さっそく使ってみました^。

シンプルに徹したデザインは、
紹介されているサイトとは逆のコンセプトですが、
結構いい感じにできたんじゃないかと思います。

しかし、サイドバーのスクリプトが、
IEで動かなくなってしまいました…。

「PBB SideBar」というスクリプトなのですが、
単体ではIEでも動くため、どうにかして動かしたいと思っています。

もしお時間があれば、少し力をお借りできないでしょうか。

よろしくお願いします。

2009年03月08日 01:01

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article