ywork2020.com

Title

要素の高さを指定する

目次 (INDEX)

heightとは

height とは次の意味を持つ語句です。
height
読み: ハイト
意味: 高さ

目次に戻る

heightプロパティの概要

このプロパティは、ブロックレベル要素、置換インライン要素の高さを指定することができるプロパティです。 box-sizeプロパティと合わせて使うことで、ボーダー領域までの高さを指定することもできます。

目次に戻る

ブロックレベル要素とは

ブロックレベル要素とは、「見出し要素」、「段落要素」、「表要素」、「コンテナー要素」などの、ページの骨格を形成するための要素で、 コンテンツをまとめる括りとして使用される要素です。この要素は一つのブロックとして認識されるので、このような呼び方をします。 ブラウザの表示でも一つのブロックとして扱われ、一般的なブラウザでは前後に改行が入ります。

全てではありませんが、以下に、ブロックレベル要素をリストしておきます。

  • address
  • blockquote
  • div
  • dl
  • fieldset
  • form
  • h1~h6
  • noscript
  • ol
  • p
  • pre
  • table
  • ul

目次に戻る

置換インライン要素とは

置換インライン要素とは、簡単に説明すると開始タグのみで使用される要素か、もしくは開始タグと終了タグはあるけど間にテキスト を表示しない要素と言ったら、そう間違ってはいないと思います。 結局のところテキストを表示するとか、テキストに意味付けする用途ではなく、ある種のユーザーインターフェースや特有の 表示効果を目的とした要素が、これに該当します。 つまり、要素特有のコンテンツに置き換えて表示されるので置換要素と言います。

また逆に、非置換インライン要素とはテキストに対してマークアップしたり、表示効果を狙った要素のことを言います。

インライン要素のほとんどは非置換要素です。置換要素は多くはありませんので、全てではありませんが、以下に置換インライン要素をリストしておきます。

  • area
  • audio
  • canvas
  • embed
  • hr
  • iframe
  • img
  • input
  • menu
  • object
  • video

目次に戻る

実機サンプルとサンプルコード

ここでは、div要素を使って実際の設定を試していきます。

構文

セレクター{height: 設定値;}

初期値: auto

autoキーワードは要素の高さをブラウザが計算して表示します。 これは基本的に内包コンテンツの高さに合わせるように計算されます。

div要素

div{height: auto;}

目次に戻る

キーワード値で高さを指定

heightプロパティで使われるキーワードは次の通りです。

max-contentキーワード

コンテンツに合わせた望ましい固有の高さで表示されます。

div要素 (1行目)
2行目
3行目
4行目
5行目

div{height: max-content;}

目次に戻る

min-contentキーワード

最小の固有の高さで表示されます。

div要素 (1行目)
2行目
3行目
4行目
5行目

div{height: min-content;}

目次に戻る

availableキーワード

包含ブロックの高さから、マージン、ボーダー、パディングの高さを引いた寸法で表示されます。

div要素 (1行目)
2行目
3行目
4行目
5行目

div{height: available;}

目次に戻る

fit-contentキーワード

max-contentとmin-contentの利用可能な幅のうち、小さい方の高さが適用されます。

div要素 (1行目)
2行目
3行目
4行目
5行目

div{height: fit-content;}

目次に戻る

数値による高さの指定

数値による高さの指定は数値と単位をセットで記述します。 このサンプルでは単位をemとしており、テキストで7行の高さを指定しています。このemや他にもpxなど は絶対値での指定となりますが、%を使った包含ブロックに対する相対値での指定も可能です。

div要素 (1行目)
2行目
3行目
4行目
5行目
6行目
7行目
8行目

div{height: 7em;}

目次に戻る

box-sizingプロパティとの併用

heightで指定した高さの基準となるものをbox-sizingプロパティで指定することができます。

box-sizingプロパティは2つのキーワードを使って基準を変更することができます。 初期値はcontent-boxになっており、下記の2つのサンプルうち、左のサンプルがcontent-boxキーワードをつかったものとなります。 これはテキストを表示する領域であるコンテンツボックスを基準にするということで、コンテンツ領域が6行分で表示されます。

もう1つのキーワードであるborder-boxを使うと境界線を含める設定となり、境界線の外の縁を基準にして6行文で表示することになります。

div要素 (境界線なし)
box-sizing: content-box;
height: 6em;
div要素 (境界線あり)
border: 1em solid #aaa;
box-sizing: border-box;
height: 6em;

div{
	box-sizing: border-box;
	height: 6em;
}

目次に戻る

グローバル値

heightプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のautoに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
div{height: グローバル値;}

目次に戻る

補足説明

  • 非置換インライン要素とcol、及びcolgroup要素を除くすべての要素に適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。
なお、サンプルの赤枠で表示された境界線は親要素の境界線です。

height: auto;

height: max-content;

height: min-content;

height: available;

height: fit-content;

height: 3em;

height: 6em;

height: 50%;

サンプル: ブロック要素
(親要素の高さは100px)


サンプル: 非置換インライン要素 (親要素の高さは100px)

目次に戻る