object-fit（CSS）が便利

家事や子育てで、皆さんも毎日忙しい日々をお過ごしですか？　

こんにちは、関西在住で主夫歴５年越のYUJIです。

レスポンシブでスマホ画面とPC画面を使い分ける

前回と同様に、先ほどまで悪戦苦闘していたサイト模写における苦労話を備忘録としてお伝えできればと思います。

サイト模写を学ぶために私がお世話になっている

「作って学ぶコーディング学習サイト」 https://code-step.com/

の【HTML/CSS コーディング練習】初級編 では、mainにある大きな画像がスマホとPCでそれぞれ使い分けられるように工夫がされています。

このように、サイトを閲覧される方の端末によって、サイトが見やすいように工夫をすることを「レスポンシブデザイン」と呼んでいます。

この「レスポンシブデザイン」については、私もドットインストールさんの「詳解CSS レスポンシブウェブデザイン編」（有料コース）で学んだつもりなのですが、実際にやってみると、非常に苦戦しました。かれこれ５時間くらいは格闘したのではないでしょうか。

勝手な思い込みが処理がストップした一番の理由でした

レスポンシブデザインの模写で一番悩んだのが、画面幅が600pxで切り替わる際に、画像が切り替わる処理でした。

当初、私は思い込みで、もともとの画像がトリミングされて別の画像のように見えるような処理を目指していました。でも、どうやっても上手く表現できず、デモ画面をじっと見ていた際に、ふと、「あれ、もしかして、この切替画像は別々の画像を使っているのではないか。」と思ったのが解決のきっかけです。

確かに、サイト作成の素材データにはメインビジュアル用の画像データが２種ありましたので、そこに気づかなかったのが原因でした。

object-fit（CSS）を使ってみました

できない理由が分かりましたので、２種のデータ画像を使いました。今回の場合は、モバイル端末とPC端末の区分けとして、メディアクエリでmax-widthを600pxに設定しています。画面幅プラウザで画面幅を拡大していく（画面遷移していく）と、幅600pxのところで別画像に切り替わったのですが、画像の見栄えを調整するために、CSSにobject-fitを使ってみました。これは、object-fit:cover; として利用すると、自動で画面幅にあわせたトリミングをしてくれるので、非常に便利です。

こんな失敗も重ねながら、なんとか二つ目の宿題をクリアできそうです。

次回も、このようなプログラミング初学者が陥りそうな「あるある話」をお伝えしていきますね。

それでは、また。