menu
menu

キーワード検索

 

1月更新・前月(12月)の人気記事トップ10 - 01/03/2020

  1. ( 1 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 3 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  3. ( 5 ↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  4. ( 4 - ) 【CSS】CSSだけでドロップダウンメニュー
  5. ( 2 ↓) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. (圏外↑) 【Mac】Safariでソースコードを見る方法
  7. (圏外↑) 【Mac】iMovieの保存場所を変更する
  8. (圏外↑) 【制作Tips】iPhone画面解像度まとめ
  9. ( 7 ↓) 【Google】Googleアカウントのメールアドレスを変更する方法
  10. (圏外↑) 【制作Tips】画面解像度一覧表
このエントリーをはてなブックマークに追加

【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を指定するだけで最大幅・最小幅を固定幅にしつつ画像を可変にすることができます。


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

  • CSS レスポンシブデザイン
このエントリーをはてなブックマークに追加