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

@media関数は、特定のメディアタイプやデバイスの特性に応じて異なるスタイルを適用するために、CSSルールセットのグループ化を実行する関数です。この関数は、ウェブサイトをPC、タブレット、スマートフォンなど、多様なデバイスで最適な表示に調整する「レスポンシブデザイン」を実現する上で不可欠です。

@mediaルールは、メディアクエリと呼ばれる条件式を使用し、その条件が真である場合にのみ、内部に記述されたCSSスタイルを適用します。これにより、同じウェブページでもデバイスによって見た目を柔軟に変化させることができます。

メディアクエリでは、画面の幅や高さ、デバイスの向き（縦向きか横向きか）、印刷設定といった多様な特性を指定できます。例えば、画面幅が特定のサイズより小さい場合にフォントサイズを小さくしたり、要素の配置を変更したりすることが可能です。これにより、ユーザーはどのようなデバイスからアクセスしても、コンテンツが最適化された見やすい表示を得ることができます。

@mediaは、現代のウェブ開発において、ユーザー体験とアクセシビリティを向上させるための基本的な技術として広く活用されています。

Copy
1@media screen and (min-width: 768px) {
2  body {
3    background-color: lightblue;
4  }
5}

引数なし

引数はありません

戻り値なし

戻り値はありません