人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: office-athena
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS HTML Web サイト 制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● dungeon-master
●27ポイント

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でマージンなどを調整します。


2 ● sudayosiaki
●27ポイント

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


3 ● vegah
●26ポイント

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

そして、その左右の端から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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ