< !--Tradedoubler siteverification 3222025-- >

【HTML&CSS】『width』と『max-width』、『min-width』どう使い分けるの?

サイトに画像を表示させたいのですが、スマートフォン用に画面を小さくすると画像が見切れてします。

今回はPC画面でもスマートフォンの画面でも画像が見きれないように表示させることができるように『width』『min-width』『max-width』についてみていきましょう。

width

widthは幅を指定するプロパティです。

画像などの幅を指定する時に使います。

こちらの画像640pxなので特に何も指定しないとそのまま表示されます。

写真AC

作りたいサイトに合わせて500pxに表示させたいと思ったら、

img {

width:500px;

}

cssでこのように指定すると幅が500pxで表示されます。

※VS codeで入力する時はEmmet機能で「w500」と入力すると「width:500px:」と入力され便利です

画像が見切れる

この指定の場合が画面が大きいままで表示する時は良いのですが、スマートフォンで表示させようとすると画像が見切れてしまします。

画像見切れる

このような時は

max-widthを使う

img {

 width: 100%;

 max-width: 500px;

}

このように指定すると画面が小さくなっても要素が親要素より大きくなることはなく画像は見切れません。

そして画面が大きくなっても「max-width:500px;」を指定しているので画像が500pxより大きくなることもありません。

waxwidth

画像を中央にしたい

この画像が左に寄っていて気になりますが、この画像<img>に対して

「text-align:center;」や「margin:0 auto;」をかけても中央には配置されません。

「text-align:center;」は親要素にかける必要があるので<img>を<div>などで囲ってその親要素に「text-align:center;」をかけると画像が中央に寄ります。

min-width

画像を追加しました。

追加した画像がとても大きいので「width:50%;」に指定します。

画面サイズの50%になりました。

この画像をスマートフォン用に小さくすると画像もずっと小さくなってしまします。

そこで「min-width」で500pxより小さくならないように指定しました。

.dog2 img {

  width: 50%;

  min-width: 500px;

}

このように画面が小さくなっても画像は500pxより小さくならない。

dog

デベロッパーツールで見てみても幅は500px

**********

本当によく分かる1冊です。

created by Rinker
¥2,486 (2022/12/07 04:39:53時点 楽天市場調べ-詳細)

2冊目に選ぶならこちら

HTML &CSS

Posted by sweetchilli