TopCSS > 2009年12月
2009年12月 6日

ドロップシャドウつきの画像をセンタリングする

December 6,2009 3:55 AM
Tag:[, ]
Permalink

ドロップシャドウつきの画像をセンタリングする方法を紹介します。

以前紹介した、「CSSで画像に影をつける(ドロップシャドウ)」では、画像のセンタリングを行うことはできません。

ドロップシャドウつきの画像

本エントリーの設定を行うことで、次のようにセンタリングすることができます。確認ブラウザは Windows XP+ Firefox3.5/IE6/IE7/Opera10/Safari4 です。

ドロップシャドウつきの画像をセンタリング

1.基本

CSSで画像に影をつける(ドロップシャドウ)」のマークアップに加え、さらに青色の div 要素を追加します。

<div class="image" style="width:300px">
  <span class="shadow">
    <img alt="coffee" src="http://user-domain/coffee.jpg" width="300" height="199" />
  </span>
</div>

マークアップのキモは、追加した div 要素に、画像と同じ幅の width プロパティを設定することです。

そして、以下のセレクタを追加します(セレクタ名は相応しい名称に適宜変更してください)。

.image {
    margin: 0 auto;
}

2.IE6 以外に対応させる場合

1項の設定ではIE6に対応しません。IE6にも対応させる場合は、1項のマークアップをさらに div 要素で括ります。

<div class="image-ie6">
  <div class="image" style="width:300px">
    <span class="shadow">
      <img alt="coffee" src="http://user-domain/coffee.jpg" width="300" height="199" />
    </span>
  </div>
</div>

そして、以下のセレクタを追加します(セレクタ名は相応しい名称に適宜変更してください)。

.image-ie6 {
    text-align: center;
}
Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3