@media (width: ...)

アットメディアウィズ（メディアクエリ）

意味特定の画面幅の場合に適用

@media (width: ...)とは？

@media (width: ...)は、メディアクエリの一種で、特定の画面幅の条件に合致する場合にのみ、スタイルルールを適用するために使用します。これにより、異なるデバイスやビューポートのサイズに応じて、ページのレイアウトやデザインを柔軟に調整することができます。

@media (width: ...)の具体的な使い方

特定の画面幅での背景色変更例

@media (width: 600px) {
    body {
        background-color: lightblue;
    }
}

ビューポートの幅が600ピクセル正確に一致する場合にのみ、body要素の背景色を薄い青色に設定します。

画面幅の範囲指定によるフォントサイズ変更例

@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 16px;
  }
}

ビューポートの幅が600ピクセル以上900ピクセル以下の場合に、body要素のフォントサイズを16ピクセルに設定します。

@media (width: ...)に関するよくある質問

Q. width指定の他の方法は？

A. widthの指定には、min-widthやmax-widthも使用できます。これらを使うと、特定の幅以上または以下の場合にスタイルを適用できます。

Q. 複数の条件を組み合わせられる？

A. はい、andキーワードを使って複数の条件を組み合わせることができます。例えば、@media (min-width: 600px) and (max-width: 900px)のように使用します。

Q. 単位はpxだけ？

A. いいえ、pxの他にem、rem、vwなどの単位も使用できます。例えば、@media (width: 50em)のように指定することもできます。

@media (width: ...)が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの@media (width: ...)や@media all、@media (resolution: ...)、@media (min-aspect-ratio: ...)、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。