CSSだけでiPhoneで見た時の画像を横幅いっぱいに表示させる方法

このブログはiPhoneで見た時に左右10pxずつ余白を入れているんですが、画像を目立たせたい時にはCSSでその余白をなくして画像を横幅いっぱいに表示するようにしています。
imgタグにclassを付けるだけでできますので、その方法を紹介します。

sponsored link

横幅いっぱいってこういう感じ

実際にiPhone(Safari)で見るとこのようになります。

Safariでの表示

画像の左右に余白がなく、本文と画像の始まる位置が違いますよね。合計20px分画像が大きくなるのでより目を引くデザインになります。

指定するCSS

HTMLは任意のclass(ここではfull-width)を付けるだけです。

CSSはこのように記述します。

全体としてはiPhone用のCSSをまず指定、CSS3のメディアクエリ@media screen and (min-width: 321px){}で画面サイズが321px以上になったらiPhone用のCSSを無効にするといった流れです。

iPhone用のCSSではposition: relative;で通常の位置(static)を基準にしてleft: -10px;で位置を指定します。

321px以上になったらmax-widthpositionを元の状態に戻してあげます。
今回は321px以上で括りましたがデバイスごとにもう少し細かく指定していくこともできると思います。


コードはprasmさんを参考にしました。prasmさんはmax-widthを使っているようなんですが、僕はiPhoneから指定していく方がやりやすいかなと思っています。

僕の場合は320pxでは上下のボーダー、321px以上になるとボーダーをなくして上下左右にボックスシャドウを付けてます。

メディアクエリとはなんぞやという方はこちらの書籍が丁寧に書かれていて分かりやすかったです。