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の書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

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

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

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

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

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

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

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

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

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

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

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

no image

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

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

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

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

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

最新記事

チャーさん

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

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

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