【CSS Modules】device-widthメディア機能の使い方

Copy
1/*
2 * デバイスの物理的な幅 (device-width) に基づいてスタイルを適用するメディアクエリの例です。
3 *
4 * 注: 現代のレスポンシブデザインでは、ビューポートの幅 (width) を使用することが推奨されています。
5 * device-width は非推奨となる傾向にありますが、ここでは指定されたキーワードに基づいて使用します。
6 */
7
8/*
9 * デバイスの物理的な幅が767px以下の場合 (スマートフォンなど) に適用されるスタイル
10 */
11@media screen and (max-device-width: 767px) {
12  body {
13    /* 背景色を水色に設定 */
14    background-color: lightblue;
15    /* フォントサイズを小さめに設定 */
16    font-size: 14px;
17  }
18
19  .container {
20    /* コンテナの幅を100%に設定し、左右の余白をなくす */
21    width: 100%;
22    padding: 10px;
23    /* パディングを幅に含める設定 */
24    box-sizing: border-box;
25  }
26}
27
28/*
29 * デバイスの物理的な幅が768px以上の場合 (タブレットやデスクトップなど) に適用されるスタイル
30 */
31@media screen and (min-device-width: 768px) {
32  body {
33    /* 背景色を薄い緑に設定 */
34    background-color: lightgreen;
35    /* フォントサイズを標準に設定 */
36    font-size: 16px;
37  }
38
39  .container {
40    /* コンテナの最大幅を960pxに設定し、中央寄せにする */
41    max-width: 960px;
42    margin: 0 auto;
43    padding: 20px;
44    /* パディングを幅に含める設定 */
45    box-sizing: border-box;
46  }
47}

device-widthはCSSのメディアクエリで使用されるメディア特性の一つで、ウェブページを表示しているデバイスの物理的な幅に基づいてスタイルを適用するために利用されます。これは引数を取らず、特定の値を直接返すものではありませんが、CSSの条件式内でデバイスの幅を判定する基準として機能します。

このサンプルコードでは、device-widthを用いて、デバイスの物理的な幅に応じてウェブページの見た目を切り替える方法が示されています。最初の@media screen and (max-device-width: 767px)というメディアクエリは、デバイスの物理的な幅が767ピクセル以下、つまりスマートフォンなどの小型デバイスで閲覧されている場合に適用されます。この条件が満たされると、bodyの背景色が水色になり、フォントサイズが小さく設定され、.containerは画面幅いっぱいに表示されるようになります。

続いて、@media screen and (min-device-width: 768px)というメディアクエリは、デバイスの物理的な幅が768ピクセル以上、すなわちタブレットやデスクトップPCなどの比較的大きなデバイスで閲覧されている場合に適用されます。この条件が満たされると、bodyの背景色は薄い緑色に、フォントサイズは標準に設定され、.containerは最大幅960ピクセルで中央寄せに表示されるようスタイルが変更されます。

このようにdevice-widthを使用することで、異なるデバイスの物理的な特性に合わせたレイアウト調整が可能になります。ただし、現代のレスポンシブデザインにおいては、ビューポートの幅を示すwidthメディア特性を使用することが一般的に推奨されており、device-widthは非推奨となる傾向にあります。これは、デバイスのピクセル密度などの要因により、device-widthが意図しない表示を引き起こす可能性があるためです。このサンプルは、device-widthの基本的な挙動を理解するのに役立ちます。

Copy
1/*
2 * デフォルトのスタイル設定です。
3 * デバイスの幅に関わらず、まずはこのスタイルが適用されます。
4 */
5body {
6  background-color: #f0f0f0; /* 薄いグレーの背景色 */
7  font-family: Arial, sans-serif;
8  color: #333; /* 濃いグレーの文字色 */
9  margin: 0;
10  padding: 20px;
11}
12
13/*
14 * @media ルールを使用して、特定のデバイスの幅に応じてスタイルを変更します。
15 * 'max-device-width' は、デバイスの物理的な幅が指定された値以下の場合に適用されます。
16 *
17 * この例では、デバイスの幅が768ピクセル以下のときに（例：スマートフォンや小型タブレット）、
18 * 背景色や文字色を変更して、モバイルフレンドリーな表示にします。
19 */
20@media screen and (max-device-width: 768px) {
21  body {
22    background-color: #cceeff; /* 水色の背景色 */
23    color: #004d99; /* 濃い青の文字色 */
24    padding: 10px; /* パディングを少し小さく */
25  }
26
27  /*
28   * 特定の要素のフォントサイズを小さくするなどの調整も可能です。
29   */
30  h1 {
31    font-size: 1.5em;
32  }
33}

CSSのdevice-widthは、Webページの見た目を閲覧しているデバイスの物理的な画面幅に応じて変化させるための重要な機能です。これは@mediaルールというCSSの構文内で、特定のメディア特性として使用されます。device-width自体は引数や戻り値を持たず、デバイスの幅を条件として指定するために用いられます。

サンプルコードでは、まずWebページの基本的なスタイルが設定されています。これは、デバイスの幅に関わらず、全ての閲覧環境で最初に適用されるデフォルトのスタイルです。

次に登場する@media screen and (max-device-width: 768px)は、メディアクエリと呼ばれる記述です。ここでは、「画面表示で、かつデバイスの物理的な幅が最大で768ピクセル以下の場合」という条件が指定されています。この条件に合致するのは、主にスマートフォンや小型タブレットなどのデバイスです。条件が満たされた場合、その中に記述されたスタイルが上書き適用されます。

この例では、デバイスの幅が768ピクセル以下の際に、bodyの背景色が水色に、文字色が濃い青に、パディングが小さく変更されます。さらにh1要素のフォントサイズも調整されることで、小さい画面でも情報が見やすく、操作しやすいデザインが実現されます。このようにdevice-widthを活用することで、様々なデバイスに最適化された「レスポンシブデザイン」のウェブサイトを作成できます。