画像に影をつける方法について

質問

・・・・・・・・・・・・
　　　　　　　　　　　　この写真は○○です。
　　　画像　

・・・・・・・・・・・・

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

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

画像部分に影が付くようにはなったんですが、画像横の文字「この写真は○○です。」まで影付きになってしまいました。
画像部分だけに影を付けるには、どうしたらよいのでしょうか。教えてください。

回答No.2

CyberDenx2 · ベストアンサー

画像と文字を囲んでいる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だった場合です。必要に応じて変更すれば問題ないと思います。

お礼

回答ありがとうございました。
また、表示例までお作りいただき、お手数をお掛けしました。
画像だけへの影を付けることができました！

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

回答No.1

comeacross

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

<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>

補足

回答ありがとうございます。
全くの素人なもので貼り付け方が悪かったのか、両方とも、影を付けることができませんでした。
そして、１つ目の方では、画像が100％表示になってしまいました。
２つ目の方では、文字の位置が画像の右側ではなく、下段に表示されてしまいました。