ホームページの画像をスマホ対応する方法まとめ【HTML・CSS】

こんにちは！hgmです。

先日、高校のプチ同窓会があり、久しぶりに同級生達と再会しました。

仕事の業種は様々で、同級生から仕事の話を聞くのが新鮮でしたが

全員相変わらずの個性の強さで、一瞬高校生に戻ったようでとても楽しい時間を過ごせました。

———————–

さて、今回はホームページの画像をスマホ対応（レスポンシブ対応）する方法についてまとめていきたいと思います。

最近のスマートフォンはRetinaや有機ディスプレイ搭載は当たり前で解像度の高いものが多いため、パソコンで使用している画像をスマートフォンでもそのまま使用してしまうと、元々サイズの小さな画像は画質が悪くなってしまう場合があります。

大きな画像、小さな画像別に対応方法を調べましたので、ご紹介します。

メインビジュアルなどの大きな画像の対応方法

最近のメインビジュアル（メインの画像）はサイズが大きなものが多いですが、いざスマートフォンでそのまま使用すると画像の文字が小さくなって見づらくなるため、スマートフォン用の画像を準備する必要がある場合があります。

その切り替え方法を2つご紹介させていただきます。

1.HTMLで切り替える方法

スマートフォン用の画像を準備し、

imgタグの記載をする部分に、以下の記載をすることで切り替えられます。

<picture>
  <source media="(max-width: 767px)" srcset="img/main_sp.jpg"> <!-- スマートフォン画像 -->
  <source media="(min-width: 768px)" srcset="img/main_pc.jpg"> <!-- パソコン画像 -->
  <img src="img/main_pc.jpg" alt=""> <!-- パソコン画像 -->
</picture>

ウィンドウサイズが767px以下のとき、スマートフォンの画像を表示します。

2.CSSで切り替える方法

スマートフォン用の画像を準備し、

HTMLではimgタグをパソコン用・スマートフォン用に2つ用意し、それぞれにクラスを付与します。

<img class="pc" src="img/main_pc.jpg" alt=""> <!-- パソコン画像 -->
<img class="sp" src="img/main_sp.jpg" alt=""> <!-- スマートフォン画像 -->

CSSでは、以下の記載をします。

.pc{
  display: block;
}
.sp{
  display: none;
}

@media only screen and (max-width: 767px){
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
}

パソコン表示の際は、display: none; でスマートフォン用の画像は非表示にしておき、

ウィンドウサイズが767px以下になったら、display: block; でスマートフォンの画像を表示します。

逆に、パソコンの画像はdisplay: none; で非表示にします。

ロゴや小さな画像の対応方法

ロゴや、アイコンなどのサイズが変わらない小さな画像は下記の方法がオススメです。

<img src="img/logo.png" srcset="img/logo.png 1x, img/logo_2x.png 2x" alt="">

通常のサイズの画像と、通常のサイズの2倍の画像を準備し、srcset属性で1x（通常）、2x（2倍）のパスを指定します。

端末に合わせて自動で最適な画質のものを表示してくれます。

背景画像の対応方法

私自身、背景画像はあまり気にしていませんでしたが、パソコンの背景画像をそのまま使用していると意外とボケていたりします。

背景画像は通常の倍の大きさで画像作成し調整するか、スマートフォン用に画像を作成する方法が良さそうです。

1.背景画像を倍の大きさで作成し、調整する

/* pxで指定 */
background-size: 200px auto;

/* %で指定 */
background-size: 50% auto;

/* coverで指定 */
background-size: cover;

/* containで指定 */
background-size: contain;

％指定の場合、画像サイズではなく画面サイズの％指定になるので注意が必要です。

2.スマートフォン用画像を作成し、切り替える

.bg{
  background: url(img/bg.jpg) no-repeat;
}

@media only screen and (max-width: 767px){
  background: url(img/bg_sp.jpg) no-repeat;
}

ウィンドウサイズが767px以下のとき、スマートフォン用の背景画像が表示されます。

まとめ

目的別にスマートフォン時の画像対応をご紹介しました。

HTML・CSSで様々な対応方法があるので、紹介した他にももっと便利な使い方があるかもしれませんね！

なお画質のみの問題であれば、SVGで作成した画像であれば個別に対応する必要がないため、うまく使えると今回のような手間も省けます。

SVG画像の作成方法も後日まとめますね！