menu
menu

キーワード検索

 

2月更新・前月(1月)の人気記事トップ10 - 02/02/2021

  1. ( 1 − ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 5 ↑) 【Mac】Safariでソースコードを見る方法
  3. ( 4 ↑) 【CSS】CSSだけでドロップダウンメニュー
  4. ( 6 ↑) 【iPhone iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
  5. ( 3 ↓) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. ( 7 ↑) 【Mac】MacにGoogle Driveをインストール
  7. ( 8 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 2 ↓) 【2020年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️
  9. ( 9 − ) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  10. (10 − ) 【jQuery】入門5. jQueryで日時を表示

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

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

こんにちは(・∀・)

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

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

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

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

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

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

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

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


p img {
  width: 700px;
}

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

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

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

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

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

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


p img {
  width: 100%;
}

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

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

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


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

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

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


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

 

にほんブログ村 デザインブログ Webデザインへ
  • CSS レスポンシブデザイン