申し訳ございません。質問自体こちらであっているかわかりませんが、教えてください。http://success-navi.com/
上記のような背景(両サイドにぼかし?)が入っているような背景にするにはどうすればいいんでしょうか?
当方ドリームウィーバー8を使っております。
素人ですがよろしくお願いします。
No.2
- 回答日時:
画像についてはphotoshop等のグラフィック系ソフトを利用して作成します。
(1) 新規作成から横700px高さ50px程度の大きさで画像を作り始め、塗りつぶしツールで適当な色で塗りつぶします。
(2) photoshopの場合はここで現在の背景レイヤーをレイヤー化します。
(3) 次にカンバスサイズを横幅だけ100px程度左右均等に大きくします。
(4) 最初に塗りつぶしたレイヤーの下に新規でレイヤーを作り、そのレイヤーの左半分程度を選択範囲にします。
(5) グラデーションツールで影を作ります。一色の影であれば、コンテンツの外の背景色と影の色を選びます。
グラデーションツールを使うと、一番最初に塗りつぶした部分の外側にのみ影が表示されるはずです。
(6) (4)~(5)の作業をを同じレイヤーの右側で行います
ここで言っている意味がわからない、or photoshop以外のソフトの場合は、それぞれ解説されているサイトがあると思いますので、そちらで勉強されるのが良いと思います。
CSSやwebの基礎知識に関しては、最低限以下のリンク先のようなで学ばれたほうが良いです。
http://www.tohoho-web.com/www.htm
ご丁寧な説明有難うございました。
私の勉強不足のため、解決はいたしておりませんが、
まずは基礎から勉強していこうと思っております。
有難うございました。
No.1ベストアンサー
- 回答日時:
背景を指定しようとしているページのコンテンツの横幅は固定ですか?
もしも固定なら、まずその横幅分の空白をとり、その両端に影を入れた画像を作ります。
その画像の高さを1pxにして保存しbodyに対してcssで以下の指定をしてください。
body {
background:url(image.gif) repeat-y center 0;
}
image.gifは適宜変更してください。
基本は最初から背景になじむようにして画像を作り、それを繰り返して表示するように指定してあるだけです。
画像の高さは1pxとしましたが、ネット回線は早いが処理速度の遅いブラウザを使っている環境なども考慮し、あまりに長くなるようでしたら適度なサイズにしてやるのが良いと思います。
この回答への補足
ご説明有難うございます。
折角ご説明して頂いたのですが、当方の知識があまりにも低すぎて全部を理解することが出来ませんでした。申し訳ございません。
当方が理解出来ているものとしまして、私が作っているサイトの横幅は700となっており、ご紹介いたしましたサイトの方も700だと思います。
>両端に影を入れた画像を作ります。
とありますが、その画像の作り方さえわかりません。
あまりにもレベルの低い知識しか持ち合わせておらず大変だと思いますが、もう少し簡単に出来る方法、または説明があると大変助かります。
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブラウザ) zoomのバーチャル背景が選べない 4 2022/12/08 12:38
- デザイン 19世紀ロンドンのような背景イラストを探しています。 twitterやpixivに投稿のため、自分の 1 2022/08/31 09:42
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- Visual Basic(VBA) 昨日、質問した件『VBA にて、条件付き書式で背景色を設定しているセルの範囲で、背景色付きのセルをカ 4 2022/04/07 14:39
- 日本語 時間的背景・空間的背景という言い方 2 2022/05/04 15:18
- 一眼レフカメラ SONY5100を使っています。 カメラ初心者です。 人物(モデルさん)などを撮る時 綺麗に撮れる設 3 2023/05/19 22:54
- Photoshop(フォトショップ) 【至急】 ウェブサイトやアプリとかでよく見かける、添付画像のように背景にあるものをぼかしつつ透過する 2 2023/07/17 10:57
- 美術・アート ある背景イラスト画集を探しています。 はじめまして。 以前、ヴィレッジヴァンガードで1度 売られてい 1 2022/11/09 02:22
- 一眼レフカメラ カメラ初心者です。 SONYのフルサイズカメラを購入し、レンズはTAMRONの20-40 F2.8の 5 2023/03/26 22:22
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像とその下にあるテキストの...
-
background-sizeの背景で最小値...
-
background-repeat CSS で切れ...
-
IEでのbackground-size使用につ...
-
ワードプレスで事前定義されたc...
-
背景画像を前面に表示させる方法
-
HP作成 作成した画像を動画の上...
-
背景画像の上に透過GIF背景...
-
画像上に文字を表示するとiPhon...
-
背景画像にロゴを重ねる方法を...
-
background-sizeでcontainする...
-
同じ画像 複数回使用
-
画像の上にテキスト配置で、拡...
-
Safariでのひどいレイアウト崩れ
-
疑似要素で背景画像に指定したS...
-
サイドバーの背景色を項目のな...
-
HTMLで使う「見出し」は英文で...
-
LightBoxの矢印の出し方
-
ページごとに背景画像を変更し...
-
Chat GTPで、12月のカレンダー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
lightbox2で画像を天地左右中央...
-
background-sizeでcontainする...
-
【Webサイト】画像が小さく表示...
-
background-sizeの背景で最小値...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
大至急。webのシングルページを...
-
htmlかcssで背景の白い枠をなく...
-
IMGタグで画像の繰り返し使用は…
-
画像上に文字を表示するとiPhon...
-
同じ画像 複数回使用
-
CSSで背景画像をランダムに表示...
-
画面サイズ変更時のレイアウト...
-
要素の幅をいろんな写真の幅に...
-
Chat GTPで、12月のカレンダー...
-
submitボタンの上に重ねた画像...
-
LightBoxの矢印の出し方
おすすめ情報