知ってますか?画像サイズを親要素の横幅に収まるように可変させる最も簡単な方法
  • 知ってますか?画像サイズを親要素の横幅に収まるように可変させる最も簡単な方法
  • 記事公開:2018/05/16
  • 最終更新:2018/05/19

知ってますか?画像サイズを親要素の横幅に収まるように可変させる最も簡単な方法

レスポンシブデザインでは必須!親要素に画像が収まるようにする方法 レスポンシブデザインでサイトを構築するとき、 ...

この記事は約 2 分で読めます。

更新が面倒なHTMLサイトお持ちではありませんか?

ADhttp://wordpress-supporters.com/wordpress-ka/

そのサイト、Wordpressを導入して更新しやすくしちゃいましょう!
Wordpress請負人なら、既存サイトでもWordpress化することが可能です。
見積もり無料、実績100件以上、サポート充実、再現性バツグン。

レスポンシブデザインでは必須!親要素に画像が収まるようにする方法

レスポンシブデザインでサイトを構築するとき、必ず必要になってくるのが、親要素に合わせた画像の拡大縮小処理です。

レスポンシブデザインでは、要素がデバイス内に収まるようにしなければなりません。
当然、画像も含まれます。

画像を親要素に合わせて拡大縮小させるのは簡単で、CSSのみで対応可能です。

以下を追記してやればOKです。

img {
max-width: 100%;
height: auto;
width /***/:auto;
}

上記をCSSファイルに追記してやれば、親要素の横幅に合わせて画像が拡大縮小されます。
画像の元サイズ以上には拡大されません。

上記をCSSに追記した場合、サイト内の全ての画像に適応されます。
一部の画像のみに適応したい場合は、以下の様にCSSを調整してください。

#test img {
max-width: 100%;
height: auto;
width /***/:auto;
}

上記の場合、<div id=”test”>~</div>の中にある画像のみに適応されます。

.test-img {
max-width: 100%;
height: auto;
width /***/:auto;
}

上記の場合【class=”test-img”】が設定されている画像のみに適応されます。

試してみてください。

まとめ

レスポンシブデザインでは必須となる、親要素に画像が収まるようにする方法をご紹介しました。

CSSに4行追記するだけで、親要素に画像が収まるようになります。
この機会にやり方を覚えてはいかがでしょうか?

更新が面倒なHTMLサイトお持ちではありませんか?

ADhttp://wordpress-supporters.com/wordpress-ka/

そのサイト、Wordpressを導入して更新しやすくしちゃいましょう!
Wordpress請負人なら、既存サイトでもWordpress化することが可能です。
見積もり無料、実績100件以上、サポート充実、再現性バツグン。

この記事が気に入ったら【いいね】しよう!

あなたのWEBサイトをWordpressで
管理できるようにしませんか?

あなたのWEBサイトを見た目そのままでWordpress化いたします。
以下に興味のある方は、お気軽にご相談下さい。

  • あなたのWEBサイトを、Wordpressで運営できる様にいたします。ページの編集や追加も簡単に行えるようになります。
  • どの様な形式のサイト(例えば、アメブロ、MTサイトなど)でもWordPress化いたします。
  • Wordpress化でサイトのデザインが崩れるなどの心配は必要ありません。デザインもサイト構成もほぼ変わらない、高い再現率が自慢です。
  • 単にWordpress化するだけではありません。デザイン変更など+αの作業にも対応することも可能です。
  • 他案件との兼ね合いもありますが、最短即日であなたのサイトをWordpress化いたします。
  • 初心者でもWordpressが使えるよう、納品後に徹底的な操作サポートをご提供いたします。Wordpress化したけど操作できないと、あなたが頭を抱えることはありません。

興味のある方は、以下のリンクからチェックしてみてください。

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2018-05-17

    レスポンシブデザインでテーブルを横スクロールさせる方法

    レスポンシブデザインでテーブルを横スクロールさせる機会が多い レスポンシブデザインでサイトを構築していると、ス ... 記事を読む

  • 2015-11-09

    バナー広告をPHPでランダムに表示する方法

    バナー広告をPHPでランダムに表示させる方法を解説しています。サイドバーなどの広告をランダムに切り替えてみたい方は参考にしてください。3分後にはバナー広告をランダムに切り替えることができるにようになっています。 記事を読む

  • 2015-10-01

    ハイクオリティ!お金を出す価値のある有料素材配布サイトを12個まとめてみた

    WEBデザインに欠かせない有料素材の販売サイトをまとめてみました。WEBサイトの制作を行うに当たって、有料素材の購入は避けては通れません。参考にしてください。 記事を読む

  • 2016-02-14

    CSSだけでHTMLのbrタグを無効にする方法

    CSSだけでHTMLのbrタグを無効にする方法をご紹介します。レスポンシブサイトなど、スマホ表示の場合のみbrタグを削除したい場合など重宝します。1分で理解できる無いようですので、サクッと身につけてしまいましょう。 記事を読む

  • 2015-03-31

    たったの3分!WEBサイトの背景に動画を敷く方法

    とある案件でWEBサイトの背景に動画を敷く機会がありました。この機会に動画を背景に敷く方法と、動画背景を実装するときの注意点を分かりやすくまとめてみました。動画背景の実装をご検討中の方、参考にしてください。 記事を読む

コメントを残す


(必須)