ホーム(記事一覧)へ

CSSのwidthの解除方法・初期値、autoと100%の違い

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

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

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

【解除方法1】width:auto、max-width:none

widthの解除方法・初期値はautoです。

一方、max-width,min-widthの解除方法・初期値はnoneです。

間違わないようにしましょう。

下記のように指定します。

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

「でも、どうせ幅いっぱいになるなら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の分、はみ出してしまいます。

外側
100%指定
<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を除いた幅になります。

外側
auto指定
<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%でもはみ出さなくなります。

外側
box-sizing: border-box
<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. width:auto、max-width:noneを指定
  2. initialを指定

initialはIEで効かないのでautoが無難です。

100%を指定する場合はbox-sizing:border-boxを指定しましょう。

以上、width,max-width,min-widthの解除方法・初期値、width:autoと100%の違いについて解説しました。

関連記事