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

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

Posted at December 6,2009 3:55 AM
Tag:[Dropshadow, Image]

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

以前紹介した、「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;
}
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


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

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

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

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