CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSメディアクエリの書き方：デバイスサイズに応じて異なるスタイルを適用する方法

メディアクエリとは

メディアクエリ（Media Queries）は、画面の幅や高さ、デバイスの種類などの条件に応じて、異なるCSSスタイルを適用できるCSSの機能です。レスポンシブWebデザインを実現するためには欠かせない技術で、スマートフォン、タブレット、PCなど、さまざまな画面サイズのデバイスに最適化された表示を提供できます。

基本的な使い方

@mediaルールを使用することで、特定の条件下でのみ適用されるスタイルを定義できます。例えば「max-width: 420px」を指定すると、画面幅が420px以下の場合にだけ、そのブロック内のスタイルが有効になります。

サンプルコード

以下のコードは、画面サイズに応じてページの背景色を切り替えるシンプルな例です。

<html>
   <head>
      <style>
         /* デフォルトの背景色 */
         body {
            background-color: lightpink;
         }
         /* 画面幅が420px以下の場合 */
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
      </style>
   </head>
   <body>
      <p>画面サイズが420px未満の場合は水色（lightblue）、それ以外の場合はピンク色（lightpink）が表示されます</p>
   </body>
</html>

コードの解説

このサンプルでは、まずbody要素に対してデフォルトの背景色としてlightpink（薄いピンク）を設定しています。次に@media screen and (max-width: 420px)というメディアクエリを記述し、画面幅が420px以下のデバイス（主にスマートフォンなど）でアクセスした場合には、背景色がlightblue（薄い水色）に切り替わるようにしています。

実際にブラウザのウィンドウ幅を変更しながら確認すると、420pxを境に背景色が動的に変化することがわかります。このようにメディアクエリを使いこなすことで、1つのHTMLファイルで複数のデバイスに対応したデザインを実装できます。

  1. CSSのさまざまなメディアタイプの種類と使い方を徹底解説

    CSSのメディアタイプとは、ドキュメントが描画されるデバイスの種類を指します。メディアタイプごとに個別のスタイルを定義することで、画面表示・印刷・音声読み上げなど、出力先に応じた最適なデザインを実現できます。 CSS3およびMedia Queries 4で利用できるメディアタイプ 以下は、CSS3とMedia Queries 4で使用できる主なメディアタイプの一覧です。 No.値と説明 1allすべてのメディアタイプのデバイスにスタイルシートが適用されます。 2printプリンターでの印刷時にスタイルシートが適用されます。 3screenパソコンの画面、タブレット、スマートフォンなどの

  2. CSSメディアクエリで一般的なデバイス別ブレークポイントを設定する方法

    CSSのメディアクエリ（@media）を活用すると、スマートフォン、タブレット、デスクトップPCなど、デバイスごとの画面幅（ブレークポイント）に応じてスタイルを柔軟に切り替えることができます。レスポンシブWebデザインを実現するうえで欠かせないテクニックです。 よく使われる一般的なブレークポイント 多くのWebサイトでは、以下のような画面幅がブレークポイントの目安として採用されています。 600px以下 … スマートフォン 600px〜767px … タブレット（縦向き） 768px〜991px … タブレット（横向き）・小型ノートPC 992px〜1199px … デスクトップPC 120