CSS メディアクエリの基本と応用
続きを読む
CSS メディアクエリとは
CSS メディアクエリは、特定の条件に基づいて異なるスタイルシートを適用するための技術です。これにより、異なるデバイスや画面サイズに最適化されたレイアウトを実現することができます。
メディアクエリの基本的な構文
@media (条件) {
/* スタイルルール */
}一般的な条件には、画面の幅や高さ、解像度などがあります。
例: 画面幅に応じたスタイルの変更
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}この例では、画面の幅が600px以下のデバイスで、背景色が薄い青に変更されます。
メディアクエリの応用
メディアクエリは、レスポンシブウェブデザインの基盤となり、さまざまなデバイスや解像度にかかわらず、ユーザーに最適な体験を提供します。