【HTML&CSS】超簡単に画像の大きさを変えてみよう!

こんにちは!kwです。

今回は、HTMLとCSSで画像の大きさを調節する方法をご紹介します。

超簡単に画像の大きさを変更することができますので、ぜひご参考にしてみてください!

1.HTMLで画像の大きさを変更する方法

HTMLでは、img要素を使って画像を表示させることが可能ですが、画像の大きさもHTML内で簡単に調節することができます。

やり方は要素のタグ内に「width="" height=""」と記述するだけ!

例(幅200px、高さ250pxの場合)↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

このように、タグ内でwidthとheightの値を変更することによって、画像の大きさを調節することができます。

2.CSSを用いて画像の大きさを変更する方法

img要素では、CSSを用いて画像の大きさを変更することも可能です。

例(幅200px、高さ250pxの場合)↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

このように、HTMLだけを用いる場合でも、HTMLとCSSを用いる場合でも簡単に画像の大きさを調節することが可能です。

3.まとめ

いかがでしたでしょうか?

画像の大きさを変更することができるとデザインの幅も大きく広がるので、ぜひ今回ご紹介した方法を覚えてみてください!

レスポンシブ対応をさせるならCSSで調節したほうがいい場合もありますので、状況によって使い分けることができるとベストです!

ということで今回も最後まで読んでいただきありがとうございました!

当方では「最小限の情報でわかりやすい記事」を心がけて執筆しておりますので、お時間がありましたら他の記事もご覧いただけると幸いです!