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

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

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

no image

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

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

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

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

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

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

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

no image

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

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

no image

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

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

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

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

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

no image

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

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

no image

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

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

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

最新記事

チャーさん

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

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

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