CSS | height | 高さ | fromkato.net

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

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

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

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

HTML


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

CSS


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

実行結果初期状態

sample

`height`

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

HTML


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

CSS


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

CSS


.sample {
    height: 5rem;
}

実行結果5rem

sample

HTML


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

CSS


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

CSS


.sample {
    height: 7rem;
}

実行結果7rem

sample

HTML


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

CSS


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

CSS


.sample {
    height: 9rem;
}

実行結果9rem

sample

`%` 相対的な高さ

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

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

HTML


<div class="parent">
    parent
    <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に絶対的な高さ10remを設定します。

HTML


<div class="parent">
    parent
    <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 {
    height: 10rem;
}

実行結果parent: 10rem

parent

child

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

HTML


<div class="parent">
    parent
    <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 {
    height: 10rem;
}

.child {
    height: 100%;
}

実行結果child: 100%

parent

child

HTML


<div class="parent">
    parent
    <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 {
    height: 10rem;
}

.child {
    height: 50%;
}

実行結果child: 50%

parent

child

HTML


<div class="parent">
    parent
    <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 {
    height: 10rem;
}

.child {
    height: 10%;
}

実行結果child: 10%

parent

child

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

HTML


<div class="parent">
    parent
    <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 {
    height: 10rem;
}

.child {
    height: 120%;
}

実行結果child: 120%

parent

child

HTML


<div class="parent">
    parent
    <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 {
    height: 10rem;
}

.child {
    height: 150%;
}

実行結果child: 150%

parent

child

`max-height`

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

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

HTML


<div class="parent">
    parent
    <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-height: 8rem;
}

実行結果parent - max - 8rem

parent

child

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

HTML


<div class="parent">
    parent
    <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-height: 8rem;
}

.child {
    height: 4rem;
}

実行結果child - 4rem

parent

child

HTML


<div class="parent">
    parent
    <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-height: 8rem;
}

.child {
    height: 6rem;
}

実行結果child - 6rem

parent

child

HTML


<div class="parent">
    parent
    <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-height: 8rem;
}

.child {
    height: 8rem;
}

実行結果child - 8rem

parent

child

`min-height`

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

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

HTML


<div class="parent">
    parent
    <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-height: 7rem;
}

実行結果parent - min - 7rem

parent

child

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

HTML


<div class="parent">
    parent
    <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-height: 7rem;
}

.child {
    height: 4rem;
}

実行結果child - 4rem

parent

child

HTML


<div class="parent">
    parent
    <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-height: 7rem;
}

.child {
    height: 6rem;
}

実行結果child - 6rem

parent

child

HTML


<div class="parent">
    parent
    <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-height: 7rem;
}

.child {
    height: 8rem;
}

実行結果child - 8rem

parent

child

子要素がハミ出す場合

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

HTML


<div class="parent">
    parent
    <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 {
    height: 10rem;
}

.child {
    height: 150%;
}

実行結果child: 150%

parent

child

HTML


<div class="parent">
    parent
    <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-height: 8rem;
}

.child {
    height: 8rem;
}

実行結果child - 8rem

parent

child

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

HTML


<div class="parent">
    parent
    <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 {
    height: 10rem;
}

.child {
    height: 150%;
}

CSS


.parent {
    overflow: auto;
}

実行結果auto

parent

child

HTML


<div class="parent">
    parent
    <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-height: 8rem;
}

.child {
    height: 8rem;
}

CSS


.parent {
    overflow: hidden;
}

実行結果hidden

parent

child

height

% 相対的な高さ

max-height

min-height

子要素がハミ出す場合

`height`

`%` 相対的な高さ

`max-height`

`min-height`