ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
QNo.3956615 画像に影をつける方法について
質問者：_burari_ ・・・・・・・・・・・・
　　　　　　　　　　　　この写真は○○です。
　　　画像　
　　　　　
・・・・・・・・・・・・

　↑　上記のようなレイアウトになっている「画像部分」に影を付けたくて、あるサイトで見つけた下記の文字を加えてました。

<div style="width: 100%; padding-bottom: 10px; filter: shadow(color=#4d4d4d, direction=135);">
<img src= "​http://*******"​ align="left">　この写真は○○です。</div>

画像部分に影が付くようにはなったんですが、画像横の文字「この写真は○○です。」まで影付きになってしまいました。
画像部分だけに影を付けるには、どうしたらよいのでしょうか。教えてください。
困り度：
  • 困っています
質問投稿日時：
08/04/18 10:21
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答良回答20pt
ANo.2 画像と文字を囲んでいるdivにstyleを適用しているということは、styleを適用したdiv内にある画像・文字に適用されてしまいます。

解決の方法として、divを3つ用意する。1つ目は画像と文字のdivを囲う。2つ目と3つ目は1つ目のdivの中にfloatなどを利用して画像と文字を別けて配置するのが良いと思います。

【html例】
<div style="width:350px; margin:0; padding;0:">
<div style="float:left; width:198px; padding-bottom:10px; filter:shadow(color=#4d4d4d, direction=135);">
<img src="Sample.jpg" width="180" height="180" alt="IMG" />
</div>
<div style="float:right; width:150px;">
この写真は○○です。
</div>
</div>
【表示例】
​http://www.linkheart.net/sample/​

この様にすれば良いかと思います。html例は画像の横幅が180pxだった場合です。必要に応じて変更すれば問題ないと思います。
回答者：CyberDenx2
種類：回答
どんな人：経験者
自信：参考意見
回答日時：
08/04/18 12:28
この回答へのお礼回答ありがとうございました。
また、表示例までお作りいただき、お手数をお掛けしました。
画像だけへの影を付けることができました！

全くの素人なもので理屈が分かっていないものですから、画像サイズを変更したとき、幾つか出てくるpx数の「どの数」を「どう変える」といいのか分からず、スッチャカ・メッチャカになりましたが、何とか頭の中を整理することができました（できたように思います）。
ありがとうございました。

回答
ANo.1 直接画像に、もしくは画像だけにスタイルを適用します。
具体的には、以下のいずれかでどうでしょう。

<div>
<img src= "​http://*******"​ align="left"
style="width: 100%; padding-bottom: 10px;
filter:shadow(color=#4d4d4d, direction=135);">
この写真は○○です。
</div>

もしくは

<div>
<span style="width: 100%; padding-bottom: 10px;
filter: shadow(color=#4d4d4d, direction=135);">
<img src= "​http://*******"​ align="left">
</span>
この写真は○○です。
</div>
回答者：comeacross
種類：回答
どんな人：経験者
自信：自信あり
回答日時：
08/04/18 10:27
この回答への補足回答ありがとうございます。
全くの素人なもので貼り付け方が悪かったのか、両方とも、影を付けることができませんでした。
そして、１つ目の方では、画像が100％表示になってしまいました。
２つ目の方では、文字の位置が画像の右側ではなく、下段に表示されてしまいました。
この回答へのお礼この回答にお礼をつける(質問者のみ)
 
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ