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

gridプロパティは、現在使用されている出力デバイスがグリッドベースのレイアウトシステムをサポートしているかどうかを示す情報を保持するプロパティです。このプロパティはCSSのメディアクエリの一部として機能し、特定のデバイス環境に合わせてウェブページのスタイルを調整するために利用されます。

このgridプロパティは、主に点字ディスプレイやテレタイプライター（TTY）のような、文字をグリッド状に配置して表示する特殊なデバイス環境を判別するために設計されています。これらのデバイスでは、表示内容がキャラクターセルのグリッドとして構成されるため、grid: 1と評価されます。これは、一般的なウェブページで使われるCSS Grid Layoutとは直接的な関連性がないことに注意が必要です。

gridプロパティは、0または1の値を持ちます。値が1の場合、そのデバイスがグリッドベースのレイアウトシステムを使用していることを示します。一方、値が0の場合、そのようなシステムを使用していないことを示します。例えば、デスクトップやスマートフォンの一般的なウェブブラウザは、通常このプロパティを0と評価します。

このプロパティをメディアクエリ内で使用することで、例えば@media (grid: 1)のように記述し、グリッドベースのデバイスに最適化されたCSSスタイルを適用することができます。これにより、視覚に障がいのあるユーザーや特定のハードウェアを利用するユーザーに対し、より読みやすく、操作しやすいインターフェースを提供することが可能となり、ウェブコンテンツのアクセシビリティ向上に貢献します。開発者は、このような特性を持つデバイスへの対応を考慮する際に、このgridプロパティを活用できます。

Copy
1@media (grid: 1) {
2  .element {
3    display: grid;
4  }
5}

引数なし

引数はありません

戻り値なし

戻り値はありません