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

Copy
1/*
2 * このサンプルコードは、CSSの 'height: auto;' プロパティがコンテンツに合わせて
3 * 要素の高さを自動調整する様子と、メディアクエリの 'height' 特徴量を使って
4 * ビューポートの高さに基づいてスタイルを適用する方法を示します。
5 */
6
7/* すべてのビューポートの高さにおける基本的なスタイル */
8.resizable-box {
9  background-color: #f0f0f0; /* 背景色 */
10  border: 1px solid #ccc;    /* ボーダー */
11  padding: 20px;             /* 内側の余白 */
12  margin: 20px auto;         /* 上下20px、左右中央揃え */
13  max-width: 500px;          /* 最大幅 */
14  height: auto;              /* 高さをコンテンツに合わせて自動調整 */
15  min-height: 100px;         /* コンテンツが少なくても最低100pxの高さを確保 */
16  font-family: sans-serif;
17  line-height: 1.6;
18  transition: all 0.3s ease-in-out; /* スムーズなスタイルの変化 */
19}
20
21/*
22 * メディアクエリ: ビューポートの高さが600px以上の場合
23 * (メディア特徴量の 'height' を使用して、ビューポートの最小高さを指定)
24 */
25@media (min-height: 600px) {
26  .resizable-box {
27    background-color: #e0ffe0; /* 高いビューポートでの背景色 */
28    border-color: #008000;      /* 高いビューポートでのボーダー色 */
29    min-height: 200px;          /* 高いビューポートでは最小高さを200pxに増やす */
30    /* 'height: auto;' は引き続き適用され、コンテンツに応じてさらに高さを調整します。 */
31  }
32}
33
34/*
35 * メディアクエリ: ビューポートの高さが400px以下の場合
36 * (メディア特徴量の 'height' を使用して、ビューポートの最大高さを指定)
37 */
38@media (max-height: 400px) {
39  .resizable-box {
40    background-color: #fff0f0; /* 低いビューポートでの背景色 */
41    border-color: #ff0000;      /* 低いビューポートでのボーダー色 */
42    min-height: 50px;           /* 低いビューポートでは最小高さを50pxに減らす */
43    padding: 10px;              /* パディングも減らす */
44    /* 'height: auto;' は引き続き適用され、コンテンツに応じてさらに高さを調整します。 */
45  }
46}

このサンプルコードは、CSSのheightプロパティにおけるauto値の使用法と、メディアクエリのheight特徴量を用いてビューポート（画面表示領域）の高さに基づいてスタイルを適用する方法を示しています。

まず、.resizable-boxクラスの基本スタイルで設定されている height: auto; は、要素の高さがその内部のコンテンツ量に合わせて自動的に調整されることを意味します。コンテンツが増えれば高さが自動で伸び、減れば縮まります。また、min-height: 100px; のように最小の高さを指定することで、コンテンツが少ない場合でも要素が指定された高さより小さくなるのを防ぎ、レイアウトの安定性を保つことができます。

次に、@mediaルール内で使用されるmin-heightやmax-heightは、メディア特徴量と呼ばれるもので、現在のビューポートの高さに基づいて特定のスタイルを適用するための条件を設定します。例えば、@media (min-height: 600px) は、ビューポートの高さが600ピクセル以上の場合にのみ内側のスタイルを適用し、背景色やボーダー色、最小の高さを変更します。これにより、画面の高さが十分にある場合に、よりゆとりのあるデザインを提供できます。

同様に、@media (max-height: 400px) は、ビューポートの高さが400ピクセル以下の場合にスタイルを適用し、小さい画面向けに余白を減らしたり、異なる背景色を適用したりして表示を最適化します。これらのメディアクエリは、ビューポートの高さという条件に基づいて動的にスタイルを調整するため、様々なデバイスやウィンドウサイズに対応するレスポンシブデザインの実現に不可欠です。CSSのheightプロパティもメディア特徴量のheightも、引数を取ったり特定の値を返したりすることはありません。

Copy
1/*
2 * このCSSは、ブラウザの表示領域（ビューポート）の高さに基づいて、
3 * 要素のレイアウトを調整する方法を示します。
4 * `height` メディア特性は、現在のビューポートの高さを検出するために使用されます。
5 */
6
7/* 全体の高さをビューポートに合わせるための基本的な設定 */
8html, body {
9  margin: 0;
10  padding: 0;
11  height: 100%; /* body要素が親のhtml要素の100%の高さを持つ */
12  font-family: sans-serif;
13  overflow: auto; /* コンテンツがはみ出た場合にスクロール可能にする */
14}
15
16/* メインコンテンツエリアの基本スタイル */
17.main-content {
18  min-height: 50vh; /* ビューポートの高さの最低50%を確保 */
19  display: flex;
20  flex-direction: column;
21  justify-content: center;
22  align-items: center;
23  padding: 20px;
24  background-color: #f4f4f4;
25  text-align: center;
26}
27
28/* コンテンツカードのスタイル */
29.card {
30  background-color: #ffffff;
31  padding: 30px;
32  border-radius: 8px;
33  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
34  width: 90%;
35  max-width: 500px;
36}
37
38/*
39 * `height` メディア特性の使用例:
40 * ビューポートの高さが特定のしきい値（ここでは600px）以上の場合に適用されるスタイルです。
41 * キーワード「height 100」から連想される「フルハイト」表示の概念を、
42 * `height: 100vh;` を用いて表現しています。
43 *
44 * ビューポートが十分な高さを持つ場合に、`.main-content` をビューポートの高さ全体に広げます。
45 */
46@media (min-height: 600px) {
47  .main-content {
48    height: 100vh; /* ビューポートの高さ全体 (100% of viewport height) に設定 */
49    min-height: initial; /* heightが適用されるため、最小高さの設定をリセット */
50  }
51}

このCSSサンプルコードは、ブラウザの表示領域、通称「ビューポート」の高さに基づいて、ウェブページのレイアウトを柔軟に調整する方法を示しています。

heightメディア特性は、現在のビューポートの高さを検出するために使用されるCSSの機能です。これは特定の引数を必要とせず、また直接値を返すものでもありません。代わりに、@mediaルール内で条件として記述し、その条件が満たされた場合にのみ、特定のCSSスタイルを適用するように機能します。

まず、html要素とbody要素にheight: 100%;を設定することで、これらの要素が親要素（通常はブラウザウィンドウ）の高さ全体を占めるようにしています。さらに、vh（ビューポート高さ）という単位も利用されており、これはビューポートの高さに対する割合を示します。例えば、.main-contentに設定されたmin-height: 50vh;は、ビューポートの高さの最低50%を確保することを意味します。

特に重要なのは、@media (min-height: 600px)というメディアクエリの使用例です。この記述は、「ビューポートの高さが600ピクセル以上の場合にのみ、このブロック内のCSSスタイルを適用する」という条件を設定しています。この条件が満たされた際に、.main-contentにheight: 100vh;が適用され、コンテンツエリアがビューポートの高さ全体に広がるように設計されています。これは「フルハイト」表示を実現する一般的な手法です。

このようにheightメディア特性とvh単位を組み合わせることで、ユーザーが利用する様々な画面サイズ（特に高さ）に応じて、コンテンツが常に適切に表示される、応答性の高いウェブデザインを実現できます。