• ベストアンサー

HPの背景をグラデーションにしたい

HPの背景を白→灰色→黒といったグラデーションにしたいのですが、どうする方法があるでしょうか? photoshopでそういった画像を作って貼るしかないでしょうか?尚ビルダ12とDreamwaverどっちもあります。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

データ量を軽くしたいのなら、細い画像を作れば良いんですよ。 長辺方向にグラデーションをかけ、短辺を 10px とか(このへん、適当)にすれば、データ量は少なくなります。画像のリピートをわざわざ CSS で禁止するような設定にしてないかぎり、同じ画像が繰り返し適用されます。

seed_twice
質問者

お礼

なるほど縦にグラデーションするなら横はリピートでいいわけですね。ありがとうございます。、

その他の回答 (1)

  • wagero24
  • ベストアンサー率33% (1/3)
回答No.1

画像で張り付けるのが一番手っ取り早いのではないでしょうか? そんなJavaScriptを組めないわけではないですが、組んでいる間に他の事が十分できてしまうと思います。 だから、画像を張り付けてみればどうでしょうか? それとも何か画像を張るのに抵抗があるのでしょうか…… Photoshopや他のソフトで画像ファイルを作ってもいいですが、検索してみると意外にそのような画像ファイルはたくさん出てくるのではないでしょうか。 縦のグラデーションなら少しサイズに気をつけて背景固定を指定したほうがいいかもしれませんよ。 横のグラデーションなら敷き詰めでスクロールしてもおかしくないですが。

seed_twice
質問者

補足

画像を貼ることに対しては抵抗はありません。私が気にしているのは容量ですね、できるだけ軽くしたいですから。 なら背景入れるなといわれそうですが、これは譲れないので・・・ javascriptを作ったら余計重くなりそうですね。画像のほうがよさそうかな?

関連するQ&A

  • photoshopのグラデーションがカクカクになってしまいます

    ウェブサイトの背景画像として、白からグレーへの丸形のグラデーションを作りたいのですが、うまくいきません。 画像が荒いと言いますか、少しずつ色の違う輪が重なったように見えてしまいます。 サイズは横1000pxほど、 微妙なニュアンスを出したいので、色は#ffffffから#eeeeeeに設定しています。 色が近すぎるのでしょうか? グラデーションをより滑らかにするPhotoshopのチュートリアル を参考にしましたが、改善されませんでした。 アドバイスお願いします!

  • グラデーションマップ

    Photoshop CS2 を使っています。 違うバージョンでの使い方でも構いません。 Photoshop グラデーションマップの機能がついていますよね?それで変換前を黒→白にして、変換後を黒→透明(黒0%)にしたいのですが、画像が真っ黒になってしまいます。何かいい方法はありませんか? 説明が下手なので、詳しく聞いて頂ければ改めて補足に書きます。宜しくお願いします。

  • Photoshop 被写体の背景が白くなってしまう。透明にしたい!

    ご存知の方教えて下さい Photoshop、ド素人です。 ある画像の背景を白から透明にして WEBサイトに載せようとしています。 何とか必要な被写体だけを切り取り 背景は透明(白と灰色のチェックのような背景)にしました。 ところが、いざサイトにあげてみると 背景は透明ではなく、白くなっています。 載せたいサイトの背景が、黒なので 四角く白くなっており 「黒の背景+被写体」ではなく 「黒の背景+白の四角+被写体」になっています。 「黒の背景+被写体」にするにはどうしたらいいのでしょうか? 冒頭で説明した「被写体+白と灰色のチェックのような背景」で 保存した画像では駄目なのでしょうか? 色々調べてみたのですが、うまくいきません。 下手な説明で恐縮ですが。ご存知の方教えて下さい。 ちなみに、被写体は自動選択ツールできれいにカットできました。

  • Illustrator10での背景グラデーション

    基本的な質問です 背景の枠をグラデーションにしたいのですが いまいちわかりません 教えてください 始めは黒のグラデーションですが色を変更すると 一面同一色になってしまうのですが・・・

  • 背景色黒で白文字を鮮明にするには

    HPに載せるための画像を作っています。 photoshopで 背景色 黒で 白で文字を作成しています。 白文字が鮮明になりません。 解像度を上げるほかに何か方法はありますでしょうか。 もしくはHP作成ソフトで、黒画像の上に白字で書くのが 妥当なのでしょうか。 よろしくお願い致します。

  • CSSで背景にグラデーション

    お世話になります。 CSSを用いて背景にグラデーションをかけようと苦心しています。 filter:alpha(opacity=100, finishopacity=0, style=1); で、グラデーションはかかるのですが、 そのタグ内の文字までグラデーションがかかってしまいます。 また、この方法ですと、Firefoxでは、グラデーションがかかりません。 Yahooのページ http://www.yahoo.co.jp/ では、背景画像を使わないでグラデーションをかけていると思うのですが、どのようにすればこのようなことができるのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 個人HPの背景について教えて下さい。

    私、個人のHPを作ったのですが…テンプレートを借りてきて作成したHPだったので 自分色のHPにしたくなってきたので、参考にしたいHPを画像添付したので 宜しくお願いします。 質問内容は、画像のように背景をピンク色の素材をおいたとして 白い透過した素材をピンク色の背景に重ねたいのですが うまくいきません。 ホームページビルダーにてピンク色の素材を背景とすると、白い素材を画像でおくと上と下に少し 隙間が開いてしまうんです。 どうしたら上手に出来ますか? ネットで調べたのですが…調べようがなくて困っています。 どうぞ、宜しくお願いします。

  • ページがグラデーションの背景になる

    最近、あるページを表示しているとき、別のタブに移ってから前のタブに戻ると、前のページがグラデーションの背景だけになっていることがよくあります。 下のほうが黄緑色、上のほうが橙色でグラデーションになっている背景画像が敷き詰められているといった感じです。 そのページにあった文字などは消え、背景のみが表示されます。 更新すると元に戻るのですが、なぜこんなことが起きるのでしょうか。 なお、使っているパソコンはWindows7、東芝のdynabook R63、ブラウザはGoogle Chromeです。

  • photoshopである部位だけグラデーション

    photo shopで画像をグラデーションしたいのですが、初心者であるためにできなくて困っています。 加工したい画像というのは白黒のチェックで、そのチェックの黒の部分だけを、全体的に見て、黄色からオレンジのグラデーションしたいのです。 試してみた所、どうしても画像全体(チェックの白黒両方)の上に黄色とオレンジのグラデーションが乗っているだけな感じになりました。 ここで質問をまとめると (1)チェックの黒の部分だけ(つまり白の部分を除いて)をグラデーションにするにはどうしたらよいのか (2)チェックの黒「自体」をグラデーションにするにはどうしたらよいのか の二つです。 良かったら 回答お願いします。

  • 灰色→白のグラデーション画像が不自然に表示されてしまう

    いつからこうなってしまったのかは不明なのですが、 Photoshopで作成した灰色→白のグラデーション画像をプレビューすると #fefefeと#ffffffの境界線が目視でハッキリ判別できる状態となってしまいました。 #fefefeのところまでは明らかな灰色で、#ffffffで真っ白というような状態です。 ディスプレイキャリブレータでガンマ値を2.2にするなどの調整を試みたのですが、解決できませんでした。 使用モニタはCINEMA DISPLAY HDの23インチで、OSは10.4です。 解決方法をご存知の方、よろしくお願いいたします。

    • 締切済み
    • Mac

専門家に質問してみよう