CSSで画像に影をつける(ドロップシャドウ)

CSSで画像に影をつける(ドロップシャドウ)

Posted at January 30,2006 11:52 PM
Tag:[CSS, Dropshadow, Image]

CSSを利用して画像に影をつける(ドロップシャドウ)カスタマイズです。ご質問を頂いたのでこちらのエントリーで紹介致します。下のスクリーンショットはドロップシャドウ完成例です。

CSSで画像に影をつける

仕組みは、ドロップシャドウ用の画像を、img タグを括る別のタグの背景画像として指定し、img タグの画像をずらして表示することでドロップシャドウの効果を出すようになっています。

参考にさせて頂いたのは下記のサイトです。ありがとうございました。

最初の1976design.com等で図を用いて解説されているので、仕組みがお分かりになるのではないでしょうか。

1.画像のHTML記述方法

下記のように img 要素を span 要素で括り、class 属性 "shadow" を付与します。span 要素の代わりに div 要素でも構いませんが、インライン要素の方が色々と都合がいいかも?と思い、ここでは span 要素で括ってみました。p 要素でもOKです。

<span class="shadow"><img src="hogehoge.jpg" alt="hogehoge" /></span>

2.ドロップシャドウ用背景画像のダウンロード

当サイトでは用意しておりませんのでPOCHIKING*画像に自動的に影をつけてテキストを回り込ませるからダウンロードしてください。ダウンロードしたら任意のディレクトリ(FC2ブログは固定ですね)へアップロードしてください。

3.スタイルシートの追加

スタイルシートに下記の設定を追加します。色々な方法があるようですので他のサイトの内容もお試しください。

.shadow {
    background: url(背景画像のパス) right bottom;
    float: left; /* 回り込み制御 */
}
 
.shadow img {
    position: relative;
    left: -5px; /* 画像を左へ移動 */
    top: -5px; /* 画像を上へ移動 */
    padding: 5px; /* 画像枠 */
    background: #ffffe0; /* paddingを設定した場合の背景色 */
    border: 1px solid #999999; /* 画像の枠線 */
}

背景画像のパスは、2項でアップロードしたドロップシャドウ用背景画像のパスまたはURLを指定してください。

表示については Windows 2000/XP+IE/Firefox/Operaで確認しております。なお画像枠のpaddingについて、当サイトではIEでは正常に表示されておりませんので予めご了承ください(試験サイトで作ったサンプルでは等しく表示されましたので、CSSの別の設定と干渉しているかもしれません)。IEで画像枠を表示する場合は標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示するを参照ください。

4.その他

いろいろ試していて気がついた点をいくつか。

  • div で括るときは img タグの間に改行がない方が良いみたいです。
  • やや上・左よりになるので、位置補正のため下記のように magrin プロパティを .shadow セレクタに設定すると良いでしょう。値は試しながら修正してください。
.shadow {
    margin: 10px 0 0 5px;
    background: url(背景画像のパス) right bottom;
    float: left; /* 回り込み制御 */
}

2006.03.15 追記
IEで画像枠を表示する場合の記述を追加しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

[web]書影か、赤い絵良し(回文) from Tres tristes tigres...
書影には赤い絵が良いよ、目立つから。 小粋空間: CSSで画像に影をつける(ドロップシャドウ)を参考に、amazletの書影に影を付けてみた。見た目がそん... [続きを読む]

Tracked on January 31, 2006 4:15 AM

エントリー中の画像に影をつける from 暇人STRのブログ
小粋空間さんのこちらのエントリーを参考に、エントリー中の画像に影をつけるようにしてみました。 あらかじめ用意しておいた影... [続きを読む]

Tracked on February 21, 2006 11:02 PM

MovableType:エントリーのサムネイル画像に自動的にドロップシャドウをつける from DayByDay
MovableTypeでエントリーのサムネイル画像に、自動的にドロップシャドウをつける。 [続きを読む]

Tracked on March 12, 2006 11:58 PM

[CSS] XML宣言を削除しないでIEでも画像に写真枠とドロップシャドウを表示させる from pastelmilk
CSSで画像に本物の写真のように枠とドロップシャドウを付ける CSSで画像に本物... [続きを読む]

Tracked on November 9, 2006 10:51 PM

JavaScriptで作るシャドー効果 from Open MagicVox.net
 グロー効果に引き続き、 HTML 要素に影を落としたような視覚効果であるシャドー効果(drop shadow effect) を付与するための Java... [続きを読む]

Tracked on January 20, 2007 2:28 PM

ドロップシャドウ from motorpsycle
画像を使わずにドロップシャドウを付けるCSSテクニックを試してみようかと。 よく、サムネイル画像なんかにドロップシャドウが付いていたりしますが、元の画... [続きを読む]

Tracked on February 1, 2007 6:24 PM

2月14日のアップデート情報(.moflogの) from .moflog
日頃は『.moflog』をご愛顧いただき誠にありがとうございます。 2月12日に行われたアップデ... [続きを読む]

Tracked on February 14, 2007 2:34 PM

flickr badgeをオシャレにカスタマイズ from TODOROKI
以前はflickr badgeを表示させるためにWP Flickr DHTML Badgeというプラグインを使用していました。 flickrで公式配布され... [続きを読む]

Tracked on September 15, 2007 7:11 PM

CSSで画像にドロップシャドウをつける from 日刊にしこり-埼玉版-
小粋空間 画像にドロップシャドー(影)を付ける方法を紹介いたします。 元ネタの小粋空間さんは下記のサイトを参考になさったようです。 目を通しておくと... [続きを読む]

Tracked on October 24, 2007 12:20 AM

スタイルシートで画像に影をつける from 社労士@DIARY
 スタイルシートを使って画像に影をつけるカスタマイズ。仕組みは影(ドロップシャドウ)用の画像をimgタグで括る別のタグの背景画像として指定して、img... [続きを読む]

Tracked on April 10, 2008 9:42 PM
コメント

先日のご質問させて頂いておりました件、早速解説して頂きありがとございます。いつもながら感謝しております。また、暇を見てはカスタマイズにチャレンジしたいと思います。後、テンプレート(3カラムリキッドレイアウト)の不具合の件もお手数おかけしますが宜しくお願いします。詳細につきましては、MT3.2テンプレートのコメント欄にご質問させて頂いております。忙しいのに本当にすみません。

[1] Posted by panser : January 31, 2006 2:36 AM

>panserさん
こんばんは。
コメントありがとうございます。
ご質問の件につきましては追って回答させて頂きますのでお待ちください。

[2] Posted by yujiro : January 31, 2006 6:40 PM

はじめまして。。
画像に影をつけたいのですが、初心者なためやり方がわかりません(泣)。。
つけたいのは、タイトルの画像で
#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

[3] Posted by sacchi : February 18, 2006 11:38 PM

はじめまして。
小粋空間様のサイトを参考に、ドロップシャドウ化とサイドバーメニューの折りたたみを行わせていただきました。
これからもいろいろと参考にさせていただきます。
ありがとうございました。

[4] Posted by STR : February 21, 2006 11:08 PM

>sacchiさん
こんばんは。
ご利用ありがとうございます。
遅くなってすいません。サンプルを作りましたのでこちらを参考にして頂けますでしょうか。
HTMLソース(index.html)・スタイルシート(styles.css)・ドロップシャドウ用の画像(shadow_001.gif)がありますので、それぞれ表示(またはダウンロード)して、差分等をご確認ください。
HTMLはバナー部分のタグを若干変更し、スタイルシートは前半に修正を加えたものを追加して、不要になったものは削除しています(スタイルシートはそのままお使いになっても良いと思います)。
ご不明な点がございましたらご連絡ください。

以上です。
それではどうぞよろしくお願い致します。

>STRさん
はじめまして。
ご利用&ご連絡ありがとうございます。
またのお越しをお待ち申し上げます。

[5] Posted by yujiro : February 22, 2006 12:15 AM

ドロップシャドウ参考にさせていただきました。
FireFox では写真に白い枠がつくのですが、IEでは付かないですよね。これは想定したとおりなのでしょうか?

[6] Posted by naoya : March 9, 2006 1:19 PM

>naoyaさん
こんばんは。
記事参照ありがとうございます。
ご質問の件ですが想定外でしたので、調べて標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示するにまとめてみました。

それではどうぞよろしくお願い致します。

[7] Posted by yujiro : March 11, 2006 2:04 AM

こんにちは!!やっと出来ました。。理解の悪い私。。(T-T)
料理版のブログを作ったのでそちらで使わせていただいてます(^0^ゞ
お手数おかけしてすみませんでしたm(__)mありがとうございました!!

[8] Posted by sacchi : March 23, 2006 11:31 AM

>sacchiさん
こんにちは。
ご連絡ありがとうございました。
設定お疲れ様でした。
ではでは!

[9] Posted by yujiro : March 23, 2006 4:47 PM

度々すいません^^;
今度はこちらの影をつけるに挑戦したのですが、
すごいずれかたをしてしまいました。
投稿者情報も上にあがっている状態になってしまいました。(エントリー部分分かりやすいようにそのままにしてあります。)

お忙しいところ本当にすいません。教えていただけたら幸いです。

[10] Posted by kon : March 24, 2006 12:07 PM

>konさん
こんばんは。
ご質問の件ですが、スタイルシートの下記の部分に青色のプロパティを追加してみてください。

/* 投稿者 */ .entry-footer {     margin: 10px 0 0 0;     border-top: 1px dotted #cccccc;     text-align: right;     color: #666666;     font-size: 9px;     clear: both; }

以上です。
それではどうぞよろしくお願い致します。

[11] Posted by yujiro : March 25, 2006 1:34 AM

こんにちは、はじめまして。

ココログで初心者向けにカスタマイズ方法を説明するブログを運営しています。
(私も初心者レベルなのでおこがましい話なのですが^^;)
今回、こちらの記事を全面的に参考にしてココログにて処理する場合の記事を書かせて頂きました。
ありがとうございました。

こちらへのリンクはもちろん記事中に明記しましたが、CSSタグなどそのままコピーして掲載した部分もありますのでもし何か不都合があれば遠慮なくご連絡下さい。対処させて頂きます。

また参考にさせていただくと思います。
その際もどうぞ宜しくお願いいたします。

[12] Posted by tako : April 2, 2006 8:27 PM

>takoさん
はじめまして。
記事参照&ご連絡くださりありがとうございました。
それでは今後ともどうぞよろしくお願い致します。

[13] Posted by yujiro : April 4, 2006 12:07 AM

こんばんは。
はじめまして、ゆずと申します。

お門違いかもしれませんが、貴サイトのようにホームページ全体に立体感(ドロップシャドウ?)を出すにもこの方法でできるのでしょうか。

ここ数ヶ月悩んでいるのですが、貴サイトなら的確なお答えをいただけるような気がして、図々しくもコメントさせていただきました。
ぜひ教えて下さい。

[14] Posted by ゆず : April 16, 2006 9:31 PM

>ゆずさん
こんばんは。
このブログでカスタマイズしている内容は少しずつ公開していく予定です。
現在鋭意作成中ですのでお待ちください。

[15] Posted by yujiro : April 17, 2006 8:26 PM

はじめまして。
素敵なテンプレートをお借りしました。ありがとうございます!

画像を回り込むように(画像の左に文字)したいのですが、アフィリエイトリンクの場合タグをいじれないのでスタイルシートで設定できれば…と思います。
色々検索してみたのですがどれもうまくいきませんでした。
どこにどのように書き足せば可能になりますか?
よろしくお願い致します。
(アフィリエイトを含むサイトですので宣伝になるといけないのでURLは書かずにおきます…)

[16] Posted by xcoxco : May 24, 2006 12:49 PM

>xcoxcoさん
こんばんは。
ご質問の件ですが、遠慮なさらずにURLをご連絡ください(元ネタがないと実験できませんので)。またドロップシャドウの記事へのコメントですが、ドロップシャドウは不要でよろしいですね。

以上です。
それではよろしくお願い致します。

[17] Posted by yujiro : May 26, 2006 12:17 AM

こんばんは。

返信ありがとうございます。
あれから少しまた考えて、ブログをいじっていたらたHTMLで書ける機能がついていました。
すぐにこちらへと書き込みに来たのですが、コメントの書き込みができませんでした…

これからも色々参考にさせて頂きます。
ありがとうございました。

[18] Posted by xcoxco : May 27, 2006 11:25 PM

Yujiroさん、

他にもいくつか質問させて頂いておりますが、エントリー内の画像に影を付ける方法を試しているのですが、上手く行きません。上記手順の1-4を試した積もりですが、上手く行きません。あと、後方互換モードのところの下りがあまり理解できないのですが、具体的にはどうすれば良いのでしょうか?

[19] Posted by kunio : January 11, 2007 10:11 AM

>kunioさん
こんばんは。
ご質問の件ですが、下記の修正を行ってください。

1.background プロパティの "url" と "(" の間の半角空白を取り除いてください。

.shadow {
    margin: 10px 0 0 5px;
    background: url (http://kunio.net/blog/shadow.gif) right bottom;

2.上記のセレクタに、サンプル通り、float プロパティを付与してください。

3.2項の修正を行うと後方の画像が右に回りこむため、p タグの要素セレクタに青色のプロパティ(回り込み解除)を付与する手があります。

p {
    margin-top: 15px;
    margin-bottom: 15px;
    clear: both;
}

4.IEで黄色い枠を表示させたい場合は、テンプレート1行目の

<?xml ??>

を削除してください。

カスタマイズされると疑問や不具合が色々発生すると思いますが、まずはご自身でもできる限り解析くださいますよう、よろしくお願い致します。

以上です。
それではよろしくお願い致します。

[20] Posted by yujiro : January 12, 2007 12:17 AM

Yujiroさん、

ありがとうございます。
無事影は表示されるようになりました。

[21] Posted by kunio : January 12, 2007 9:13 AM

いつもお世話になります。そしてまたまた質問デス。

影付けは問題なく出来ているのですが、例えばトップページの最下段にエントリーが位置した場合のみ、影が大きくズレてしまうという現象に出会します。Firefoxでは問題ないのですが、IE(Sleipnir)ではズレてしまいます。また、個別エントリーでも微妙に影&写真の位置がズレていたりします。最下段の時のみ・・・ということと、影がズレるタイミングを見ていると、footerとの関係があるような気もするのですが・・・。スタイルシートの設定を変えてみたものの、解決まで至っておりません。

お忙しい中恐縮ですが、思い当たる節、アドバイス等いただけると幸いです。


[22] Posted by toycozy : December 6, 2007 10:31 AM

>toycozyさん
こんばんは。
ご質問の件につきまして、各ブラウザで確認していますが、こちらでは不具合が確認できません。
不具合が確認できるページのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。

[23] Posted by yujiro logo : December 9, 2007 12:39 AM

早々の御返事有り難うございます。

写真付きのテストエントリーを追加してみました。(http://trashnote.com/)
スタイルシートをいろいろと弄ってみましたが、謎のままデス。
御手数をお掛けしますがアドバイスよろしく御願い致します。

[24] Posted by toycozy : December 9, 2007 3:21 AM

>toycozyさん
こんにちは。
こちらで、IE6/IE7/Firefox2でトップページを閲覧した結果をまとめたものを
http://www.koikikukan.com/images/trashnote.png
にアップロードしました。
「ズレテスト。」が最下段のもの、「世の中…」は上部にあるエントリーです。

それで、一番左のIE6の画像のズレは見分けることができておりません(ブラウザ間では違いがあります)ので、toycozy さんのご指摘の部分がこの中に含まれているようでしたら再度ご連絡頂けますでしょうか。
それではよろしくお願い致します。

[25] Posted by yujiro logo : December 10, 2007 12:55 PM

コメントがエラーになったようなので再度書かせていただきます。重複してましたら削除願います。

この度は大変な御手数をお掛けし申し訳ありません。

yujiroさんのキャプチャしていただいた画像を見る限り全く問題ないようなので、当方の環境固有の問題かもしれません。最下段に位置した場合のみ、IEで見ると“http://trashnote.com/images/zure-ie-1.jpg”のような大きく影がズレた状態になります。ブラウザ間の見え方の違いは、全く許容範囲だと思います。恐らくスタイルシート、もしくはブラウザの設定をどこかで間違っているような気がしてきました(汗)。

もう少し検証してみます。貴重な御時間を割いていただいて有り難うございました。

[26] Posted by toycozy : December 10, 2007 6:30 PM

>toycozyさん
こんにちは。
ご連絡ありがとうございます。
ちなみに、複数のPCで拝見させて頂いたのですが、どれも画像と同じ表示でした。
ただ、テンプレートの問題ではないとも言い切れないので、もし何か分かりましたらご連絡致します。
ではでは!

[27] Posted by yujiro logo : December 11, 2007 11:54 AM

いつもお世話になっております。

わかりました!“はてなスター”の設置というカスタマイズの際、その“はてなスター”をspanで設定していたのが、影付けのspanと干渉していたようです。・・・と書きましたが、単に当方がspan,div,p,dd,dt・・・等の違いを明確に理解していなかった為の初歩的なミスだと思われます(汗)。御手数をお掛けし申し訳ありませんでした。ただ、最下段だけにその現象が現れるというのがイマヒトツ原因が・・・???・・・なのですが、spanだから・・・とかいうことでしょうか・・。いずれにしてもお騒がせしてスミマセンでした。

[28] Posted by toycozy : December 11, 2007 8:00 PM

>toycozyさん
こんにちは。
ご連絡ありがとうございました。
無事に解決されたようで良かったです。
ちなみに、IE6 は span 関係のマークアップ誤りに弱いようです。
ではでは!

[29] Posted by yujiro logo : December 12, 2007 11:24 AM

こんばんは、初めまして。
cssで影を付けられるとのことで、早速試してみようと思いました。
とりあえず記載されている通りやりましたら表示する事ができました。
しかし自分なりに色々やってみたのですがどうしても満足の結果が得られず、途方にくれてしまいましたので、お暇があれば教えてもらいたい事があります。

中央揃え(center化)したいのですが、floatをcenterにするとどうしても崩れてしまいます。
ちなみにleftはOKで、rightも大丈夫でしたがcenterだけどうにもダメでした。
span、div、pで試してみましたが多少の変化があるもののどれもうまく表示する事ができませんでした。

ちなみにこれはFireFox3.5の場合で、IE6の場合は上記の方法で理想的な表示をしてくれました。

もしもコレといった原因がありましたら、お答えをもらえるとうれしいです。

[30] Posted by ベンジャ銀地 : November 18, 2009 4:36 AM

>ベンジャ銀地さん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、floatには center という値はありませんので、センタリングしたい画像のimg要素をdiv 要素で括って、そのdiv要素に

text-align:center;
margin: 0 auto;

というプロパティを与えてみてください(動作まで確認していないので正常に動作しなかったらすいません)。
それではよろしくお願い致します。

[31] Posted by yujiro logo : December 1, 2009 12:28 AM

こんばんは。
お返事ありがとうございます。

試してみたのですが、やはりcenterにはなってくれませんでした。
floatはcenterできないのですね。
画像をdivで括って要素をいれてもfloatが優先されるようでした。

どうやら仕様?で無理のようですので、諦めたいと思います。
お忙しい中わざわざお答えありがとうございました。

[32] Posted by ベンジャ銀地 : December 3, 2009 1:06 AM

>ベンジャ銀地さん
こんばんは。
ドロップシャドウつきの画像をセンタリングする」を投稿しましたので参照ください。
ではでは。

[33] Posted by yujiro logo : December 9, 2009 2:09 AM

参考になります!ありがとうございます!

[34] Posted by 逆援 掲示板 : February 3, 2010 3:41 PM

yujiro様、こんにちわ。
久しぶりにBlogに手をつけたのですが、しょっぱなから凹みっぱなしです。
Blogに表示されているキャプチャ画像(.jpg)なのですが、画像をポラロイド風に表示させたいのですが、なかなかうまくいきません。
CSSはスタイルシートの一番下に入れたのですが、spanの一行をどこに入れたら良いのかが解りません。
キャプチャ画像にワンポイントで右下に小さいアイコン(.gif)も入れたいのですが、なかなか表示されません。
枠も表示されなくてシクシクしてます。
お忙しいとは思いますが、教えて頂けますでしょうか?
ちなみに(.gif)のurlはhttp://tsuduku.lolipop.jp/pp_op_er_rd2.gifです。

[35] Posted by tsuduku : August 8, 2010 5:30 PM

yujiro様、こんばんわ。
作業をしながらのhelpコメントですみません。
ドロップシャドウの方は形がなんとか出てきた状態です。
A List Apart様の記事を参考にしながらやっていたのですが、どうしてもshadowAlpha.pngとshadow.gifの画像がcenterにきません。
あと、先日コメントした際に右下の.gif画像が入れられなくて困っています。
どのようにすれば良いのでしょうか?

[36] Posted by tsuduku : August 9, 2010 8:37 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)