- ベストアンサー
divに影をつけるとき、画像を繰り返すけど・・・
div枠の後ろに、影をつけるには、高さ２０ｐｘくらいの画像を繰り返して 背景すればよいとありましたが、なんだか画像の２０ｐｘと２０ｐｘの間が切れてるように 見えてしかたありません。ほかのかたのサイトの影はそんな風に見えないのですが、 画像の作り方が問題なのでしょうか。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 画像に影をつける方法について
・・・・・・・・・・・・ この写真は○○です。 画像 ・・・・・・・・・・・・ ↑ 上記のようなレイアウトになっている「画像部分」に影を付けたくて、あるサイトで見つけた下記の文字を加えてました。 <div style="width: 100%; padding-bottom: 10px; filter: shadow(color=#4d4d4d, direction=135);"> <img src= "http://*******" align="left"> この写真は○○です。</div> 画像部分に影が付くようにはなったんですが、画像横の文字「この写真は○○です。」まで影付きになってしまいました。 画像部分だけに影を付けるには、どうしたらよいのでしょうか。教えてください。
- ベストアンサー
- HTML
- 画像に影付画像を背景に設定、影を上手に表現するコツ
ホームページに影付きの画像を使用したく、 下記サイトを参考に作成しました。 All About form「画像を加工せず、複数の画像に「影」を付加」 http://allabout.co.jp/gm/gc/23995/ イラストレーターで影を作り、 フォトショップで画像化しました。 質問したいことは下記（１）～（３）です。 （１） サンプルの画像ですが、 左側の影のみが背景用に使用した画像で 右側がFirefoxで実際に表示した結果です。 左側のピンク色は、影の周りの余白の多さを 見せたかったから付けました。 かなり余白が多い気がします。 それを切り取ろうとしても 影がどこで終わっているのか分からず、 下手に手を出せませんでした。 この余白は気にする必要はないですか？ （２） サンプル画像を見て頂くと、左側＝右側、 とはならず影の形も濃さも変わってしまっています。 ＝にするコツがあれば教えて頂きたいです。 （３） 上記の参考サイト内で 「影の部分は、右側が幅7ピクセル、下側が高さ8ピクセル」 と、正確に寸法を把握しているのですが、 どのようにすれば分かるのでしょうか？ 自分は、1px単位で何度も何度も微調整しましたが、 把握する方法があればとても助かります。 お願いします。 ～～～ 入力したソース ～～～ <style type="text/css"><!-- #shadow{ margin-left: 100px; margin-top: 100px; } #shadow img{ background-image: url("shadow_image.jpg"); background-repeat: no-repeat; background-position: right bottom; padding: 0px 60px 60px 0px; } --></style> <div id="shadow"><img src="sample.jpg" width="600" height="399"></div>
- ベストアンサー
- HTML
- divで作成したボックスに背景画像がうまく適用させられない。余計な余白ができてしまう。
divで作成したボックスに背景画像がうまく適用させられません。余計な余白ができてしまいます。 例えば、以下のサイトの左側のメニュー欄「資料請求・お見積もり」のような枠をボックスに付けたいのです。 http://www.dai-ichi-life.co.jp/examine/search/index.html それには、 <div>○○</div>上用 <div>○○</div>真ん中用 <div>○○</div>下用 のようにボックスを三つに分け、それぞれ上用の背景画像、真ん中用の背景画像、下用の背景画像を適用して作成しました。 しかし、一番上のdivだけ画像を適用すると、必ず下に数ピクセルの余白ができてしまうのです。 .box-top { height: 7px;←画像の高さ width: 200px;←画像の幅 background-image: url(images/r-menu-box-top.jpg); background-repeat: no-repeat; margin: 0px; padding: 0px; } このようにマージンとパディングをゼロにしても数ピクセル余白が下に出ます。 なぜでしょう。
- ベストアンサー
- HTML
- div入れ子の背景画像
【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout"> <div id="menu">メニュー</div> <div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、 上記のCSSだとIEはOKなのですが、foxが表示されません。 メニューidにはデザイン上背景画像は設定できません。 また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。 どうすれば良いでしょうか？ 知恵をお貸しいただけますでしょうか。 宜しくお願い致します。
- ベストアンサー
- HTML
- divで作成したレイアウトに背景画像を付けたいが付けられない
divでレイアウト作り背景画像を入れたいのですが背景画像が思うように適用されません。 以下のようなサイトのように、作成したレイアウトのコンテンツ部分（真ん中白い背景色部分）に背景画像をつけたいのですが、色々やってみたのですが背景画像が適用されません。 参考サイト：http://www.realbit.net/rb_results/index.html 私のソースコードは以下です。 HTML <body> <div id="header"> <p>ヘッダー</p> <p>あああ</p> </div> <div id="container"> <div id="incontainer"> <div id="main"> <p>メイン</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> <div id="leftMenu"> <p>左メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="rightMenu"> <p>右メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="footer"> <p>フッター</p> <p>あああ</p> <p>あああ</p> </div> </body> CSS #header { background-color: #FF3; width: 920px; margin-right: auto; margin-left: auto; } #container { background-color: #F00; width: 920px; margin-right: auto; margin-left: auto; } #incontainer { float: left; width: 720px; } #main { float: right; width: 520px; background-color: #900; } #leftMenu { background-color: #00F; float: left; width: 180px; margin-left: 20px; } #rightMenu { float: right; width: 180px; background-color: #FF9; margin-right: 20px; } #footer { background-color: #F0F; clear: both; width: 920px; margin-right: auto; margin-left: auto; } 参考サイトのようにコンテンツ部分に背景画像を入れたい、私の場合container部分にフォトショップで作成した背景画像をいれたいのですが、まずは実験的に、上記のように背景画像を入れる前に赤い背景色を入れて見ましたが赤い背景が出てきません。背景画像もためしに入れてみましたが適用されません。 なにが間違っているのでしょうか？
- ベストアンサー
- HTML
- firefoxで見るとdiv背景画像がスクロールで消えてしまいます
http://www.geocities.jp/testac2007/ bodyに「top_bg.gif」という背景画像指定をした上で更にdivを重ね、そのdiv内に「side_860.gif」という背景画像を指定しています。 ieだと意図した通りに表示されるのですが、 FirefoxやNetscapeで確認すると、表示されているページより下部のスクロール以下の背景画像が表示されません。 何とか同症状についてネットで検索し試行錯誤してみたのですが、解決に至りませんでしたのでこちらでヘルプさせていただきました。皆さんのお知恵を拝借いただきたいです。 ■■■HTMLの概要■■■ <body> <div id="side_bg"> <div id="outline"> <div id="A01">○○○</div> <div id="A02"> <div class="A02_left">○○○</div> <div class="A02_right">○○○</div> <br class="c-both"> </div> <div id="B01">○○○</div> </div> </div> </body> ■■■CSSの概要■■■ body { margin:0px auto; background-image:url(images/top_bg.gif); } #side_bg { width:860px; height:100%; margin:0 auto; background:#ffffff url(images/side_860.gif); overflow:visible; } #outline { width:830px; margin:0 auto; background-color:#FFFFFF; } .c-both { clear:both;} #A01{ width:830px; margin:15px 0px 4px 0px; overflow: auto; } #A02{ width:830px; margin:0px 0px 4px 0px; overflow: auto; } .A02_left{ width:304px; float:left; } .A02_right{ width:526px; float:right; margin-top:4px; } #B01{ width:730px; margin:20px 50px; }
- ベストアンサー
- CSS
- [携帯]divで指定した背景色から画像がはみ出す。
携帯用サイトを制作しているのですが、 <div style="clear:both;background-color:red;"> <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" /> <br />こんにちは </div> <div style="clear:both;～ と画像の横に文字が回りこんだとき、背景色が文字の部分にしかつかず、画像がはみ出した状態になってしまいます。 今回は1*1の透明なgif画像を使い、 <div style="clear:both;background-color:red;"> <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" /> <br />こんにちは <div clear="all" style="clear:both;"> <img src="./images/space.gif"> </div> </div> <div style="clear:both;～ とすることで解消できたのですが、 参考にしていたサイトではどうやら画像を使わずに背景内に収めているようです。 後学のために、画像を使わず、背景から画像をはみ出さないように見せる方法を教えてください。よろしくお願いします。 docomoで動作確認しています。
- 締切済み
- HTML
- <div>レイヤー３層構造の、背景色表示についての疑問。
まずは下記 HTML を見て下さい。 <body> <div style=背景:赤 幅：100px> <!--大枠（１階）開始タグ--> <div style=背景:青 幅：100px> <!--中枠上（２階）開始タグ--> <div style=背景:緑 幅：40px> <!--小枠左（３階）開始タグ--> スタイル：float:left </div> <!--小枠左（３階）終了タグ--> <div style=背景:黄 幅：40px> <!--小枠右（３階）開始タグ--> スタイル：float:right </div> <!--小枠右（３階）終了タグ--> </div> <!--中枠上（２階）終了タグ--> <div style=背景:紫 幅：100px> <!--中枠上（２階）開始タグ--> clear:both </div> <!--中枠下（２階）終了タグ--> </div> <!--大枠（１階）終了タグ--> </body> 奥が１階で、手前が３階とします。 ２階には、上下に<div>が並び、上側の<div>にはさらに2つの<div>があります。 ３階では、左と右にfloatで分けて<div>を配置しています。 左の<div>幅40pxと右の<div>幅40pxを足した幅80pxは、１階と２階の幅100pxと比べると、 20px小さいので、左と右の間には、隙間ができます。 そこで問題です。 この隙間の色は何色でしょうか。 私は２階の色が出ると思うのですが、１階の色が出てしまうのです。 その原因はなんでしょうか。 floatが関係しているのでしょうか。 私の希望としては、左右の隙間の色は、２階上側の<div>背景色である青色であってほしいのですが、実際には１階背景色である赤が出てしまいます。
- ベストアンサー
- HTML
- 影付き(透過)ロゴタイトルの表示ないし背景との同調について
影付き(透過)ロゴタイトルの表示ないし背景との同調について 只今HPを作成しているのですが、今回背景にボーダーを使い、その上にタイトルロゴを表示させようと思っています。デザイン的にそのロゴに影を付け、初めは.gifで透過保存させようと思ったのですが、荒々しい風に出来てしまいました。pngでは美しく出来たのですが、pngはネットブラウザ環境によっては表示されないと聞いたのであまり使いたくなくて・・・。 そこで今度はそのロゴにあらかじめボーダー画像を加えて、cssで上手に背景と溶け込ませて表示させようと思ったのですが、上手に表示出来ません。 ちなみにそのタイトルを表示させる部分は #wrapper{ margin:0px; padding: 0px; text-align: center; } #contents{ width: 880px; margin-left:auto; margin-right:auto; } で内包してあります。html上で簡単に書くと ・ ・ ・ <body> <div id="wrapper"> <div id="contents"> ここに画像タグ </div> </div> </body> といった感じです。 背景は横一列で固定するようにしています。 body{ font-size: 13px; line-height:160%; background-image: url(img/back.gif); background-repeat:repeat-x; background-position: 0% 0%; } こんな感じです。 CSSでこの問題を解決するか、それともgifで上手に透過画像を作るのか、はたまたpng保存で良いのか、分かりやすく解説して下さる方、宜しくお願いします。分かりにくーーい質問で申し訳ありません・・・。
- ベストアンサー
- CSS
- photoshop7.0 両サイドが影のweb用背景画像をつくりたい
中央寄せのホームページで、両サイドが少し影になっていて浮かび上がっているように見えるものがあると思うのですが、そういうものを作りたいです。 ソースなどから、横に細長い背景画像を繰り返し並べているのだということは分かりました。 そこで、photoshopでその背景画像を作る手順を教えていただきたくて質問させていただいています。 高さ5px×幅780pxの画像の両サイド10px分くらいをグレーから透明になるようなグラデーションをおく手順を作り方、保存方法など含めて分かるかたいらっしゃったらアドバイスをお願いいたします。 http://www.unouplus.com/uraunou/ こちらのサイトさんの右側みたいな感じで左右対称にしたいです。
- ベストアンサー
- グラフィックソフト
お礼
やってみます。どうもありがとうございました。