icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

この記事を書いた人

テックアカデミーマガジン編集部

モバイルファースト時代の昨今、WebページはスマホやタブレットやPC、様々な画面で見られています。

Webページに表示する画像も、ユーザーの画面に合わせて表示したいですよね。

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

目次

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

 

imgタグで画面幅に合わせて画像を表示

imgタグの画像表示では、サイズを指定しないと元の画像サイズがそのまま表示されます。

See the Pen Responsive 1 by TAKAYOSHI (@lspuwbkv)on CodePen.

 

ここで、CSSでimgタグに対して幅、width:100%;を指定しましょう。

すると、画面幅いっぱいに画像が表示されました。

See the Pen
Responsive 2
by TAKAYOSHI (@lspuwbkv)
on CodePen.

 

これだけで簡単にできる・・・ように見えますが、いくつか注意点があります。

しっかり理解して使いこなしてくださいね。

 

指定するのは幅だけ

では先ほどのコードで、CSSで高さを指定するとどうなるでしょうか。

See the Pen
Responsive3
by TAKAYOSHI (@lspuwbkv)
on CodePen.

 

このように、画像が伸びたように崩れてしまいます。

 

画像はそれぞれ、様々な四角形の形をしていますよね。

四角形の縦幅と横幅の比率のことを、アスペクト比と呼びます。

画像のサイズが変わっても、縦と横の比率が同じであれば画像は崩れませんね。

 

See the Pen
Responsive4
by TAKAYOSHI (@lspuwbkv)
on CodePen.

imgタグに幅だけ指定すると、アスペクト比を維持し崩れないように高さを調整してくれます。

幅も高さも指定してしまうと、画像のアスペクト比が崩れ、画像が伸びてしまうのです。

 

高さはあえて指定しないでおきましょう。

 

パーセント指定と親要素

先ほどは、幅に100%を指定しました。

パーセントは「基準の何倍か」を表す単位で、100%は基準の1倍、つまり基準と同じという意味です。

 

気を付けなければいけないのは、この「基準」は画像を囲っている親要素のサイズということです。

See the Pen
Responsive 5
by TAKAYOSHI (@lspuwbkv)
on CodePen.

 

画面サイズが基準ではありません。

間違えやすいので注意してくださいね。

画面幅に合わせて画像を表示するためには、親要素のサイズや位置も調整しましょう。

 

この2点に気を付ければ、画像を画面幅に合わせて表示できます。

 

background-imageで画面全体を覆う

画像表示には、imgタグだけではなく、CSSのbackgroundプロパティを使う方法もあるんです。

See the Pen
responsive 8
by TAKAYOSHI (@lspuwbkv)
on CodePen.

 

background-imageを使って、画面全体を覆うように画像を表示させてみました。

では、詳しく解説していきましょう。

 

画像領域に要素を作成

background-imageは、要素の背景に画像を表示するプロパティです。

まずは、画像を表示したい領域で要素を作成しましょう。

See the Pen
Responsive 6
by TAKAYOSHI (@lspuwbkv)
on CodePen.

今回はposition:absoluteを使って、画面全体を覆うようにしました。

 

画像を表示

background-imageプロパティに、urlで画像のパスを指定します。

imgタグのsrc属性と同様に、相対パスや絶対パスを記述できます。

See the Pen
responsive 7
by TAKAYOSHI (@lspuwbkv)
on CodePen.


要素の背景画像が表示されましたが、まだ画像が寄りすぎていますね。

 

画像の表示を調整

背景画像の調整には、いくつかのプロパティが用意されています。

background-position ➡画像の表示位置
background-size   ➡画像の表示サイズ

今回はこの2つを設定して、画像の表示を調整してみました。

See the Pen
responsive 8
by TAKAYOSHI (@lspuwbkv)
on CodePen.

背景画像のプロパティは他にもありますので、気になった方はこちらの記事もご覧ください。

background-imageを使うと、簡単に画像と文字を重ねることができます。

 

さらに応用すると、こんな背景画像の出し方もできます。

See the Pen
responsive hero
by TAKAYOSHI (@lspuwbkv)
on CodePen.

このようなインパクトのある画像で全体を覆い、その上にコンテンツを重ねるデザインをヒーローイメージと呼び、昨今トレンドのWebデザインスタイルです。

 

Webデザインの表現の幅が広がると、制作が楽しくなりますね。

ぜひ、みなさんも画像の出し方をマスターして、おしゃれなWebサイトを作ってみてください!

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

[PR] Webデザインで副業する方法とは

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!