css

max-widthとmin-widthの違いについてわかりやすく説明します

投稿日:2020年3月7日 更新日:

Pocket

 

あなたはmax-widthとmin-widthの

違いについて疑問を持ってますか?

 

この記事では、max-widthとmin-width

の違いを説明してるので、これを読めば、

あなたの疑問はさっぱり解決するでしょう。

 

両者の違いがしっかりわかるように

なるので、max-widthとmin-widthの

違いがわからねぇ、、という場合は読んでみてください。

 

スポンサードサーチ

max-widthとmin-widthの違いとは

 

ということで結論ですが、

max-widthとmin-widthの違いは、

幅の上限値と下限値の設定という違いです。

 

このままだと簡潔過ぎなので、

例を出しながら説明します。

 

max-widthとは

 

まずmax-widthとは、幅の上限値を決めるための

ものです。

 

例えばdivなどにmax-widthを300pxと

設定したら、そのdivの幅は300px以上

広がらないという意味です。

 

言葉だけだとわかりづらいと思うので、

実際にコードとブラウザで挙動を見せますと、

 

max-widhtを設定した場合

 

こんな風に、途中でテキストが折り返されて

ますよね。

 

これはdivにmax-width:300pxと

してるので、divの幅が300px以上

広がれないからです。

 

 

本来widthを何も設定しなければ、

テキストは横に広がっていくだけですが、

max-widthを設定してやると、

 

このように要素の幅の上限を設定できます。

 

なので、webページを作る際、

これ以上コンテンツが広がって欲しくない、

などの時に設定しとくと収まってくれます。

 

 

ちなみにmax-widthはレスポンシブにも

向いてまして、普通にwidth:500pxなどとすると、

画面サイズを小さくしたら途中で切れます。

 

しかし、max-widthの場合は、

同じく500pxと設定したとしても

画面サイズが500px以下になったら、

 

それに合わせて幅が小さくなってくれます。

 

 

話が少しそれますが↑を読むまで、

 

あなたはもしかしたら、max-widthなんてwidthと変わらない

じゃないかと思ったかもしれませんが、

画面サイズによる挙動が違うので、ここチェックしときましょう。

 

 

なのでレスポンシブにしても、

デザインが崩れないので使い勝手が良いですよ。

 

min-widthとは

 

で、次にmin-widthですが、

こちらは、max-widthとは違って、

最低の幅を決めます。

 

最低の幅とはつまり、

コンテンツがどんなに足りなくても、

最低限この幅は確保するという意味です。

 

またはこれ以上は小さくならないという意味になります。

(下限を設定できるということです。)

 

 

例えばdivにmin-width:300pxと書いとくと、

コンテンツが少なくても

幅を最低限300pxぶん確保してくれます。

 

min-widthの場合

 

web制作に便利なflexなどを使うと、

本来は以下の画像のように

テキスト分のサイズしか確保されないところですが、

 

 

min-widthをつけとけば、

指定した値分コンテンツの量に関わらず、

ちゃんと幅が確保されるということです。

 

 

なので違う言い方をすれば、

決めたサイズ以上は小さくならない

という動きをするので、

 

コンテンツの量が少ないが、

幅は確保したいという場合には、

min-widthを使うと実現できるでしょう。

 

 

で、またmin-widthは、widthや

max-widthと違ってコンテンツの量が

増えれば、どんどん幅が伸びるので、

 

そこも合わせて知っとくといいと思います。

 

 

スポンサードサーチ

まとめ

 

ということでまとめます。

 

max-widthとmin-widthですが、

違いは上限値を決めるか最低幅を決めるか

というものです。

 

 

これらは普通のwidthの指定とは違って、

webページを作る上で、便利に使えるので

ぜひ動きの仕組みを理解して使ってみましょう。

 

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

 

チャーさん

-css


スポンサードサーチ

関連記事

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

cssで画像を丸くする方法「15秒以内にできます」

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

no image

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

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

no image

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

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

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

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

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

no image

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

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

no image

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

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

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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