ＨＰ背景のグラデの作り方

質問

こんにちわ教えてください。

今ドリームウィーバーcs3でＨＰを作成しています。
巷のＨＰの背景にあるようなグラデを使いたいのですが、
どのようにすればよいのでしょうか？
当初、グラデのgifファイルなどを背景にリピート表示すれば
よいのだと思っていましたが、それだとＨＰが重くなるので
ｊａｖａで表示させるのが一般的だと聞いたことがあります。

しかし残念ながら私はｊａｖａの使い方がわかりません。。。（－－；
gifファイルのリピートはよろしくないのでしょうか。
（ドリームウィーバーのビヘイビアなどでマウスオーバー時の
　アイコン変更の仕方は教えてもらったので
　もしドリームウィーバー上で簡単にできるのであれば教えていただきたいです）

また、少しネットで検索してみましたが、
ＣＳＳでも作れる、的なことが書いてあったのですが、
私が見たＨＰの内容は数年前のｕｐでして、
今のＩＥのｖｅｒ．やドリームウィーバーではどんな風に作っているのかなと思いまして。

http://www.pola.co.jp/index.html?cid=ov6040
http://www.verma-beauty.com/
こんなカンジで上から下へのグラデや、

http://www.aura-soma-tess.com/
こんなふうにメインコンテンツの左右に淡いグラデを効かせたいのですが。。

どうぞよろしくお願いいたします。

回答No.1

SAYKA · ベストアンサー

いや、画像だよ。
ただ、1pxの幅でグラデの高さを作ってリピート、だと重くなるんだよ。
(1pxを反復描画するのに時間がかかる)
これは、在る程度の大きさを持つ画像にさいしょからしておいてそれをリピートするという手法にすると　そんなに重くなくなるよ。
ただし、調子に乗って画像をでかくしすぎると、今度はそっちで重くなるけどね。

お礼

ご返事ありがとうございます。

エーーーッ　そ、そうだったんですか！（＾＾；
ち、ちなみにグラデの幅ってどんなもんがいいんでしょう。。。
今使おうと思ってる、ネットの無料素材で落とした素材の幅が、
目で見て１センチくらいの幅だったんですが、
２～３００ピクセルくらいの幅の方がリピート少なくて負荷が少ないですか？

回答No.3

tenderfeel

今の主流はCSSのbackgroundプロパティによる指定です。

質問に上がってたポーラ（http://www.pola.co.jp/）では
background:#F1F3F5 url(../images/bg.gif) repeat-x scroll 0 0;
という指定になっています。repeat-xが横方向への指定です。

http://www.aura-soma-tess.com/　
これは、左右にグラデーション入れた画像をCSSで縦方向にリピートすれば可能です。
（上記サイトはテーブルの左右に影入れてるだけです）
DreamweaverだとCSSの定義の「背景」等で指定できます。

1px幅の画像を反復描画させると重くなる、っていうのは昔よく言われてましたが
市販されているPCの基本スペックが上がっている現在では、殆ど差は感じられなと思います。
（上のポーラのサイトが1pxの画像をリピートさせています）
重いと感じるのはスペックの低いPC使っている人くらいでしょう。
なので気にしなくても大丈夫だと思いますよ。

お礼

ご返事ありがとうございました！
お礼が遅くなりましてすみません。

あーー、そうなんですね。なんだ、みんなリピしてたのか。。。
はい、Dreamweaverでの設定方法はわかります。

素人だと、ＨＰ作成をナントカカントカ頑張っても、
こういうところの知識がなくて困り者です（＾＾；
助かりました。ありがとうございました！

回答No.2

SAYKA

グラデの高さによるんじゃないのかな。
見た素材の1cmというのはちょっと小さいけれど使い回しはしやすい幅だと思うよ。
画像作成のソフトや幾つかのツールは何kB読むのにどの回線だとどのくらい時間がかかるのかというのを簡易表示したり調べたりできるからそこから大きくなりすぎない画像にしたら良いんじゃないかな。

縦もあまり無いようなら1回じゃなくて数回の繰り返しにしないと遅くなるっていうオチになるから、幾つかのサイトを見て、自分でどう感じるか、で調整して良いと思うよ。

お礼

重ねてのご返事、ありがとうございます。
（ご返事が遅くなりましてすみませんーー；；；）

そうですね、やっぱり色々自分でも調べたほうが良さそうですね。
ご指摘のツールも調べてみます。
ＨＰで使う画像も、小さくしすぎると画質も落ちるし、と迷っていたので。。。

ありがとうございました！（＾＾