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

shapeプロパティは、デバイスの物理的な形状に関する条件を判定するためのメディア特性を表すプロパティです。

このメディア特性は、ウェブサイトやアプリケーションが、円形ディスプレイや特殊な多角形ディスプレイなど、様々な形の画面を持つデバイスに最適化された表示を提供するために利用されます。例えば、特定の形状のスクリーンを持つデバイスでのみ適用されるスタイルを記述する際に使用され、ユーザーインターフェースのレイアウトやコンテンツの配置を調整できます。

shapeメディア特性は、@media (shape: circle) のように、特定の形状の値を持つかどうかを評価する形で使われることが想定されます。これにより、開発者はデバイスのディスプレイ形状に応じて、異なるCSSルールを適用し、多様なデバイス環境でのユーザーエクスペリエンスを向上させることが可能になります。

しかし、このshapeメディア特性は、現在の主要なウェブ標準であるCSS Media Queriesの仕様において、まだ広く定義され、すべてのブラウザでサポートされているわけではありません。そのため、実際に利用する際には、対象とするブラウザやデバイスのサポート状況を事前に確認することが重要です。システムエンジニアを目指す初心者の方々にとっては、将来的に多様なデバイス形状に対応するウェブコンテンツを開発する上で、このような新しいメディア特性の概念や、その標準化の動向を理解しておくことが有益でしょう。

Copy
1@media (shape: rect) {
2  body {
3    background-color: lightgray;
4  }
5}

引数なし

引数はありません

戻り値なし

戻り値はありません