プログラミング・エンジニア転職

flexboxで横並びにした画像がスマホ(iPhone)のsafariだと縦に伸びる原因と対策

縦の伸びた画像

flexboxで画像を横並びにしたところ、タイトル画像のように画像が縦に伸びるという現象が起きました。

問題が起きた当時の状況としては、

  1. パソコン上でブラウザのサイズを変えてデザイン確認を行った
  2. 問題なかったので、GitHubで静的ページを公開した
  3. その後、自分のスマホで確認したところ、画像が縦に伸びていた

こんなかんじです。

「パソコンでブラウザのサイズを変えて確認したんだけどな…」と思いつつ、ググったら原因が分かったのでまとめます。

問題が起きたコード

問題が起きたときのコードとしては、

<div class="gallery">
  <img src="" alt="写真" class="photo">
  <img src="" alt="写真" class="photo">
  <img src="" alt="写真" class="photo">
</div>
.gallery{
  display: flex;
}

.photo{
  width: 30%;
}

こんなかんじです。

見てもらえば分かりますが、

  • 親要素(div)にflexboxを指定した
  • 子要素(img)に画像を入れて、サイズ指定(30%)を行った

こんな内容です。

画像が縦に伸びた理由

デザインが崩れた原因をググってみると、

「flexboxの仕様上、子要素に直接画像を入れると、スマホ版のsafariでは画像が縦に伸びる」

ということらしいです。

画像が縦に伸びる場合の解決策

こういった場合の対応としては、

  1. 画像をdivで囲う
  2. 画像を囲ったdivにサイズ指定(今回の場合なら30%)を行う
  3. その上で、画像自体には100%のサイズ指定を行う

こんなことが効果的だそう。

ソウ

つまり、画像がflexboxの孫要素になるように直す必要があるってことです

なので…

<div class="gallery">
 <div class="photo-wrapper">
  <img src="" alt="写真" class="photo">
 </div>
 <div class="photo-wrapper">
  <img src="" alt="写真" class="photo">
 </div>
 <div class="photo-wrapper">
  <img src="" alt="写真" class="photo">
 </div>
</div>
.gallery{
 display: flex;
}

.photo-wrapper{
 width: 30%;
}

.photo{
 width: 100%;
}

こんなかんじに修正したところ、無事にデザインも修正されました。

まとめ

flexboxは今回のバグ以外にも、いくつかバグが起きるポイントがあるみたいですね。

「複数ブラウザでのチェックは必須だよ~」と聞いたことがありますが、まさにそのことを痛感した出来事でした。

さて、最後に余談ですが、僕は一つだけ自慢できることがあります。

それは、

  • 30代
  • 妻子持ち
  • ブラック企業

というハードモードの中、スクールには通わず、半年の独学で上場企業から内定したことです。

そのときは、

  • ドットインストール
  • 関連書籍
  • Ruby on Rails チュートリアル

など、いわゆる「王道」の教材も使いましたが、一番参考になったのはUdemyで買った動画教材。

特にCSSやJavaScriptの学習で参考になった教材がコチラです。

プログラミングを勉強してる方なら「Udemy」って名前は聞いたことがあるかと思いますが、

  • 大手企業「ベネッセ」が事業パートナーを務めてるので安心
  • 専門書よりも安く買えるので、お試し購入がしやすい
  • スマホから動画で学べるので、通勤中や昼休みにも勉強できる

など、独学者にはかなりオススメのコンテンツです。

ソウ

次の記事で詳しく解説してるので、スキルアップをしたい独学者の方はぜひ読んでみてください

それでは!