デイトラWeb制作 -Day7-
flexbox内に配置する時の、imageの幅指定方法を整理
この二日間、急遽地元へ戻ることに。新幹線内で作業しました。画面小さいと効率落ちますね。
さて、今のデイトラ講座のお手本は、直接imgタグに幅を指定しています。
私は「imgタグには直接指定せず、divなどで囲んで指定する」というやり方を覚えていたので、そのやり方でhtmlを書いてました。
レスポンシブ対応の説明のところで、pc画面での画像幅を指定する箇所が出てくるのですが、imgを囲んだdivに幅指定しても、言うこと聞いてくれない。。しばらくコード見比べて、imgの扱い方が違うことに気づきました。
今回画像はflexbox内横並びになっています。左に画像、右にテキストという構成。
なぜimgの親要素に幅指定しても効かないのか。codepenで比較してみました。
imgのwrapperに指定。
imgに直接幅指定。
imgのwrappeに指定、かつ、変動幅のテキストに「flex: 1;」を指定
imgのwrapperに指定、幅に合わせてサイズも変えてくれるflexboxは便利ですが、今回は固定したい。指定してもその幅にはなってくれません。
imgに直接指定で固定幅にできます。が、もとの画像サイズより幅が狭くなった時に縦横幅が崩れます。ただ今回の課題はPC幅（min-width: 768px）の場合なので、そこまで狭くならない前提なので大丈夫そうです。
1.と同様に固定幅imgのwrapperに幅指定した上で、「flex: 1」を変動幅エリアに追加すると、画像が固定幅のままになってくれます！
※「flex: 1」……余った空間いっぱいに（flex: 1指定された）子要素の幅をとってくれる
Flexboxで、固定幅＋変動幅の横並びにするときは、変動幅の方に「flex: 1」をつければ解決！
結論、「画像固定幅＋テキスト変動幅」の構成の場合、基本的にimgにはwrapperをつけ、wrapperに幅を指定し、変動する部分は「flex: 1」でよさそう！
また例外など出てきたら調べてみようと思います。
※Flexboxに入ってないimgはまたちょっと挙動が違うので混同しないこと。
追加でimgまわりのお勉強
ついでにはっきり理解していなかったことを調べます。
htmlにサイズ指定するのと、CSSで指定するのは何が違うのか。
cssで指定するから、htmlの指定要る？って思ってました。結構面倒ですし。
調べたところ、最終的に表示されるのはCSSで指定したサイズになりますが、htmlで指定するのはレイアウトシフトを防ぐため！
参考になったサイトがこちら。ありがとうございます！
レイアウトシフトという言葉もあまりわかってなかったので勉強になりました。
「widthとheight属性を指定すると、画像が読み込まれる前段階で画像のサイズ分のエリアを確保するようになります。」
なので、あとからブラウザが「あっ違った、ほんとはこのテキストもっと下だった！」って、あとから要素を移動させることがなくなるのですね。とても大切な指定でした。
vscodeで、htmlにimgサイズ指定をしてくれるキーボードショートカットを設定しました。
「editor.emmet.action.updateImageSize」で指定できます。
めちゃ便利！これならめんどくさいどころか、楽しくなっちゃいます。
※こちら、私が調べなくても、Day11でデイトラに記載ありましたwww
さすが、網羅されております。
あとがき
画像周り、実はずっともやもやしていたので整理できてよかったです！
そして、帰宅して大きいディスプレイで確認できる幸せを実感しております。
デイトラ、なかなか進みません。。
わかるところはささっと、でもわからないところはしっかり理解しながら、あせらず進めていこうと思います。
ここまでお読みいただきありがとうございました！
この記事が気に入ったらサポートをしてみませんか？