【CSS Modules】heightメディア機能の使い方

heightプロパティは、ウェブページが表示されているビューポート、つまりブラウザの表示領域の高さに関する情報を保持するプロパティです。このプロパティは、主にCSSのMedia Queries（メディアクエリ）という機能の中で利用されます。

メディアクエリにおいてheightプロパティを使用することで、ビューポートの高さが特定の条件を満たす場合にのみ、特定のCSSスタイルを適用するように設定できます。これにより、ウェブサイトがデスクトップPC、スマートフォン、タブレットなど、様々な高さを持つデバイスで閲覧された際に、それぞれに最適化されたレイアウトやデザインを適用するレスポンシブデザインの実現に不可欠な役割を果たします。

具体的には、@media screen and (height: 600px)のように記述することで、ビューポートの高さが正確に600ピクセルである場合にスタイルを適用します。また、min-heightやmax-heightといったプレフィックスを付けて使用することも一般的です。例えば、@media screen and (min-height: 800px)と記述すれば、ビューポートの高さが800ピクセル以上の場合にスタイルを適用し、@media screen and (max-height: 700px)と記述すれば、ビューポートの高さが700ピクセル以下の場合にスタイルを適用できます。これらの指定には、px、em、remなどの長さの単位を使用します。ウェブコンテンツが多様な表示環境で適切に表示されるよう、高さに基づく条件分岐を可能にする、非常に重要な機能です。

Copy
1@media (height: 600px) {
2  /* スタイル */
3}

引数なし

引数はありません

戻り値なし

戻り値はありません