CSS媒体クエリの解説

CSSにおける@media screen and (max-width: 1024px)の意味

日本語

CSSの@media screen and (max-width: 1024px)は、媒体クエリと呼ばれる機能を使用して、特定の画面サイズやデバイスに合わせてスタイルを調整するためのルールです。

• (max-width: 1024px)
  最大幅が1024ピクセル以下の画面を対象とする条件です。
• and
  複数の条件を組み合わせるための演算子です。
• screen
  対象とするメディアタイプを指定します。この場合、スクリーン（コンピュータのモニターやスマートフォンなど）を対象とします。
• @media
  媒体クエリを定義するためのキーワードです。

つまり、このルールは、「画面幅が1024ピクセル以下のスクリーンデバイスの場合に適用されるスタイル」を定義します。

例

@media screen and (max-width: 1024px) {
  /* 画面幅が1024ピクセル以下の場合に適用されるスタイル */
  body {
    font-size: 14px;
  }
  .container {
    width: 80%;
  }
}

CSS媒体クエリの解説とコード例

CSSの媒体クエリは、異なるデバイスや画面サイズに合わせてスタイルを調整するための機能です。これにより、ユーザーのデバイスに最適な表示を実現することができます。

この媒体クエリは、画面幅が1024ピクセル以下のスクリーンデバイス（コンピュータのモニターやスマートフォンなど）を対象とします。

コード例

@media screen and (max-width: 1024px) {
  /* 画面幅が1024ピクセル以下の場合に適用されるスタイル */
  body {
    font-size: 14px;
  }
  .container {
    width: 80%;
  }
}

この例では、画面幅が1024ピクセル以下のデバイスでアクセスした場合、bodyのフォントサイズを14ピクセルに、.containerの幅を80%に設定します。

他の媒体クエリの例

• オリエンテーション（縦横）の指定
  

  @media screen and (orientation: portrait) {
    /* 縦向きの場合 */
  }
  

• 縦横比の指定
  

  @media screen and (aspect-ratio: 16/9) {
    /* アスペクト比が16:9の場合 */
  }
  

• 最大幅と最小幅の指定
  

  @media screen and (min-width: 768px) and (max-width: 1024px) {
    /* 画面幅が768ピクセル以上1024ピクセル以下の場合 */
  }
  

媒体クエリの活用方法

• 印刷スタイル
  印刷用のスタイルを定義する。
• デバイス固有のスタイル
  特定のデバイス（スマートフォン、タブレット、デスクトップ）に合わせたスタイルを適用する。
• レスポンシブデザイン
  異なる画面サイズに合わせてレイアウトやフォントサイズを調整する。

CSS媒体クエリの代替手法

CSS媒体クエリの代替手法として、以下のような方法が考えられます。

JavaScriptによる動的なスタイル変更

• JavaScriptの条件文やDOM操作を使用して、画面サイズに応じてスタイルを変更します。
• window.innerWidthやwindow.innerHeightプロパティを使用して、ブラウザのウィンドウサイズを取得します。

function adjustStyles() {
  const screenWidth = window.innerWidth;

  if (screenWidth <= 1024) {
    document.body.style.fontSize = '14px';
    document.querySelector('.container').style.width = '80%';
  } else {
    // 画面幅が1024ピクセル以上の場合のスタイル
  }
}

window.addEventListener('resize', adjustStyles);
adjustStyles();

CSSのメディアクエリを複数定義

• 複数のメディアクエリを定義して、異なる画面サイズごとにスタイルを指定します。

@media screen and (max-width: 600px) {
  /* 画面幅が600ピクセル以下の場合 */
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  /* 画面幅が601ピクセル以上1024ピクセル以下の場合 */
}

@media screen and (min-width: 1025px) {
  /* 画面幅が1025ピクセル以上の場合 */
}

CSSプリプロセッサ（Sass、Lessなど）の機能を利用

• 条件文やループを使用して、複数のメディアクエリを生成することもできます。
• CSSプリプロセッサの変数やミックスインを使用して、スタイルをより効率的に管理します。

コード例（Sassの場合）：

$breakpoint-small: 600px;
$breakpoint-medium: 1024px;

@mixin media($breakpoint) {
  @media screen and (max-width: $breakpoint) {
    @content;
  }
}

@include media($breakpoint-small) {
  // 画面幅が600ピクセル以下の場合のスタイル
}

@include media($breakpoint-medium) {
  // 画面幅が1024ピクセル以下の場合のスタイル
}