HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

11章. 画像のレスポンシブ

      2017/04/04

画像をレスポンシブに対応させる

画像を使う方法としてimg要素またはbackground-imageプロパティを使用します。
今回は、下記のファイルを利用して、3つのパターンで解説をしていきます。
使用画像

レスポンシブ画像のサンプル

PCサイト:img要素 、スマホサイト:img要素の場合

PCサイト、スマホサイトともimg要素を使用する場合は、サイズの指定方法がポイントです。
width, heightプロパティの値「auto」をうまく使用していきます。
autoは、width, heightのどちらかにサイズ指定がある場合は、元画像のサイズから相対値で自動的に算出します。

width, heightどちらもautoの場合は変形されず画像の元サイズで表示されます。

下記は、PCサイトはpx指定、スマホサイトは%指定して、可変幅にした指定です。

PCサイト:background-image、スマホサイト:img要素の場合

PCサイトとスマホサイトで画像を切り替えたい場合に有効な方法です。
ポイントは、img要素をほかの要素でラップし、CSSで画像の表示を切り替えます。
下記は、PCサイトではdiv要素の背景画像を表示し、img要素を非表示にしています。
スマホサイトは、img要素に%指定をし、可変幅にしています。

PCサイト:background-image、スマホサイト:background-imageの場合

ポイントは、背景画像の高さをpadding-topで行うこととbackground-sizeを利用する点です。
高さは可変したいのですが、heightプロパティで%指定してもうまくいきません。
この場合、padding-topを利用することで解決することができます。
まず、「画像の高さ ÷ 画像の幅」で高さの相対値を出します。それを背景画像を指定した要素のpadding-topに%指定するだけです。
多少誤差が出るため、小数点を切り捨てるか少し小さい値で調整するとよいでしょう。
下記は、PCサイトは固定サイズで背景画像を指定し、スマホサイトは可変サイズで背景画像を指定した例です。PCサイトも可変にしたい場合は、スマホ同様、padding-topで相対値を指定するとよいでしょう。

 - レスポンシブサイト制作