iPhoneで画像がズレる・はみ出す時のCSS修正【初心者に多い原因と解決】

WordPressサイトを作っていると、「iPhoneでだけ画像がズレる／はみ出す」 という相談がとても多いです。
特に、PCでは綺麗に見えるのに、スマホ（iPhone）でレイアウト崩れが起きるケースが多発します。

この記事では、iPhoneで発生しやすい画像ズレの原因と、初心者でも確実に直せるCSS修正方法をわかりやすく解説します。

1 よくある原因① width:100% が指定されていない

スマホの横幅はとても狭いため、画像に width:100%; を指定しておかないと、横にはみ出してズレます。

img {
    width: 100%;           /* スマホ画面幅に合わせて縮む */
    height: auto;          /* 縦比率を維持したまま自動調整 */
    display: block;        /* 行間のズレを防ぐ */
}

特に、テーマの画像スタイルが強いサイト（Cocoon / Lightning / SWELL）などは、この指定が上書きされていない場合があります。

2 よくある原因② 親要素（div）が幅固定になっている

CSSで width:600px などの「固定幅」が入っていると、
iPhone の画面幅（375px?）より広くなり、画像が右側へズレます。

2.1 修正：px 固定 → 100% に変更

.image-box {
    width: 100%;         /* 固定幅をやめて画面にフィット */
    max-width: 600px;    /* PCでは600pxまで広がる */
    margin: 0 auto;      /* 中央配置 */
}

3 よくある原因③ iPhoneだけ「object-fit」が無効に見える

iPhone Safari は画像のトリミング関連がPCと少し挙動が違うため、
以下のような画像がズレることがあります。

• ヘッダーの横長画像
• カード型画像
• サムネイルのトリミング

3.1 修正：object-fit と overflow:hidden をセットで使う

.image-box {
    width: 100%;
    height: 200px;            /* 好きな高さ */
    overflow: hidden;         /* トリミングを有効にする */
    border-radius: 10px;      /* 角丸（任意） */
}
.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* はみ出しを防いで綺麗に切り抜く */
}

object-fit を使う場合、**必ず親要素に overflow:hidden を付ける** のがポイントです。

4 よくある原因④ position:absolute がズレる

バナー・キャッチコピー・テキストを画像の上に重ねている場合、
iPhone だけ位置がズレる現象があります。

4.1 修正：親要素に position:relative を付ける

.image-wrap {
    position: relative;         /* 子要素を基準に配置 */
}

.image-wrap .text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
}

relative がないと、iPhone でだけ基準がズレることがよくあります。

5 初心者向け：一番安全な「ズレない画像CSS」完全版

img {
    width: 100%;                 /* 横幅いっぱい */
    height: auto;                /* 比率を崩さず縦を調整 */
    display: block;              /* 下の余白を防ぐ */
    max-width: 100%;             /* 横はみ出し防止 */
    vertical-align: bottom;      /* Safariズレ対策 */
}

これだけで、iPhone のほとんどの画像ズレが改善します。
特に、初心者はまずこのコードを入れておくのが最も確実です。

6 まとめ：iPhoneのズレは「幅の指定」と「object-fit」が原因

• 画像に width:100% を指定する
• 固定幅（px）が原因なら 100% に変更
• object-fit は overflow:hidden とセットで
• absolute の親要素には relative を必ず付ける
• 初心者は基本の img{ width:100%; } を必ず入れる

これらを押さえるだけで、iPhoneの画像ズレはほぼ解決できます。
WordPressテーマを問わず使えるので、ぜひコピペで導入してください。