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

Copy
1/*
2 * orientation メディア特性は、ビューポートの向きが縦向き (portrait) か横向き (landscape) かを検出します。
3 * このメディアクエリは、画面の向きが横向き (landscape) の場合にのみ、{}内のスタイルを適用します。
4 * 例えば、スマートフォンを横向きにしたときや、一般的なPCディスプレイなどが該当します。
5 */
6@media (orientation: landscape) {
7  body {
8    /*
9     * 画面が横向きのときに、ページの背景色を薄い緑色に変更します。
10     * これにより、向きによって異なる視覚的なフィードバックを提供できます。
11     */
12    background-color: #e0ffe0; /* 例: 薄い緑色 */
13  }
14}

orientationはCSSのメディア特性の一つで、ウェブページの表示領域（ビューポート）の向きが縦向き（portrait）か横向き（landscape）かを検出するために使用されます。この特性自体に引数や戻り値はなく、指定された向きとビューポートの向きが一致したときに、関連するCSSスタイルが適用される仕組みです。

提供されたサンプルコードでは、@media (orientation: landscape)というメディアクエリが使われています。これは「もしビューポートの向きが横向き（landscape）であれば」という意味になります。具体的には、スマートフォンやタブレットを横向きにした場合や、一般的なパソコンのディスプレイのように横長の画面で表示している場合に、{}内のスタイルが適用されます。

サンプルコードの中では、orientation: landscapeの条件が満たされたときに、body要素のbackground-colorプロパティが#e0ffe0（薄い緑色）に変更されるよう記述されています。これにより、ユーザーがデバイスの向きを変えるたびに、ウェブサイトの背景色も自動的に変わり、向きに応じた視覚的な変化を提供できます。この機能は、異なるデバイスの向きに合わせてレイアウトやデザインを最適化する、レスポンシブデザインの実現に役立ちます。

Copy
1/*
2 * CSS orientation メディア機能のサンプルコード
3 * 画面の向き (横向き/縦向き) に応じてスタイルを適用します。
4 * 主にスマートフォンやタブレットなどのモバイルデバイスで、
5 * 物理的なデバイスの向きの変化に応じてWebページのレイアウトやデザインを調整する際に使用されます。
6 */
7
8/* デフォルトのスタイル: どの向きでも適用される基本的なデザイン */
9body {
10  background-color: #f0f8ff; /* 薄い水色 */
11  color: #333;
12  font-family: Arial, sans-serif;
13  display: flex;
14  justify-content: center;
15  align-items: center;
16  min-height: 100vh; /* ビューポートの高さいっぱい */
17  margin: 0;
18  font-size: 1.5em;
19  text-align: center;
20  transition: background-color 0.5s ease; /* スムーズな色変化のため */
21}
22
23/* 画面が横向き (landscape) の場合に適用されるスタイル */
24/* ビューポートの幅が高さよりも大きい場合に適用されます。 */
25@media screen and (orientation: landscape) {
26  body {
27    background-color: #2e8b57; /* 濃い緑色 */
28    color: #ffffff;
29    /* 横向き表示時の追加スタイルをここに記述できます */
30    padding: 20px;
31  }
32}
33
34/* 画面が縦向き (portrait) の場合に適用されるスタイル (参考) */
35/* ビューポートの高さが幅よりも大きい、または同じ場合に適用されます。 */
36@media screen and (orientation: portrait) {
37  body {
38    background-color: #cd5c5c; /* 赤みがかった色 */
39    color: #ffffff;
40    /* 縦向き表示時の追加スタイルをここに記述できます */
41    border: 2px dashed #fff;
42  }
43}

CSSのorientationは、Webページの表示領域（ビューポート）の向き（縦向きか横向きか）を判定し、その向きに応じて異なるスタイルを適用するためのメディア機能です。特にスマートフォンやタブレットなどのモバイルデバイスで、物理的なデバイスの向きの変化に合わせて、Webページのレイアウトやデザインを最適化する際に利用されます。

この機能は引数を取らず、特定の戻り値もありません。@mediaルール内で使用され、orientation: landscapeを指定すると、ビューポートの幅が高さよりも大きい「横向き」の場合にスタイルが適用されます。一方、orientation: portraitを指定すると、ビューポートの高さが幅よりも大きい、または幅と同じ「縦向き」の場合にスタイルが適用されます。

サンプルコードでは、まずbody要素に共通の基本スタイルを設定しています。次に、@media screen and (orientation: landscape)ブロック内で、画面が横向きの際に背景色を濃い緑色に、文字色を白色に設定しています。また、@media screen and (orientation: portrait)ブロック内では、画面が縦向きの際に背景色を赤みがかった色に、文字色を白色に変更し、破線ボーダーを追加しています。

これにより、デバイスの向きを変えるだけで、Webページの背景色やその他のデザインが動的に変化する様子を確認できます。これは、限られた画面スペースを効果的に活用し、ユーザーにとってより見やすく、操作しやすいインターフェースを提供する上で非常に重要な技術です。