CSS | width | 幅 | fromkato.net

widthはボックスの幅を指定するためのCSSプロパティです。 max-width、min-widthについても解説します。

ボックスの幅の指定にはwidth、ボックスの高さの指定にはheightを使います。

	幅	高さ
固定値	`width`	`height`
最大値	`max-width`	`max-height`
最小値	`min-width`	`min-height`

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    border:  4px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
    display: inline-block;   /* インライン・ブロック要素 */
}

実行結果初期状態

sample

`width`

.sampleクラスにwidthで幅を指定します。5rem、7rem、9remの実行結果を示します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    border:  4px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
    display: inline-block;   /* インライン・ブロック要素 */
}

CSS


.sample {
    width: 5rem;
}

実行結果5rem

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    border:  4px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
    display: inline-block;   /* インライン・ブロック要素 */
}

CSS


.sample {
    width: 7rem;
}

実行結果7rem

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    border:  4px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
    display: inline-block;   /* インライン・ブロック要素 */
}

CSS


.sample {
    width: 9rem;
}

実行結果9rem

sample

`%` 相対的な幅

%を使って(親要素に対して)相対的な幅を設定することができます。

親子関係のある要素を準備します。

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

実行結果初期状態

parent

child

まず、親要素.parentに絶対的な幅12remを設定します。

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    width: 12rem;
}

実行結果parent: 12rem

parent

child

その上で、子要素.childに相対的な幅100%、50%、10%を設定してみます。

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    width: 12rem;
}

.child {
    width: 100%;
}

実行結果child: 100%

parent

child

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    width: 12rem;
}

.child {
    width: 50%;
}

実行結果child: 50%

parent

child

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    width: 12rem;
}

.child {
    width: 10%;
}

実行結果child: 10%

parent

child

100%よりも大きい値を指定するとハミ出すことに注意してください。

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    width: 12rem;
}

.child {
    width: 120%;
}

実行結果child: 120%

parent

child

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    width: 12rem;
}

.child {
    width: 150%;
}

実行結果child: 150%

parent

child

`max-width`

max-widthプロパティでボックスの幅の最大値を指定できます。

親子関係のある要素を準備し、親要素.parentのmax-widthを8remに設定します。

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    max-width: 8rem;
}

実行結果parent - max - 8rem

parent

child

そのまま子要素の幅を広くします。親要素はmax-width以上にならないことが分かります。

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    max-width: 8rem;
}

.child {
    width: 4rem;
}

実行結果child - 4rem

parent

child

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    max-width: 8rem;
}

.child {
    width: 6rem;
}

実行結果child - 6rem

parent

child

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    max-width: 8rem;
}

.child {
    width: 8rem;
}

実行結果child - 8rem

parent

child

`min-width`

min-widthプロパティでボックスの幅の最小値を指定できます。

親子関係のある要素を準備し、親要素.parentのmin-widthを7remに設定します。

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    min-width: 7rem;
}

実行結果parent - min - 7rem

parent

child

そのまま子要素の幅を広くします。親要素はmin-width以下にならないことが分かります。

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    min-width: 7rem;
}

.child {
    width: 4rem;
}

実行結果child - 4rem

parent

child

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    min-width: 7rem;
}

.child {
    width: 6rem;
}

実行結果child - 6rem

parent

child

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    min-width: 7rem;
}

.child {
    width: 8rem;
}

実行結果child - 8rem

parent

child

子要素がハミ出す場合

下の結果のように子要素がハミ出す場合があります。

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    width: 12rem;
}

.child {
    width: 150%;
}

実行結果child: 150%

parent

child

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    max-width: 8rem;
}

.child {
    width: 8rem;
}

実行結果child - 8rem

parent

child

そのような場合、.parentクラスにoverflowプロパティを指定します。

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    width: 12rem;
}

.child {
    width: 150%;
}

CSS


.parent {
    overflow: auto;
}

実行結果auto

parent

child

HTML


<div class="parent">
    parent<br>
    <div class="child">
        child
    </div>
</div>

CSS


.parent {  border-color: red;  }
.child {   border-color: blue; }

div {
    border:  4px solid;    /* 境界線 */
    padding: 10px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
}

CSS


.parent {
    max-width: 8rem;
}

.child {
    width: 8rem;
}

CSS


.parent {
    overflow: hidden;
}

実行結果hidden

parent

child

width

% 相対的な幅

max-width

min-width

子要素がハミ出す場合

`width`

`%` 相対的な幅

`max-width`

`min-width`