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で背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

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

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

no image

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

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

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

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

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

no image

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

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

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

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

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

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

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

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

最新記事

チャーさん

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

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

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