HTMLで画像を画面サイズに合わせて表示する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLで画像を画面サイズに合わせて表示する方法について解説しています。最初に、width属性とheight属性による画像サイズ設定方法の基本をおさらいします。次に、様々な媒体に対応したレイアウトを実装するための手法を見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLで画像を画面サイズに合わせて表示する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

画像を画面サイズに合わせて表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLの画像サイズの設定方法(width、height属性の設定方法)

 htmlの画像サイズを指定する場合にはimg要素の中にwidth(横幅)属性とheight(縦幅)属性を記述することで任意のサイズに指定することが出来ます。
src属性で表示する画像の場所を指定し、widthに横幅の大きさ、heightに縦幅の大きさ、altに画像が表示されなかった場合のテキストを記述していきます。
width=”100″とした場合には画像の横幅を100ピクセルで指定したことになります。widthとheightは指定しなくても表示は可能ですが、任意の表示にしたい場合には記述を入れることが必要になります。

 

画像のレイアウトが崩れる原因

レイアウトが崩れる原因はいくつか考えられますが、画像サイズを指定する際にピクセル(px)の単位を用いている場合があります。pxでサイズを指定した場合には、大きな画面サイズので表示する場合と小さなスマホのような画面サイズの表示する場合とで同じように指定していることになります。
どの画面でも同じサイズで表示したい場合には有効ですが、レイアウトが崩れるかもしれないことを考慮し、親要素のレイアウト組みも検討しておく必要がります。
スマホサイズの画面で丁度良い大きさの画像を複数枚を縦に表示しているつもりが、大きな画面サイズで表示した場合には横に並んでしまうなどのレイアウトくずれが発生します。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

解決方法

画像を表示画面に合わせて大きさを変えたい場合にはサイズの単位をpxではなく、%を用いて記述します。横幅を100%とした画面にwidth=”50%”の画像を用意した場合は丁度画面の半分サイズの横幅で表示されることになります。
ほかにもvwを単位として使用することも出来ます。こちらも%と同じように表示画面に対する割合で使用することが出来ますが、違う点としては親要素に影響されずに常に表示画像の大きさに対する割合で指定す流ことができます。
%は親要素がサイズ指定されているボックスの場合にはそのボックスの中の割合として表示されることになります。
他にはoverflowを使用する方法があります。
親要素のボックスなどに縦横のサイズを指定し、overflow:autoとすることで大きな画面サイズの場合には任意の表示でサイズされますが、小さな画面サイズの場合には親要素のボックスサイズからはみ出る部分はスクロールをして見ることが出来るようになります。
背景画像などには向かないですが、画像の詳細まで見て欲しい場合には有効な方法として利用できます。

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。