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の書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

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

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

no image

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

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

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

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

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

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

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

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

no image

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

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

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

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

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

no image

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

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

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

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

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

最新記事

チャーさん

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

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

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