2009年12月 6日
ドロップシャドウつきの画像をセンタリングする
ドロップシャドウつきの画像をセンタリングする方法を紹介します。
以前紹介した、「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;
}
Posted by yujiro このページの先頭に戻る
- CSSでクラスセレクタをくっつけて並べる方法
- pre要素で折り返しをするためのCSS
- Google Chromeでfloatレイアウトが崩れる件について
- IE8/IE9の「ブラウザーモード」と「ドキュメントモード」のまとめ
- IE6/IE7/IE8/IE9のCSSハック
- ColumnResizerリニューアル
- CSS で table に斜線を引く方法
- IE7 で pre 要素が適正に表示されない不具合を修正
- CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
- CSS でヘッダーに画像を表示する for Movable Type 4
- CSSでブログに影をつける(ドロップシャドウ:Movable Type 4.x 配布テンプレート版)
- Highslide JS でサムネイル画像を拡大表示する(設定方法の変更)
- CSS でブログ本文の画像だけをセンタリングする
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- グローバルナビゲーション(その1:基本スタイル)
- 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
- サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
- 公開テンプレートにフッタを追加する(2カラム版)
- CSS の after 擬似要素で回り込みを解除する
この記事を読んだ人はこんな記事も読んでいます
人気エントリー
Hatena Hot Entries
Hatena Entries
トラックバックURL
コメントする
greeting
