うろうろながらもほのかに明かりが

ぐるぐる回っているようで、少しずつ進んでいるのかなぁ。

こんにちは。サキナオコです^ ^
今日も良いお天気です。健康診断に行きました。
両目視力1.2と言われ驚きました。…勘が当たった？？

いつもご覧いただき、スキ、フォロー、コメント、サポート、オススメまでも本当にほんとうにどうもありがとうございます＊^o^＊
今日の頑張り投稿はそんなあなたのおかげです^o^/

はい、で引き続きHTMLのgridです。
健康診断の待ち時間に昨日わからなかったspanを調べていて意味がわかりました。

スラッシュ左のグリッド線からどのくらい進むかなんですね。すごろくみたいに。
日付みたいなのはグリッド線に割り当てられている数字なのですけど、spanとある場合はスラッシュ左のグリッド線から何本目か、っていうことみたいです。スッキリしました。

そのサイトにレスポンシブの良い感じのレイアウトのやり方が載っていたので、帰ってから早速チャレンジ。

ウィンドウを左右に伸ばしたり縮めたりすると、レイアウトも良い感じになります。これは良い！と思い、画像を入れてみました。

しかし、その画像がぜんぜんレスポンシブになりません><
デカデカと残ったままになります。

メディアクエリといって、モバイル用だとかサイズごとの指定をするのですが、そのメディアクエリごとに画像を用意するだとか、もうやる前から面倒臭くてたまりません。

楽をしたいがためにしつこく調べていたら、良い方法がありました。heightにvwの単位を指定して、object-fit: cover;とともに書くというのです。IE対策用の記述もありました。

それを真似して書いてみると、どうでしょう！
画像も一緒に伸び縮みします！＊^o^＊
素敵な方法、感謝します！！

その画像のレスポンシブにする記述をどこへ書いていいのか、悩んでいたら日が暮れてしまいました。

クラス名にimgを足して指定すれば良かったのですね。わかってしまえばなんということもなく。そんなことの繰り返しで少しずつ進んでいる気がします。