CSSメディアクエリ解説

CSSメディアクエリブレークポイントの日本語解説

CSSメディアクエリブレークポイントとは、CSSでレスポンシブデザインを実現するための重要な概念です。デバイスの画面幅に応じて、異なるスタイルを適用するための基準点となるスクリーンサイズを指します。

具体的なブレークポイントと意味

• large-desktop
  特に大きい画面サイズのデバイス向け。
• desktop
  デスクトップコンピュータや大型モニターなど、大きな画面サイズのデバイス向け。
• tablet
  タブレットや小型ノートパソコンなど、中程度の画面サイズのデバイス向け。
• mobile
  携帯電話や小型タブレットなど、小さな画面サイズのデバイス向け。

ブレークポイントの具体的な使い方

@media screen and (max-width: 768px) { /* mobile */
  /* mobile用のスタイル */
}

@media screen and (min-width: 769px) and (max-width: 1024px) { /* tablet */
  /* tablet用のスタイル */
}

@media screen and (min-width: 1025px) { /* desktop */
  /* desktop用のスタイル */
}

上記のように、メディアクエリを使ってブレークポイントを定義し、それぞれのブレークポイントに合わせたスタイルを適用します。

ブレークポイントの設定方法

ブレークポイントの具体的な値は、ターゲットとするデバイスやデザインの要件に応じて調整します。一般的な目安として、以下の値がよく使用されますが、プロジェクトの状況に応じて適宜変更してください。

• large-desktop
  1200px
• desktop
  1024px
• tablet
  768px
• mobile
  480px

注意点

• ブレークポイントの値はプロジェクトの要件に合わせて調整してください。
• 複数のブレークポイントを組み合わせることで、より複雑なレスポンシブデザインを実現することができます。
• ブレークポイントはあくまでも目安であり、必ずしもすべてのデバイスに当てはまるとは限りません。

基本的なメディアクエリの使い方

@media screen and (max-width: 768px) { /* mobile */
  /* mobile用のスタイル */
  body {
    font-size: 14px;
  }
  .header {
    display: none;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) { /* tablet */
  /* tablet用のスタイル */
  body {
    font-size: 16px;
  }
  .header {
    display: block;
  }
}

@media screen and (min-width: 1025px) { /* desktop */
  /* desktop用のスタイル */
  body {
    font-size: 18px;
  }
  .header {
    display: flex;
    justify-content: space-between;
  }
}

コード解説

• @media screen and (min-width: 1025px)
  画面幅が1025px以上のデバイス（デスクトップ）に対して適用されるスタイルを定義します。
• @media screen and (min-width: 769px) and (max-width: 1024px)
  画面幅が769px以上1024px以下のデバイス（タブレット）に対して適用されるスタイルを定義します。

具体的なスタイル例

• .header { display: flex; justify-content: space-between; }
  デスクトップデバイスではヘッダーをフレックスボックスレイアウトで配置し、コンテンツを左右に均等に配置します。
• .header { display: block; }
  タブレットデバイスではヘッダーを表示します。
• body { font-size: 14px; }
  モバイルデバイスではフォントサイズを14pxに設定します。

複数のブレークポイントを組み合わせる

@media screen and (max-width: 480px) { /* small mobile */
  /* small mobile用のスタイル */
}

@media screen and (min-width: 481px) and (max-width: 768px) { /* large mobile */
  /* large mobile用のスタイル */
}

複数のブレークポイントを組み合わせることで、より細かいデバイスごとのスタイル調整が可能です。

応用的なメディアクエリ

• @media screen and (color: no-preference)
  カラーブラインドユーザーに対して適用されるスタイルを定義します。
• @media screen and (orientation: landscape)
  横向き画面に対して適用されるスタイルを定義します。
• @media print
  印刷メディアに対して適用されるスタイルを定義します。

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

JavaScriptを使用して、デバイスの画面幅を検知し、それに応じてスタイルを変更することができます。

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

  if (screenWidth <= 768) {
    // mobile用のスタイルを適用
  } else if (screenWidth <= 1024) {
    // tablet用のスタイルを適用
  } else {
    // desktop用のスタイルを適用
  }
}

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

CSS変数とメディアクエリ

CSS変数を使用して、メディアクエリで定義した値を他のスタイルに適用することができます。

:root {
  --mobile-font-size: 14px;
  --tablet-font-size: 16px;
  --desktop-font-size: 18px;
}

@media screen and (max-width: 768px) {
  :root {
    --font-size: var(--mobile-font-size);
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  :root {
    --font-size: var(--tablet-font-size);
  }
}

@media screen and (min-width: 1025px) {
  :root {
    --font-size: var(--desktop-font-size);
  }
}

body {
  font-size: var(--font-size);
}

CSS Gridレイアウト

CSS Gridレイアウトを使用することで、デバイスの画面幅に応じてレイアウトを柔軟に変更することができます。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

CSS Flexboxレイアウト

CSS Flexboxレイアウトを使用することで、アイテムの配置やサイズを柔軟に変更することができます。

.container {
  display: flex;
  flex-wrap: wrap;
}

フレームワークやライブラリ

BootstrapやFoundationなどのフレームワークやライブラリを使用することで、レスポンシブデザインを簡単に実装することができます。