【imgタグ】widthとheightを設定する必要はある？必ず設定しよう！

などなど、HTMLでのimgタグに関して疑問を持っている方もいらっしゃるのではないでしょうか？

今回は、ITエンジニアの私が、imgタグのwidthとheightを設定する方法をご紹介していきます！

imgタグのwidthとheightを設定する方法

HTMLで、imgタグのwidthとheightを設定するサンプルコードは、以下の通りです。

widthとheightで、画像サイズが指定でき、ピクセル数かパーセントの値を入力できます。

サンプルコードは、ピクセル数で記載されていますね。

注意点としては、画像サイズを変更しても、画像データ量自体は変わらないところです。

大きな画像を扱う際は、データ量をチェックしてから使用しましょう！

どうしてHTMLでwidthとheightを設定するのか？

学習が進んでいるあなたは、以下の内容に疑問を持ったのではないでしょうか？

順番に説明していきます！

画像サイズを変更しなくても、widthとheightを設定する必要があるのか？

結論、画像サイズを変更しなくても、widthとheightを設定しましょう！

というのも、「レイアウトシフト」という現象を防ぐためです。

レイアウトシフトというのは、画像が読み込まれたタイミングでレイアウトが微妙に動いてしまう現象のことになります。

例えば、この記事を読んでいるときに、ページが微妙に動いたり、クリックしている箇所が移動すると迷惑ですよね？

widthとheightを設定すると、画像が読み込まれる前に、画像サイズ分の場所を確保できるのでレイアウトシフトが起こりません。

なので、レイアウトシフトを防ぐためにも必ずimgタグのwidthとheightを設定しましょう！

CSSで設定すれば良いんじゃないの？

HTMLでの設定は、レイアウトシフトを防ぐためのもので、最終的なレイアウトはCSSで行います。

実際に表示される画像サイズは、CSSでの設定になるので覚えておきましょう！

以下がCSSでのサンプルコードになります。

これで、HTMLで設定した「width=“512”」に関係なく、元々の画像の幅で表示することができます。

また、高さに関しては、横幅に合わせて自動調整してくれるので安心ですね。

レスポンシブ対応できないよね？

先ほどご説明した通り、HTMLよりCSSでの記載が優先されるので、CSSでレスポンシブ対応が可能です。

先ほどのCSSサンプルコードを使用すれば、縦横比率がずれることはないので、安心して使用してくださいね。

コーディングに詰まったときの対処方法

コーディングで詰まることが増えているなら、スクールを検討してみるのもおすすめです。

調べて自分で解決することは大切ですが、それは基礎知識がある程度ついてからの話になります。

最初のうちは、調べた内容の中でもわからないことがあって、調べる量が膨大になりがちですが、スクールだと、最初に大切なポイントをまとめて教えてもらえるので、不要な時間を削減できますね。

ちなみに、私が圧倒的におすすめしているのは、「シーライクス（SHElikes）」というWebデザインスクールになります。

未経験でも基本的な内容がまとめられていて理解しやすいですし、何よりサポート体制がしっかりしているのが魅力です。

ここでは、魅力がご紹介しきれないので、良かったらシーライクスの記事も読んでみてください 

まとめ

imgタグのwidthとheightを設定する意味と方法をお伝えしました。

Webデザイナーは、ユーザー目線に立ったデザインを考えることもお仕事ですので、少し面倒くさくても必ず設定するようにしてください。

また、今回ご紹介した「シーライクス（SHElikes）」では、無料体験レッスンを行っています。

無料でシーライクスの体験ができますし、カウンセリングの時間であなたの悩みを質問することも可能です。

「コーディングの学習がなかなか進まない」、「デザインのレイアウトが合っているのかわからない」など、何か困っていることがあるなら、この機会に質問してみるのも良いですよね。

無理な勧誘などもないので、良かったら参加してみてください！

私が実際に無料体験レッスンに参加した記事はこちら