Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css cssでレスポンシブ 画像

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

投稿日:

Pocket

 

どうも、チャーさんです。

 

あなたは画像をレスポンシブ対応にしたい、

そう思っていませんか?

 

ブレイクポイント毎に、画像の幅を指定するのは、

もう疲れた、何か一発でレスポンシブになる、

簡単な方法はないかなぁ?と思っていませんか。

 

 

この記事では、

たった1行追加するだけで、

画像がレスポンシブ対応になる方法をお話しします。

 

ブレイクポイントごとに幅を指定する手間は、

一切いらない方法なので、レスポンシブ対応の画像に、

したい場合はこのまま下にスクロールして読んでみてください。

 

スポンサードサーチ

レスポンシブ対応の画像にするコードはこれ

 

で、結論ですが、

 

画像をレスポンシブ対応するために、

一番簡単のは、

max-width:100%;を指定することです。

 

 

max-width:とは画面のサイズに合わせて、

画像のサイズを変えてくれるcssの機能です。

 

なので、これをつけると、

画面サイズを変えた時に、画像サイズも自動で変わり、

レスポンシブ対応になるのです。

 

と言うことで、早速具体例をみてみましょう。

 

 

今この画像の画面サイズは1000px以上です。(パソコンサイズ)

 

もうつけてますが、

これにmax-width:100%をつけて、

スマホサイズまで小さくしてみましょう。

 

すると、以下の画像のようになります。

 

 

スマホ並みに画面サイズを小さくしても、

画像が同時に小さくなって、

いい感じに表示されてますね。

 

こんな風に、

max-width:100%を指定しとけば、

画像がレスポンシブ対応になります。

 

max-widthを使うメリット

 

で、max-widthを使う利点は、

手間がなくて簡単な点です。

 

例えばレスポンシブ対応にするなら、

他にもブレイクポイントごとに、

widthを指定するという方法もあります。

 

しかし、それは非常に面倒です。

 

 

なぜなら画像数が増えてくると、

それだけwidthの幅指定が増えて大変だからです。

 

しかし、max-width:100%をつけておけば、

どんな画面サイズになろうと、

自動的に画像サイズを調整してくれるので楽です。

 

これなら画像が増えても、

max-widthを1行つけとくだけです。

 

 

そしたらブレイクポイント毎に幅を設定する手間も、

不要なので、レスポンシブにする場合は、

max-width:つけておけば、とりあえずokでしょう。

 

スポンサードサーチ

レスポンシブ対応するならwidthの幅指定は極力避けること

 

また、画像をレスポンシブ対応にするときは、

widthで幅指定をするのを出来るだけやめましょう。

 

なぜなら、widthを指定すると、

画面サイズがwidthで指定した数値より下になると、

画像が切れてしまうからです。

 

以下の画像のように。

 

 

なので、レスポンシブ対応にする際は、

画像は極力widthを指定するのはやめておいて、

max-widthをつけてレスポンシブにするようにしましょう。

 

レスポンシブでもwidthを使ってもokな場合

 

ちなみにレスポンシブでも、

widthで幅指定しても大丈夫なのは、

幅が小さい時です。

 

例えば100pxとか。

 

なぜなら画面サイズが100px切ることは、

スマホでもないので、

こう言う場合は、widthでやってもいけます。

 

 

max-widthをつけると、

画面サイズが小さくなる毎に、

画像も小さくなります。

 

なので、そうしたくない場合は、

widthで幅指定するといいでしょう。

(幅が小さい時に限る)

 

スポンサードサーチ

レスポンシブ対応の画像にする手順

 

では、どうやって、画像をレスポンシブ対応にするか、

手順を書いておきます。

 

まずはimgタグで画像を表示します。

 

次に、画像を表示させたら、

画像にmax-widthをつけましょう。

 

画像なのでimgタグにmax-widthをつけましょう。

 

上の画像のように。

 

そうすればレスポンシブ対応の画像に、

なってくれます。

 

 

そしてここまでやったら、

一度クローム上で表示させて、

画面サイズを動かしてみましょう。

 

ちゃんと画像も画面サイズに合わせて、

小さくなったり大きくなったりすれば、

okです。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

画像をレスポンシブ対応にしたい場合は、

max-width:100%を使いましょう。

 

 

これをつけるだけで、

簡単にレスポンシブ対応の画像になります。

 

widthでいちいち指定してた苦行から解放されます。

 

 

さて、それでは早速ですが、

あなたのパソコンでエディターを開き、

画像にmax-width:100%をつけてみましょう。

 

そして実際に画面サイズを動かして、

挙動をみてみてください。

 

そうすれば、あなたのデザイン力は上がります。

そして効率的に制作できるようになりますし、

もっと楽しくweb制作できるようになります。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

 

 

 

-css, cssでレスポンシブ, 画像

スポンサードサーチ

関連記事

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssの効率的な学習方法を知りたいなら読んでください。

  どうも、チャーさんです。   あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記 …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。