menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

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

  • Labs

レスポンシブデザイン画像

こんにちは(・∀・)

今日は画像をレスポンシブデザインに対応させる方法について解説します。

レスポンシブデザインの画像

ネットを見ていると時々画像が画面からはみ出して表示されている時があります。横スクロールで見せる感じにしている場合は全然問題ないのですが、Webサイトをレスポンシブデザイン化したにも関わらず、画像のサイズまでは見落としていた、というサイトは時々見かけます。

Webサイトのレスポンシブデザイン化に合わせて画像もレスポンシブデザインに対応させる方法です。

可変サイズの画像の作り方

横幅1000pxの写真をWebサイトに表示させます。

レスポンシブデザイン画像

おっと、写真サイズが親要素より少し大きかったようです。このまま表示してしまうと画像が親要素からはみ出してしまい切れて表示されるか横スクロールバーが出てしまいます。しかしPhotoshopなどで写真のサイズは小さくしたくありません。ここは写真サイズはそのままでCSSの方で大きさを調整します。


p img {
  width: 700px;
}

CSSで画像サイズを指定しましたすると次のように表示されます。

レスポンシブデザイン画像

いい感じで画像が表示されました。

しかしブラウザのサイズを縮めてみてください。このままだと画面が小さくなるとまた親要素から写真はまたはみ出して切れて表示されてしまいます。

なのでここからが画像のレスポンシブデザイン化になります。

CSSで次のように指定してみます、すると...


p img {
  width: 100%;
}

レスポンシブデザイン画像

今度はブラウザのサイズを変更しても画像も一緒に可変になり表示されるようになりました。

画像の最大サイズや最小サイズを指定しつつ可変にしたい場合は...


p {
  max-width: 700px;
  min-width: 600px;
}
p img {
 width: 100%;
}

レスポンシブデザイン画像

CSSで親要素にmax-widthやmin-widthを指定するだけで最大幅・最小幅を固定幅にしつつ画像を可変にすることができます。


いかがでしたでしょうか、とっても簡単に画像をレスポンシブデザイン化することができましたね。画像の幅指定を固定ではなく%などの可変にするだけでレスポンシブデザイン化の完成です。

  • カテゴリー:Labs