imgタグのwidthとheightを設定する方法を知りたい！
画像サイズはHTMLとCSSどっちで設定すれば良いの？
HTMLのimgタグを設定する意味ってあるの？
HTMLで画像サイズを指定するにはどうしたら良い？
などなど、HTMLでのimgタグに関して疑問を持っている方もいらっしゃるのではないでしょうか？
今回は、ITエンジニアの私が、imgタグのwidthとheightを設定する方法をご紹介していきます！
imgタグのwidthとheightを設定する方法
HTMLで、imgタグのwidthとheightを設定するサンプルコードは、以下の通りです。
<img src=“パソコン.jpg” alt=“パソコン画像” width=“512” height=“341”>
widthとheightで、画像サイズが指定でき、ピクセル数かパーセントの値を入力できますよ。
ちなみに、サンプルコードは、ピクセル数で記載しています！
注意点としては、画像サイズを変更しても、画像データ量自体は変わらないところです。
ひまわり大きな画像を扱う際は、データ量をチェックしてから使用しましょう！
ピクセル(px)は、デジタル画像の最小単位のことですね。
PCやスマホは、たくさんの点（ドット）が集まってできているのですが、そのドットに色情報を追加したものがピクセルとして表現されています。
どうしてHTMLでwidthとheightを設定するのか？
学習が進んでいるあなたは、以下の内容に疑問を持ったのではないでしょうか？
- 画像の大きさを変更しなくても、widthとheightを設定しないといけないの？
- CSSで設定すれば良いんじゃないの？
- レスポンシブ対応できないよね？
ひまわり順番に説明していきます！
画像サイズを変更しなくても、widthとheightを設定する必要があるのか？
結論、画像サイズを変更しなくても、widthとheightを設定しましょう！
というのも、「レイアウトシフト」という現象を防ぐためです。
ひまわりレイアウトシフトというのは、画像が読み込まれたタイミングでレイアウトが微妙に動いてしまう現象のことになります。
例えば、この記事を読んでいるときに、ページが微妙に動いたり、クリックしている箇所が移動すると迷惑ですよね？
widthとheightを設定すると、画像が読み込まれる前に、画像サイズ分の場所を確保できるのでレイアウトシフトが起こりません。
なので、レイアウトシフトを防ぐためにも必ずimgタグのwidthとheightを設定しましょう！
CSSで設定すれば良いんじゃないの？
HTMLでの設定は、レイアウトシフトを防ぐためのもので、最終的なレイアウトはCSSで行います。
ひまわり実際に表示される画像サイズは、CSSでの設定になるので覚えておきましょう！
以下がCSSでのサンプルコードになります。
img {
width: 100%;
height: auto;
}
これで、HTMLで設定した「width=“512”」に関係なく、元々の画像の幅で表示することができます。
また、高さに関しては、横幅に合わせて自動調整してくれるので安心ですね。
レスポンシブ対応できないよね？
先ほどご説明した通り、HTMLよりCSSでの記載が優先されるので、CSSでレスポンシブ対応が可能です。
ひまわり先ほどのCSSサンプルコードを使用すれば、縦横比率がずれることはないので、安心して使用してくださいね。
ユーザーが閲覧する画面サイズは、スマホだったり、PCだったりと人によって違います。
その画面サイズに合わせて、デザインやレイアウトを最適化するのがレスポンシブ対応です。
コーディングに詰まったときの対処方法
コーディングで詰まることが増えているなら、スクールを検討してみるのもおすすめです。
というのも、調べて自分で解決することは大切ですが、それは基礎知識がある程度ついてからの話だからですね。
ひまわり最初のうちは、調べた内容の中でもわからないことがあって、調べる量が膨大になりがちですが、スクールだと、最初に大切なポイントをまとめて教えてもらえるので、不要な時間を削減できますよ。
ちなみに、私が圧倒的におすすめしているのは、「シーライクス（SHElikes）」というWebデザインスクールになります。
未経験でも基本的な内容がまとめられていて理解しやすいですし、何よりサポート体制がしっかりしているのが魅力です。
ここでは、魅力がご紹介しきれないので、良かったらシーライクスの記事も読んでみてくださいね
シーライクスのコース内容が気になるあなたはこちら
シーライクスのサポートが気になるあなたはこちら
画像の表示やコーディングでよくある質問集！
imgタグの設定方法に関して、ご紹介してきましたが、他にもコーディングの学習で気になることがいくつかありますよね。
ひまわり今回は、画像の表示やコーディングでよくある質問をご紹介するので、あなたの参考にしてみてください！
- 画像が粗くなってしまったらどうする？
- width: 100%はどういう意味？
- HTMLのタグの覚え方は？
画像が粗くなってしまったらどうする？
画像が粗くなってしまうのですがどう対処したら良いでしょうか？
＞まずは、編集する前の画像データを確認し、調整するようにしてください。
というのも、画像が粗くなってしまう原因としては、小さいデータを無理やり大きくしてしまっている可能性が高いからですね。
元の画像サイズが小さすぎる場合は、修正することが難しい場合もあるので、他の画像を使用するようにしてください！
width: 100%はどういう意味？
width:100%の100パーセントとは、どういう意味でしょうか？
＞広さが１００パーセントというのは、PCやスマホスクリーンの幅を最大限使用していることを意味しています。
なので、あなたが確認している画面によって、画像の大きさが変わる相対的な設定ですね。
ちなみに、画像を２枚横に並べたい場合は、50%を設定すると良いです！
HTMLのタグの覚え方は？
HTMLのタグがなかなか覚えられないのですが、どうしたら良いでしょうか？
＞コーディングを学習するときに、無理やり暗記しようとするのはおすすめできないですね。
というのも、よく使用するタグは検索すればすぐに出てきますし、何度もアウトプットしていけば、自然と身につくからです。
ちなみに、よく使用するHTMLタグに関しては、以下の記事にもまとめているので参考にしてみてくださいね
まとめ
imgタグのwidthとheightを設定する意味と方法をお伝えしました。
ひまわりWebデザイナーは、ユーザー目線に立ったデザインを考えることもお仕事ですので、少し面倒くさくても必ず設定するようにしてください。
また、今回ご紹介した「シーライクス（SHElikes）」では、無料体験レッスンを行っています。
無料でシーライクスの体験ができますし、カウンセリングの時間であなたの悩みを質問することも可能です。
「コーディングの学習がなかなか進まない」、「デザインのレイアウトが合っているのかわからない」など、何か困っていることがあるなら、この機会に質問してみるのも良いですよね。
ひまわり無理な勧誘などもないので、良かったら参加してみてください！
私が実際に無料体験レッスンに参加した記事はこちら
