スポンサーリンク
flexboxで画像を横並びにしたところ、タイトル画像のように画像が縦に伸びるという現象が起きました。
問題が起きた当時の状況としては、
- パソコン上でブラウザのサイズを変えてデザイン確認を行った
- 問題なかったので、GitHubで静的ページを公開した
- その後、自分のスマホで確認したところ、画像が縦に伸びていた
こんなかんじです。
「パソコンでブラウザのサイズを変えて確認したんだけどな…」と思いつつ、ググったら原因が分かったのでまとめます。
スポンサーリンク
問題が起きたコード
問題が起きたときのコードとしては、
<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では画像が縦に伸びる」
ということらしいです。
画像が縦に伸びる場合の解決策
こういった場合の対応としては、
- 画像をdivで囲う
- 画像を囲ったdivにサイズ指定(今回の場合なら30％)を行う
- その上で、画像自体には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」って名前は聞いたことがあるかと思いますが、
- 大手企業「ベネッセ」が事業パートナーを務めてるので安心
- 専門書よりも安く買えるので、お試し購入がしやすい
- スマホから動画で学べるので、通勤中や昼休みにも勉強できる
など、独学者にはかなりオススメのコンテンツです。
次の記事で詳しく解説してるので、スキルアップをしたい独学者の方はぜひ読んでみてください
それでは！
スポンサーリンク
スポンサーリンク
