CSSで画像に影をつける（ドロップシャドウ）
CSSを利用して画像に影をつける（ドロップシャドウ）カスタマイズです。ご質問を頂いたのでこちらのエントリーで紹介致します。下のスクリーンショットはドロップシャドウ完成例です。
仕組みは、ドロップシャドウ用の画像を、img タグを括る別のタグの背景画像として指定し、img タグの画像をずらして表示することでドロップシャドウの効果を出すようになっています。
参考にさせて頂いたのは下記のサイトです。ありがとうございました。
- 1976design.com：Easy CSS drop shadows
- A List Apart：CSS Drop Shadows
- nlog(n)：アップロードした画像に影をつけるには
- POCHIKING*：画像に自動的に影をつけてテキストを回り込ませる
- 今日の覚え書き：cssの設定で自動的に画像に影を付ける
- 花と写真とblogと。：画像に影をつけてみる。
最初の1976design.com等で図を用いて解説されているので、仕組みがお分かりになるのではないでしょうか。
１．画像のHTML記述方法
下記のように img 要素を span 要素で括り、class 属性 "shadow" を付与します。span 要素の代わりに div 要素でも構いませんが、インライン要素の方が色々と都合がいいかも？と思い、ここでは span 要素で括ってみました。p 要素でもOKです。
<span class="shadow"><img src="hogehoge.jpg" alt="hogehoge" /></span>２．ドロップシャドウ用背景画像のダウンロード
当サイトでは用意しておりませんのでPOCHIKING*：画像に自動的に影をつけてテキストを回り込ませるからダウンロードしてください。ダウンロードしたら任意のディレクトリ（FC2ブログは固定ですね）へアップロードしてください。
３．スタイルシートの追加
スタイルシートに下記の設定を追加します。色々な方法があるようですので他のサイトの内容もお試しください。
.shadow {
background: url(背景画像のパス) right bottom;
float: left; /* 回り込み制御 */
}
.shadow img {
position: relative;
left: -5px; /* 画像を左へ移動 */
top: -5px; /* 画像を上へ移動 */
padding: 5px; /* 画像枠 */
background: #ffffe0; /* paddingを設定した場合の背景色 */
border: 1px solid #999999; /* 画像の枠線 */
}背景画像のパスは、２項でアップロードしたドロップシャドウ用背景画像のパスまたはURLを指定してください。
表示については Windows 2000/XP+IE/Firefox/Operaで確認しております。なお画像枠のpaddingについて、当サイトではIEでは正常に表示されておりませんので予めご了承ください（試験サイトで作ったサンプルでは等しく表示されましたので、CSSの別の設定と干渉しているかもしれません）。IEで画像枠を表示する場合は標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示するを参照ください。
４．その他
いろいろ試していて気がついた点をいくつか。
- div で括るときは img タグの間に改行がない方が良いみたいです。
- やや上・左よりになるので、位置補正のため下記のように magrin プロパティを .shadow セレクタに設定すると良いでしょう。値は試しながら修正してください。
.shadow {
margin: 10px 0 0 5px;
background: url(背景画像のパス) right bottom;
float: left; /* 回り込み制御 */
}2006.03.15 追記
IEで画像枠を表示する場合の記述を追加しました。
- YouTube動画にキャプションをつけてテキストを回り込ませる方法
- 画像を下揃えにしてテキストを回り込ませる方法
- style要素にCSSの擬似要素は記述可能か？
- position:relativeを設定すると他の要素がずれる場合の対処
- CSSでタブ切り替えする方法
- :target擬似クラスのまとめ
- CSSでヘッダを固定したスクロールテーブルを作る方法
- レスポンシブウェブデザインで画像を縮小する方法
- disabledなボタンのhoverのスタイルを無効にする方法
- HTML要素を別の要素を基点にしてCSSで絶対配置する方法
- :not擬似クラスでCSS3のサポートをチェックする方法
- :checked擬似クラスでチェックボックスに連動して要素を表示させる方法
- ol要素の入れ子で親の番号を子に割り当てる方法
- チェックボックスやラジオボタンを大きくする方法
- CSSで中央に配置する方法
≫ [web]書影か、赤い絵良し（回文） from Tres tristes tigres...
書影には赤い絵が良いよ、目立つから。 小粋空間: CSSで画像に影をつける（ドロップシャドウ）を参考に、amazletの書影に影を付けてみた。見た目がそん... [続きを読む]
≫ エントリー中の画像に影をつける from 暇人STRのブログ
小粋空間さんのこちらのエントリーを参考に、エントリー中の画像に影をつけるようにしてみました。 あらかじめ用意しておいた影... [続きを読む]
≫ MovableType：エントリーのサムネイル画像に自動的にドロップシャドウをつける from DayByDay
MovableTypeでエントリーのサムネイル画像に、自動的にドロップシャドウをつける。 [続きを読む]
≫ [CSS] XML宣言を削除しないでIEでも画像に写真枠とドロップシャドウを表示させる from pastelmilk
CSSで画像に本物の写真のように枠とドロップシャドウを付ける CSSで画像に本物... [続きを読む]
≫ JavaScriptで作るシャドー効果 from Open MagicVox.net
グロー効果に引き続き、 HTML 要素に影を落としたような視覚効果であるシャドー効果(drop shadow effect) を付与するための Java... [続きを読む]
≫ ドロップシャドウ from motorpsycle
画像を使わずにドロップシャドウを付けるCSSテクニックを試してみようかと。 よく、サムネイル画像なんかにドロップシャドウが付いていたりしますが、元の画... [続きを読む]
≫ 2月14日のアップデート情報（.moflogの） from .moflog
日頃は『.moflog』をご愛顧いただき誠にありがとうございます。 2月12日に行われたアップデ... [続きを読む]
≫ flickr badgeをオシャレにカスタマイズ from TODOROKI
以前はflickr badgeを表示させるためにWP Flickr DHTML Badgeというプラグインを使用していました。
flickrで公式配布され... [続きを読む]
≫ CSSで画像にドロップシャドウをつける from 日刊にしこり－埼玉版－
小粋空間
画像にドロップシャドー(影)を付ける方法を紹介いたします。
元ネタの小粋空間さんは下記のサイトを参考になさったようです。
目を通しておくと... [続きを読む]
≫ スタイルシートで画像に影をつける from 社労士@DIARY
スタイルシートを使って画像に影をつけるカスタマイズ。仕組みは影（ドロップシャドウ）用の画像をimgタグで括る別のタグの背景画像として指定して、img... [続きを読む]
先日のご質問させて頂いておりました件、早速解説して頂きありがとございます。いつもながら感謝しております。また、暇を見てはカスタマイズにチャレンジしたいと思います。後、テンプレート（３カラムリキッドレイアウト）の不具合の件もお手数おかけしますが宜しくお願いします。詳細につきましては、MT3.2テンプレートのコメント欄にご質問させて頂いております。忙しいのに本当にすみません。
＞panserさん
こんばんは。
コメントありがとうございます。
ご質問の件につきましては追って回答させて頂きますのでお待ちください。
はじめまして。。
画像に影をつけたいのですが、初心者なためやり方がわかりません(泣)。。
つけたいのは、タイトルの画像で
#banner {
font-family: cursive;
color:#8ada43;
background-color:#c6f8a1;
text-align: left;
padding: 18px;
height: 465px;
widht: 200px;
background-image: url(http://sacchikosodate.cocolog-nifty.com/photos/003/green.JPG);
width: 465px;
height: 220px;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top left;
}
このようになってるんですが、何度やっても出来ませんでした。。
よろしければ教えて下さいm(__)m
はじめまして。
小粋空間様のサイトを参考に、ドロップシャドウ化とサイドバーメニューの折りたたみを行わせていただきました。
これからもいろいろと参考にさせていただきます。
ありがとうございました。
＞sacchiさん
こんばんは。
ご利用ありがとうございます。
遅くなってすいません。サンプルを作りましたのでこちらを参考にして頂けますでしょうか。
HTMLソース（index.html）・スタイルシート（styles.css）・ドロップシャドウ用の画像（shadow_001.gif）がありますので、それぞれ表示（またはダウンロード）して、差分等をご確認ください。
HTMLはバナー部分のタグを若干変更し、スタイルシートは前半に修正を加えたものを追加して、不要になったものは削除しています（スタイルシートはそのままお使いになっても良いと思います）。
ご不明な点がございましたらご連絡ください。
以上です。
それではどうぞよろしくお願い致します。
＞STRさん
はじめまして。
ご利用＆ご連絡ありがとうございます。
またのお越しをお待ち申し上げます。
ドロップシャドウ参考にさせていただきました。
FireFox では写真に白い枠がつくのですが、IEでは付かないですよね。これは想定したとおりなのでしょうか？
＞naoyaさん
こんばんは。
記事参照ありがとうございます。
ご質問の件ですが想定外でしたので、調べて標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示するにまとめてみました。
それではどうぞよろしくお願い致します。
こんにちは!!やっと出来ました。。理解の悪い私。。（T-T）
料理版のブログを作ったのでそちらで使わせていただいてます(^0^ゞ
お手数おかけしてすみませんでしたm(__)mありがとうございました!!
＞sacchiさん
こんにちは。
ご連絡ありがとうございました。
設定お疲れ様でした。
ではでは！
度々すいません＾＾；
今度はこちらの影をつけるに挑戦したのですが、
すごいずれかたをしてしまいました。
投稿者情報も上にあがっている状態になってしまいました。（エントリー部分分かりやすいようにそのままにしてあります。）
お忙しいところ本当にすいません。教えていただけたら幸いです。
＞konさん
こんばんは。
ご質問の件ですが、スタイルシートの下記の部分に青色のプロパティを追加してみてください。
/* 投稿者 */ .entry-footer { margin: 10px 0 0 0; border-top: 1px dotted #cccccc; text-align: right; color: #666666; font-size: 9px; clear: both; }
以上です。
それではどうぞよろしくお願い致します。
こんにちは、はじめまして。
ココログで初心者向けにカスタマイズ方法を説明するブログを運営しています。
（私も初心者レベルなのでおこがましい話なのですが^^;）
今回、こちらの記事を全面的に参考にしてココログにて処理する場合の記事を書かせて頂きました。
ありがとうございました。
こちらへのリンクはもちろん記事中に明記しましたが、CSSタグなどそのままコピーして掲載した部分もありますのでもし何か不都合があれば遠慮なくご連絡下さい。対処させて頂きます。
また参考にさせていただくと思います。
その際もどうぞ宜しくお願いいたします。
＞takoさん
はじめまして。
記事参照＆ご連絡くださりありがとうございました。
それでは今後ともどうぞよろしくお願い致します。
こんばんは。
はじめまして、ゆずと申します。
お門違いかもしれませんが、貴サイトのようにホームページ全体に立体感（ドロップシャドウ？）を出すにもこの方法でできるのでしょうか。
ここ数ヶ月悩んでいるのですが、貴サイトなら的確なお答えをいただけるような気がして、図々しくもコメントさせていただきました。
ぜひ教えて下さい。
＞ゆずさん
こんばんは。
このブログでカスタマイズしている内容は少しずつ公開していく予定です。
現在鋭意作成中ですのでお待ちください。
はじめまして。
素敵なテンプレートをお借りしました。ありがとうございます！
画像を回り込むように（画像の左に文字）したいのですが、アフィリエイトリンクの場合タグをいじれないのでスタイルシートで設定できれば…と思います。
色々検索してみたのですがどれもうまくいきませんでした。
どこにどのように書き足せば可能になりますか？
よろしくお願い致します。
（アフィリエイトを含むサイトですので宣伝になるといけないのでURLは書かずにおきます…）
＞xcoxcoさん
こんばんは。
ご質問の件ですが、遠慮なさらずにURLをご連絡ください（元ネタがないと実験できませんので）。またドロップシャドウの記事へのコメントですが、ドロップシャドウは不要でよろしいですね。
以上です。
それではよろしくお願い致します。
こんばんは。
返信ありがとうございます。
あれから少しまた考えて、ブログをいじっていたらたHTMLで書ける機能がついていました。
すぐにこちらへと書き込みに来たのですが、コメントの書き込みができませんでした…
これからも色々参考にさせて頂きます。
ありがとうございました。
Yujiroさん、
他にもいくつか質問させて頂いておりますが、エントリー内の画像に影を付ける方法を試しているのですが、上手く行きません。上記手順の1-4を試した積もりですが、上手く行きません。あと、後方互換モードのところの下りがあまり理解できないのですが、具体的にはどうすれば良いのでしょうか？
＞kunioさん
こんばんは。
ご質問の件ですが、下記の修正を行ってください。
１．background プロパティの "url" と "(" の間の半角空白を取り除いてください。
.shadow {
margin: 10px 0 0 5px;
background: url (http://kunio.net/blog/shadow.gif) right bottom;２．上記のセレクタに、サンプル通り、float プロパティを付与してください。
３．２項の修正を行うと後方の画像が右に回りこむため、p タグの要素セレクタに青色のプロパティ（回り込み解除）を付与する手があります。
p {
margin-top: 15px;
margin-bottom: 15px;
clear: both;
}４．IEで黄色い枠を表示させたい場合は、テンプレート1行目の
<?xml ??>を削除してください。
カスタマイズされると疑問や不具合が色々発生すると思いますが、まずはご自身でもできる限り解析くださいますよう、よろしくお願い致します。
以上です。
それではよろしくお願い致します。
いつもお世話になります。そしてまたまた質問デス。
影付けは問題なく出来ているのですが、例えばトップページの最下段にエントリーが位置した場合のみ、影が大きくズレてしまうという現象に出会します。Ｆｉｒｅｆｏｘでは問題ないのですが、ＩＥ（Ｓｌｅｉｐｎｉｒ）ではズレてしまいます。また、個別エントリーでも微妙に影＆写真の位置がズレていたりします。最下段の時のみ・・・ということと、影がズレるタイミングを見ていると、ｆｏｏｔｅｒとの関係があるような気もするのですが・・・。スタイルシートの設定を変えてみたものの、解決まで至っておりません。
お忙しい中恐縮ですが、思い当たる節、アドバイス等いただけると幸いです。
＞toycozyさん
こんばんは。
ご質問の件につきまして、各ブラウザで確認していますが、こちらでは不具合が確認できません。
不具合が確認できるページのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。
: December 9, 2007 12:39 AM早々の御返事有り難うございます。
写真付きのテストエントリーを追加してみました。（http://trashnote.com/）
スタイルシートをいろいろと弄ってみましたが、謎のままデス。
御手数をお掛けしますがアドバイスよろしく御願い致します。
＞toycozyさん
こんにちは。
こちらで、IE6/IE7/Firefox2でトップページを閲覧した結果をまとめたものを
http://www.koikikukan.com/images/trashnote.png
にアップロードしました。
「ズレテスト。」が最下段のもの、「世の中…」は上部にあるエントリーです。
それで、一番左のIE6の画像のズレは見分けることができておりません（ブラウザ間では違いがあります）ので、toycozy さんのご指摘の部分がこの中に含まれているようでしたら再度ご連絡頂けますでしょうか。
それではよろしくお願い致します。
: December 10, 2007 12:55 PMコメントがエラーになったようなので再度書かせていただきます。重複してましたら削除願います。
この度は大変な御手数をお掛けし申し訳ありません。
yujiroさんのキャプチャしていただいた画像を見る限り全く問題ないようなので、当方の環境固有の問題かもしれません。最下段に位置した場合のみ、IEで見ると“http://trashnote.com/images/zure-ie-1.jpg”のような大きく影がズレた状態になります。ブラウザ間の見え方の違いは、全く許容範囲だと思います。恐らくスタイルシート、もしくはブラウザの設定をどこかで間違っているような気がしてきました(汗)。
もう少し検証してみます。貴重な御時間を割いていただいて有り難うございました。
＞toycozyさん
こんにちは。
ご連絡ありがとうございます。
ちなみに、複数のPCで拝見させて頂いたのですが、どれも画像と同じ表示でした。
ただ、テンプレートの問題ではないとも言い切れないので、もし何か分かりましたらご連絡致します。
ではでは！
: December 11, 2007 11:54 AMいつもお世話になっております。
わかりました！“はてなスター”の設置というカスタマイズの際、その“はてなスター”をspanで設定していたのが、影付けのspanと干渉していたようです。・・・と書きましたが、単に当方がspan,div,p,dd,dt・・・等の違いを明確に理解していなかった為の初歩的なミスだと思われます(汗)。御手数をお掛けし申し訳ありませんでした。ただ、最下段だけにその現象が現れるというのがイマヒトツ原因が・・・？？？・・・なのですが、spanだから・・・とかいうことでしょうか・・。いずれにしてもお騒がせしてスミマセンでした。
＞toycozyさん
こんにちは。
ご連絡ありがとうございました。
無事に解決されたようで良かったです。
ちなみに、IE6 は span 関係のマークアップ誤りに弱いようです。
ではでは！
: December 12, 2007 11:24 AMこんばんは、初めまして。
cssで影を付けられるとのことで、早速試してみようと思いました。
とりあえず記載されている通りやりましたら表示する事ができました。
しかし自分なりに色々やってみたのですがどうしても満足の結果が得られず、途方にくれてしまいましたので、お暇があれば教えてもらいたい事があります。
中央揃え(center化)したいのですが、floatをcenterにするとどうしても崩れてしまいます。
ちなみにleftはOKで、rightも大丈夫でしたがcenterだけどうにもダメでした。
span、div、pで試してみましたが多少の変化があるもののどれもうまく表示する事ができませんでした。
ちなみにこれはFireFox3.5の場合で、IE6の場合は上記の方法で理想的な表示をしてくれました。
もしもコレといった原因がありましたら、お答えをもらえるとうれしいです。
＞ベンジャ銀地さん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、floatには center という値はありませんので、センタリングしたい画像のimg要素をdiv 要素で括って、そのdiv要素に
text-align:center;
margin: 0 auto;
というプロパティを与えてみてください（動作まで確認していないので正常に動作しなかったらすいません）。
それではよろしくお願い致します。
: December 1, 2009 12:28 AMこんばんは。
お返事ありがとうございます。
試してみたのですが、やはりcenterにはなってくれませんでした。
floatはcenterできないのですね。
画像をdivで括って要素をいれてもfloatが優先されるようでした。
どうやら仕様？で無理のようですので、諦めたいと思います。
お忙しい中わざわざお答えありがとうございました。
＞ベンジャ銀地さん
こんばんは。
「ドロップシャドウつきの画像をセンタリングする」を投稿しましたので参照ください。
ではでは。
: December 9, 2009 2:09 AM参考になります！ありがとうございます！
yujiro様、こんにちわ。
久しぶりにBlogに手をつけたのですが、しょっぱなから凹みっぱなしです。
Blogに表示されているキャプチャ画像(.jpg)なのですが、画像をポラロイド風に表示させたいのですが、なかなかうまくいきません。
CSSはスタイルシートの一番下に入れたのですが、spanの一行をどこに入れたら良いのかが解りません。
キャプチャ画像にワンポイントで右下に小さいアイコン(.gif)も入れたいのですが、なかなか表示されません。
枠も表示されなくてシクシクしてます。
お忙しいとは思いますが、教えて頂けますでしょうか？
ちなみに(.gif)のurlはhttp://tsuduku.lolipop.jp/pp_op_er_rd2.gifです。
yujiro様、こんばんわ。
作業をしながらのhelpコメントですみません。
ドロップシャドウの方は形がなんとか出てきた状態です。
Ａ Ｌｉｓｔ Ａｐａｒｔ様の記事を参考にしながらやっていたのですが、どうしてもshadowAlpha.pngとshadow.gifの画像がcenterにきません。
あと、先日コメントした際に右下の.gif画像が入れられなくて困っています。
どのようにすれば良いのでしょうか？
