webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

画像をレスポンシブに対応させる(可変にする)

画像をレスポンシブに対応させる為にはたった2種類のやり方しかありません。

img画像であればフルードイメージ化させる。

background画像であれば、background-sizeの指定をする。


この2種類の使い方と特徴を覚えれば、画像に関しては問題なくレスポンシブに対応させる事が出来ます。
どちらの方法を用いれば良いかは、文章構造から考えてその画像が「imgタグ」で入れるべきなのか、背景画像として入れるべきなのかを考えれば良いだけです。

ポイントとしては、
「img要素」で入れた場合にはフルードイメージ化させる為、画像の原寸より大きく表示される事はありません。
また画像の縦横比も保ってくれる為、幅を縮めると同じ比率で高さも小さくなって行きます。なので基本的には高さの設定はしなくても良い場合がほとんどです。


これに比べ「background-size」を指定した背景画像は指定に寄っては原寸より大きく表示される事があります。
また、背景画像を表示させる為には必要な高さを確保する必要がある為、高さの指定をどうするか、という事が問題になって来ます。
授業では高さを%指定すると不安定になるので、代わりにpaddingで画像の高さ分を確保するという方法を取りました。
「background-size」を指定した物は%指定はもちろん、pxでも1px単位で表示の大きさをコントロール出来る為、こちらの方が便利な場合もあります。

画像のフルードイメージ化

img要素で見せる画像は重要度が高いため、必ず綺麗に見せる必要があります。その為絶対に原寸(100%)以上拡大して表示させるのはNGなので「max-width: 100%」という指定をします。

img {
  max-width: 100%;
}
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像を可変にする2つの方法</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<header>

</header>
<div id="content">
<p>テキストテキストテキスト</p>
</div>
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,header,p {
  margin:0;
  padding:0;
}
img {
  border:none;
  vertical-align:bottom;
}

#container {
  max-width:960px;/*最大で960px*/
  margin:0 auto;
}
header {
  max-width:960px;
  padding-bottom:41.66%;/*高さの代わりにpaddingで背景画像の領域を確保*/
  background:#CC3399 url(img/img.png) no-repeat center/cover;
}
#content {
  max-width:960px;
  height:500px;
  background:#009966;
}
#content p {
  text-align:center;
  font-size:40px;
  padding-top:40px;
}
img {
  max-width: 100%;/*フルードイメージ*/
}