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

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で追随させる方法、スクロールしてもついてくるよ

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

no image

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

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

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

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

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

no image

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

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

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

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

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

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

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

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

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

最新記事

チャーさん

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

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

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