HTMLでウィンドウ幅に合わせて画像サイズを自動で調整する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでウィンドウ幅に合わせて画像サイズを自動で調整する方法について解説しています。PCやスマートフォン、タブレットなどの媒体それぞれに対応して画像サイズを調整させる場合にはCSSで設定を行います。サンプルで画面上での表示を確認しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

ウィンドウ幅に合わせて画像サイズを自動で調整する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

画面の横幅に応じて画像サイズを調整する方法

画像を表示するimgタグに、以下のCSSを設定します。vw(Viewport Width)というCSS3から追加された単位を使うことにより、画面の横幅に応じた比率で、画像の縦横比も維持しながら調整可能です。

CSS書式

width : 50vw ; /* 画面幅の50% */

 

レスポンシブデザインへの対応

多様な画面サイズのスマートフォンや、PCの大画面など、ユーザー環境に合わせて画像を自動調整して表示できるのが
レスポンシブデザインです。先ほどのvw(Viewport Width)という単位はレスポンシブ対応で、幅広いユーザー環境に対応することができます。

画像の場合はwidthに%を指定する方法でもレスポンシブ対応となりますが、%は親要素の幅に対する比率であるため、vwとは用途が異なります。vwの場合は親要素に関わらず画面幅に応じた比率で画像サイズが調整される点に留意してください。

 

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

画面の横幅に応じて画像サイズを自動で調整してみよう

実際に動作可能なソースコードをご紹介します。非常に簡単で、事前に用意したCSSをimgタグに付与するだけです。

CSS

/* 画面幅の50%の幅で画像を表示 */
image-vw {
  width : 50vw ; 
}

HTML

<img src="/img/sampleImg.jpg" class="image-vw">

サイズ調整方法

widthの数値を100以内で調整するだけです。簡単ですね。

 

まとめ

画像にvw単位のwidthを指定するだけで、レスポンシブな画像表示ができるようになります。非常に簡単ですので、vwを使ったレスポンシブ対応コードを試してみてください。

 

監修してくれたメンター

寺谷文宏

WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAchademyではフロントエンド、Javaコースを担当。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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