max-width、min-width、widthの解除方法･初期値

widthは要素の幅、max-widthは最大幅、min-widthは最小幅、heightは要素の高さ、max-heightは最大の高さ、min-heightは最小の高さを指定するCSSです。

「スマホになったときwidthを解除・初期化したい！」

width,max-width,min-width,height,max-height,min-heightの解除方法･初期値を解説します。

【解除方法1】初期値を指定する

解除、つまりブラウザの初期値にするには初期値を指定してしまえばいいのです。

各CSSの初期値は以下の通りです。

値が違うため間違わないようにしましょう。

幅、高さを指定しないなら、自動「auto」です。

最大値を設定しないなら、なし「none」です。

最小値を指定しないなら、自動「auto」です。または「0」でもいいでしょう。

最小値については初期値を「none」「auto」「0」と紹介している場合があります。

まず「none」はありません。効きませんでした。「auto」は効きました。

「auto」か「0」か判断が難しいところですが、結果は同じであるためどちらを設定してもいいでしょう。

「ところでwidthはどうせ幅いっぱいになるなら100%でもよくない？」

width:autoと100%の違いについても解説します。

width:autoと100%の違い

tableやinline-blockの場合

tableやinline-blockの場合、autoにすると内容に応じて最小サイズになります。

表

table

<style>
.example2{
    width: auto;
}
</style>
<table class="example2" border="1">
    <tr>
        <td>表</td>
        <td>table</td>
    </tr>
</table>

100%だと最大サイズになります。

表

table

<style>
.example3{
    width: 100%;
}
</style>
<table class="example3" border="1">
    <tr>
        <td>表</td>
        <td>table</td>
    </tr>
</table>

divなどのブロック要素の場合

では、divなどのブロック要素ではautoと100%は同じでしょうか？

実は少し違います。

widthにはpaddingとborderのサイズは含まれません。

width:100%にしてしまうとpaddingとborderの分、はみ出してしまいます。

<style>
.example4{
    width: 80%;
    background: #CCC;
    border: 1px solid #999;
    margin: 10px;
}
.example4>div{
    /*コレ*/width: 100%;
    background: #f2f2f2;
    border: 1px solid #000;
    padding: 20px;
}
</style>
<div class="example4">外側
    <div>100%指定</div>
</div>

width:autoだと自動でpaddingとborderを除いた幅になります。

<style>
.example5{
    width: 80%;
    background: #CCC;
    border: 1px solid #999;
    margin: 10px;
}
.example5>div{
    /*コレ*/width: auto;
    background: #f2f2f2;
    border: 1px solid #000;
    padding: 20px;
}
</style>
<div class="example5">外側
    <div>auto指定</div>
</div>

なお、box-sizing:border-boxを指定するとpaddingとborderのサイズをwidthに含めることができるようになるためwidth:100%でもはみ出さなくなります。

<style>
.example6{
    width: 80%;
    background: #CCC;
    border: 1px solid #999;
    margin: 10px;
}
.example6>div{
    /*コレ*/width: 100%;
    /*コレ*/box-sizing: border-box;
    background: #f2f2f2;
    border: 1px solid #000;
    padding: 20px;
}
</style>
<div class="example6">外側
    <div>box-sizing: border-box</div>
</div>

【解除方法2】initialを指定（IEで効かない）

「initial」はすべてのCSSに指定できる値で、そのCSSを解除・初期値にする値です。

下記のように使います。

<style>
.example{
    width: initial;
    max-width: initial;
    min-width: initial;
}
</style>

ただし、IEではinitialが効きません。

IEを無視できる場合に利用しましょう。

【まとめ】width,max-width,min-widthの解除方法･初期値

解除方法

1. 初期値を指定
2. initialを指定

initialはIEで効かないため初期値の指定が無難です。

初期値

以上、width,max-width,min-width,height,max-height,min-heightの解除方法･初期値について解説しました。