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

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

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

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

no image

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

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

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

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

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

最新記事

チャーさん

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

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

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