質問です。

WEB制作について
http://wdt.pekori.jp/
↑このサイトのようにページの周りに影を入れるような場合、これは画像処理でつくているのでしょうか?それともHTMLやCSSの設定でできるものなんでしょうか?
みなさんのおこなっているやり方を教えてください。
宜しくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/02/10 10:47:07
  • 終了:2007/02/17 10:50:02

回答(3件)

id:dungeon-master No.1

dungeon-master回答回数571ベストアンサー獲得回数402007/02/10 11:11:03

ポイント27pt

HTMLとCSSでできます。

このサイトの場合は、HTMLの最初の方でwdt.cssという別途に用意されたCSS定義ファイルを取り込んでいます。

http://wdt.pekori.jp/css/wdt.css

そのCSS定義のなかで、BODYのBackground画像としてbody_bg.gif(高さ2px、幅789px)を指定しています。

http://wdt.pekori.jp/img/body_bg.gif

あとは、その画像の枠や影の部分にコンテンツがかぶさらないように、CSSでマージンなどを調整します。

id:sudayosiaki No.2

sudayosiaki回答回数204ベストアンサー獲得回数62007/02/10 11:41:28

ポイント27pt

http://wdt.pekori.jp/template/box/

同ページのtemplates→飾り枠ですね。

DLしてhtmlファイルのソースの

<style type="text/css">から</style>迄を

Head内に貼り付ければOKです。外部ファイル化もできます。

http://hp.vector.co.jp/authors/VA013937/cssref/usage3.html

id:vegah No.3

vegah回答回数496ベストアンサー獲得回数22007/02/10 12:27:34

ポイント26pt

こちらのサイトの背景画像を右クリックでダウンロードしてみたところ、横に細長い画像になっていました。

そして、その左右の端から1ミリくらいのところに影に見えるような部分があり、その画像を縦方向に繰り返して表示する事で表現していました。

その背景画像をこのサイトではスタイルシートで下のように設定しています。

background: #F7F7F9 url(../img/body_bg.gif) 50% 0% repeat-y;

背景色 #F7F7F9

背景画像のURL ../img/body_bg.gif

画像の位置 横方向50% 縦方向 0%

繰り返し 垂直方法のみ

私も同じような方法で行っています。

スタイルシートについて下のサイトでいろいろ掲載しています。

ご参考まで

http://www.scollabo.com/banban/lectur/style.html

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません