【CSS Modules】@mediaアットルールの使い方

Copy
1/*
2 * @mediaルールは、デバイスの種類や特性に基づいてスタイルを適用するためのCSSの@-ruleです。
3 * ここでは、主に画面（screen）表示用のデバイスに対して、特定の条件でスタイルを変更する例を示します。
4 */
5
6/* デフォルトのスタイル定義 */
7.responsive-box {
8  background-color: #e0f7fa; /* 明るい青緑色 */
9  color: #004d40; /* 濃い緑色 */
10  padding: 15px;
11  margin: 10px auto; /* 中央揃え */
12  text-align: center;
13  width: 90%; /* 親要素の90%の幅 */
14  max-width: 300px; /* 最大幅を制限 */
15  border: 1px solid #00838f; /* 細いボーダー */
16  border-radius: 5px; /* 角を丸める */
17  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 軽い影 */
18  transition: background-color 0.3s ease; /* 色変更のアニメーション */
19}
20
21/*
22 * @media screen and (min-width: 768px)
23 * このブロック内のスタイルは、以下の条件をすべて満たすデバイスに適用されます:
24 * - 画面（screen）表示デバイスであること（例: デスクトップ、タブレット、スマートフォン）
25 * - 画面の幅（viewport）が768ピクセル以上であること
26 *
27 * これは、タブレットやPCのような広い画面でスタイルを調整する一般的なブレイクポイントです。
28 */
29@media screen and (min-width: 768px) {
30  .responsive-box {
31    background-color: #c8e6c9; /* 広い画面では背景色を明るい緑に変更 */
32    color: #1b5e20; /* 濃い緑色 */
33    width: 70%; /* 幅を広げる */
34    max-width: 600px; /* 最大幅を拡張 */
35    border: 2px solid #388e3c; /* ボーダーを太く、色も変更 */
36  }
37}
38
39/*
40 * @media screen and (min-width: 1024px)
41 * さらに広い画面（例: 大型PCモニタ）でのスタイル調整。
42 * 画面の幅が1024ピクセル以上の場合に適用されます。
43 */
44@media screen and (min-width: 1024px) {
45  .responsive-box {
46    background-color: #bbdefb; /* さらに広い画面では背景色を明るい青に変更 */
47    color: #0d47a1; /* 濃い青色 */
48    width: 60%; /* さらに幅を調整 */
49    max-width: 900px; /* 最大幅をさらに拡張 */
50    border: 3px solid #1976d2; /* ボーダーをさらに太く、色も変更 */
51    font-size: 1.2em; /* フォントサイズを少し大きく */
52  }
53}

CSSの@mediaルールは、デバイスの種類や画面の特性に応じてスタイルを適用するための規則です。このルール自体に引数や戻り値の概念はありませんが、括弧内に記述する「メディアクエリ」が、スタイルを適用する条件を定義します。

サンプルコードでは、まず.responsive-box要素に基本的なスタイルが設定されており、これがデフォルトの表示となります。

次に、@media screen and (min-width: 768px)ブロックが登場します。「screen」は画面表示デバイスを指し、「min-width: 768px」は画面の最小幅が768ピクセル以上の場合を示します。この条件が満たされると、.responsive-boxの背景色や幅などが変更され、タブレットやPCなどの広い画面に適した表示に切り替わります。

さらに、@media screen and (min-width: 1024px)ブロックは、画面の幅が1024ピクセル以上の場合にスタイルを適用します。これにより、大型PCモニターなど、より広い画面に合わせた表示の最適化が実現されます。@mediaルールは、デバイスサイズに応じて表示を柔軟に調整する、レスポンシブデザインにおいて不可欠な機能です。

Copy
1/*
2 * @mediaとは、画面サイズなどのメディア特性に基づいてスタイルを適用するためのCSSアットルールです。
3 * これにより、デバイスの種類や画面の幅、高さ、解像度などに合わせてウェブサイトのデザインを最適化できます。
4 * 主にレスポンシブデザインの実装に使用されます。
5 */
6
7/* ------------------------------------------- */
8/* デフォルトスタイル（PCや大きな画面向け）     */
9/* ------------------------------------------- */
10.responsive-box {
11  width: 500px; /* デフォルトの幅 */
12  height: 150px;
13  background-color: #4CAF50; /* 緑色 */
14  color: white;
15  display: flex;
16  justify-content: center;
17  align-items: center;
18  font-size: 24px;
19  margin: 20px auto; /* 中央寄せ */
20  border-radius: 8px;
21  text-align: center;
22  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
23  transition: all 0.3s ease-in-out; /* スタイル変更を滑らかにする */
24}
25
26/* ------------------------------------------- */
27/* @mediaルールによるスタイル調整               */
28/* ------------------------------------------- */
29
30/* 画面幅が768px以下の場合に適用されるスタイル (タブレット向け) */
31/* この条件では、`responsive-box`の背景色と幅を変更します。 */
32@media (max-width: 768px) {
33  .responsive-box {
34    width: 90%; /* 画面幅に合わせて幅を広げる */
35    background-color: #FFC107; /* 黄色 */
36    font-size: 20px;
37  }
38}
39
40/* 画面幅が480px以下の場合に適用されるスタイル (スマートフォン向け) */
41/* この条件では、さらに`responsive-box`の背景色、幅、高さを変更します。 */
42@media (max-width: 480px) {
43  .responsive-box {
44    width: 95%; /* スマートフォンでさらに幅を広げる */
45    height: 100px; /* 高さを小さくする */
46    background-color: #F44336; /* 赤色 */
47    font-size: 16px;
48  }
49}

@mediaはCSSの「アットルール」と呼ばれる特別な命令の一つです。これは、ウェブページが表示されるメディア（例えば画面や印刷など）の特性に応じて、適用するCSSスタイルを切り替えるために使用されます。具体的には、画面の幅や高さ、デバイスの種類、解像度といった条件に基づいて、異なるデザインを適用できます。この機能は、PC、タブレット、スマートフォンなど、様々なデバイスでウェブサイトを最適に表示させる「レスポンシブデザイン」を実装する上で非常に重要な役割を果たします。

@mediaルール自体に直接の引数や戻り値はありません。代わりに、ルールを適用するための条件を括弧 () 内に記述します。これを「メディアクエリ」と呼び、この条件が真（true）の場合に、そのブロック内に記述されたCSSスタイルが有効になります。戻り値として具体的なデータが返されるのではなく、条件に応じてスタイルが適用されるという「効果」をもたらします。

サンプルコードでは、まず.responsive-boxという要素にデフォルトのスタイルが設定されています。これは、主にPCなどの大きな画面での表示を想定したものです。次に、@media (max-width: 768px)というルールにより、「画面の最大幅が768ピクセル以下の場合」という条件で、.responsive-boxの幅と背景色がタブレット向けに変更されます。さらに、@media (max-width: 480px)というルールでは、「画面の最大幅が480ピクセル以下の場合」という条件で、スマートフォン向けに幅、高さ、背景色などがさらに調整されています。このように、@mediaを使用することで、画面の大きさに応じて要素の見た目を自動的に最適化し、ユーザー体験を向上させることができます。