Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

【CSS】max-height・min-height・max-width・min-width

はじめに

CSSの必須プロパティであるheightwidth
便利ですが、幅と高さを固定したくない場合(幅と高さを内部の要素の内容によって柔軟に変えたい場合)には不便です。
かといって幅と高さを全く指定していないと、思っていたよりもサイズが小さくなってしまったり、大きくなってしまったりといった不具合が生じる場合があります。

そんな時に便利なのが、
max-height,min-height,max-width,min-width です!
見ての通りheightwidthの前方にmax-min-をつけてあげるだけなので、とても覚えやすいですね。

max- あるいは min-を前方につけることで
セレクタのサイズは固定しないけれども、サイズの最大値あるいは最小値は設定することができます。

使い方

単位はpxでも%でもremでも設定できます。
これは通常のheightやwidthと同じですね!
そして設定の仕方は以下の通りです。
test1クラス〜test4クラスごとにmax-height,min-height,max-width,min-widthをそれぞれ設定しました。

test.html
<div class = "container">
  <div class = "test1">
    高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。
  </div>
  <div class = "test2">
    高さの最低値を指定。
  </div>
  <div class = "test3">
    幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。
  </div>
  <div class = "test4">
    幅の最低値を指定。
  </div>
</div>

test.css
.container {
  display: flex;
}
.test1 {
  width: 100px;
  max-height: 300px;
  background-color: yellow;
  margin-right: 20px;
 }
 .test2 {
  width: 100px;
  min-height: 300px;
  background-color: skyblue;
  margin-right: 20px;
 }
 .test3 {
  height: 100px;
  max-width: 300px;
  background-color: salmon;
  margin-right: 20px;
 }
 .test4 {
  height: 100px;
  min-width: 200px;
  background-color: lightgreen;
  margin-right: 20px;
 }

そしてそれぞれの結果がこちらです!
image.png

max-をつけると、クラス内の要素に関係なく、div要素自体の幅あるいは高さは設定した最大値で表示されています。
min-をつけると、クラス内の要素が少なくても、div要素自体の幅あるいは高さは設定した最小値で表示されています。

さいごに

うまく活用すればとても便利な機能ですね!
最後までご覧いただきありがとうございました!:relaxed:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What are the problem?