《CSS》ウィンドウを縮めながら画像を縮める方法

こんにちは、「なゆた」です！
今回は皆さんに、「CSS」を使って、ウィンドウを縮めながら画像を縮める方法をお教えします！
この方法から、新しい単位についてを学びましょう！

①まずはHTMLファイルで、クラス付き親divタグを入れ、その中に子divタグとimgタグを入れます。

②次にCSSファイルと連携・移動したら、クラス付き親divタグと、その中のimgタグに手を出します。幅を設定するだけでOKです！ここで使われる新しい単位「vw」は、「viewport width」の略で、幅に対する割合を表します。この単位を使えば、ウィンドウを縮めながら画像を縮めることができます！

③すると、ウィンドウを縮めたら、画像も一緒に縮まりました！これで完了です！

いかがでしたか？これもWebサイトのコーディングで非常に役立つので、ぜひ覚えておいて下さいね！
以上です、ありがとうございました！