初心者向け!CSSのMedia Queriesと@media.device-widthでレスポンシブデザインを作ろう

2024-04-02

CSSのMedia Queriesと@media.device-width

@media.device-widthは、デバイスのに基づいてスタイルシートを切り替えるためのメディアクエリです。例えば、以下のように記述することで、スマートフォンとタブレット、デスクトップそれぞれに異なるスタイルを適用できます。

/* スマートフォン */
@media (max-width: 575px) {
  body {
    font-size: 16px;
  }
}

/* タブレット */
@media (min-width: 576px) and (max-width: 767px) {
  body {
    font-size: 18px;
  }
}

/* デスクトップ */
@media (min-width: 768px) {
  body {
    font-size: 20px;
  }
}

@media.device-widthの使いどころ

  • スマートフォン、タブレット、デスクトップそれぞれに異なるレイアウトを適用する
  • 画面幅に応じて、画像のサイズや配置を調整する
  • フォントサイズや行間を調整する
  • ナビゲーションバーの表示・非表示を切り替える

その他のメディアクエリ

  • @media.min-width:指定された最小幅以上のデバイスに適用
  • @media.max-width:指定された最大幅以下のデバイスに適用
  • @media.min-height:指定された最小高さ以上のデバイスに適用
  • @media.max-height:指定された最大高さ以下のデバイスに適用
  • @media.orientation:デバイスの向き(縦向き/横向き)を指定

注意点

  • メディアクエリは、ブラウザの互換性によって動作が異なる場合があります。
  • 複数のメディアクエリが一致する場合、メディアクエリリストの最後のものが適用されます。

補足

  • 上記の例はあくまで基本的なものです。より複雑な条件を設定することも可能です。
  • メディアクエリは、JavaScriptと組み合わせてより動的なレスポンシブデザインを実現できます。


さまざまなデバイス向けのサンプルコード

スマートフォン

@media (max-width: 575px) {
  /* スマートフォン向けのスタイル */
  body {
    font-size: 16px;
  }
  
  .main-content {
    width: 100%;
  }
  
  .sidebar {
    display: none;
  }
}

タブレット

@media (min-width: 576px) and (max-width: 767px) {
  /* タブレット向けのスタイル */
  body {
    font-size: 18px;
  }
  
  .main-content {
    width: 75%;
  }
  
  .sidebar {
    display: block;
    width: 25%;
  }
}

デスクトップ

@media (min-width: 768px) {
  /* デスクトップ向けのスタイル */
  body {
    font-size: 20px;
  }
  
  .main-content {
    width: 50%;
  }
  
  .sidebar {
    width: 30%;
  }
}
  • 画像のサイズや配置をデバイス幅に応じて調整する
@media (max-width: 575px) {
  img {
    width: 100%;
  }
}

@media (min-width: 576px) {
  img {
    width: 50%;
  }
}
  • ナビゲーションバーの表示・非表示を切り替える
@media (max-width: 575px) {
  .nav {
    display: none;
  }
}

@media (min-width: 576px) {
  .nav {
    display: block;
  }
}


Media Queries を使用せずにデバイス幅に応じたスタイルを適用する方法

JavaScript を使用して、デバイス幅を取得し、それに応じてスタイルを動的に変更することができます。

const deviceWidth = window.innerWidth;

if (deviceWidth <= 575) {
  // スマートフォン向けのスタイル
  document.body.style.fontSize = "16px";
} else if (deviceWidth <= 767) {
  // タブレット向けのスタイル
  document.body.style.fontSize = "18px";
} else {
  // デスクトップ向けのスタイル
  document.body.style.fontSize = "20px";
}

CSS Grid レイアウトを使用すると、デバイス幅に応じて要素を自動的に配置することができます。

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}

@media (max-width: 575px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

Flexbox レイアウトを使用すると、要素を柔軟に配置することができます。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 575px) {
  .container {
    flex-direction: row;
  }
}

Media Feature Queries Level 5 では、min-widthmax-width 以外にも、より詳細な条件を指定することができます。

@media (min-width: 575px) and (max-width: 767px) and (orientation: landscape) {
  /* タブレット横向き向けのスタイル */
}
  • シンプルなレイアウトの場合は、@media.device-width を使用するのが easiest 方法です。
  • より複雑なレイアウトの場合は、JavaScript や CSS Grid レイアウトを使用する必要があります。
  • 将来のブラウザ互換性を考慮する場合は、Media Feature Queries Level 5 を使用することができます。



ゲーム理論:ビジネス、政治、日常生活に潜む戦略的思考

ゲーム理論の基本的な要素は以下の3つです。プレイヤー: 意思決定を行う主体戦略: プレイヤーが選択できる行動の選択肢利得: プレイヤーが各戦略を選択したときの得られる利益ゲーム理論は、これらの要素を数学的なモデルを用いて分析することで、プレイヤーがどのような戦略を選択するのか、どのような結果になるのかを予測することができます。



CSSでセピア色の世界へようこそ!画像や要素をレトロに変身させる魔法の方法

CSSの「Filter Effects」機能の一つである「sepia()」は、画像や要素をモノクロ化し、茶褐色(セピア色)のトーンを適用する関数です。古い写真のようなレトロな雰囲気を演出したい場合などに効果的に使用できます。構文n は、セピア色の強さを表す数値です。0.0の場合は元の画像の色合いが維持され、1.0になると完全にセピア色になります。


デバイスに合わせた最適な表示: CSS Media Queriesと@media.monochrome

@media. monochromeは、モノクロディスプレイ向けのスタイルシートを指定するメディアクエリです。カラーディスプレイではないデバイスで、どのようにコンテンツを表示するかを制御できます。利用例:上記の例では、モノクロディスプレイでは背景色を白、テキスト色を黒に設定しています。


CSSレイアウトの達人になる:z-indexとスタックコンテキストを使いこなすためのチュートリアル

この例では、z-indexとスタックコンテキストの概念を理解するために、複数の要素を重ねて配置する方法について説明します。z-indexは、要素の重なり順を制御するプロパティです。スタックコンテキストは、z-indexが適用される範囲を決定します。


CSS Miscellaneous: border-image-outset プロパティの分かりやすい解説

このプロパティの仕組み:border-image-outset は、1 つから 4 つの値を受け取ることができます。 1 つの値: すべての辺に同じアウトセット距離を設定します。 2 つの値: 最初の値は上辺と下辺、2 番目の値は左右の辺に設定されます。 3 つの値: 最初の値は上辺、2 番目の値は左右の辺、3 番目の値は下辺に設定されます。 4 つの値: 上辺、右辺、下辺、左辺の順に各辺に設定されます。



CSSカラースキームを使いこなして、アクセシビリティと使いやすさを向上させる

CSSのcolor-schemeプロパティは、ユーザーのシステム設定に基づいて、ページ全体のカラーパレットを調整することができます。これは、ユーザーインターフェースのアクセシビリティと使いやすさを向上させるために役立ちます。カラースキームの種類


@media.any-pointer 完全ガイド: タッチスクリーンデバイスとペン入力デバイス向けスタイルシート

@media. any-pointer は、ユーザーが タッチスクリーン や ペン などのポインティングデバイスを使用しているかどうかを検知する CSS メディアクエリです。デバイスの種類に関わらず、これらのデバイスで操作しやすいようにスタイルを調整できます。


奥深いフォントデザインの世界へようこそ!@font-face.font-feature-settings完全ガイド

@font-face. font-feature-settingsは、ウェブフォントに適用される特殊な機能を制御するためのCSSプロパティです。フォントファミリーごとに、字形、スタイル、配置、その他の詳細な設定を調整できます。この高度な機能を使いこなすことで、より個性的で魅力的なテキストデザインを実現できます。


デバイスに合わせた最適な表示: CSS Media Queriesと@media.monochrome

@media. monochromeは、モノクロディスプレイ向けのスタイルシートを指定するメディアクエリです。カラーディスプレイではないデバイスで、どのようにコンテンツを表示するかを制御できます。利用例:上記の例では、モノクロディスプレイでは背景色を白、テキスト色を黒に設定しています。


【上級者向け】FlexboxレイアウトとJavaScriptで子要素を動的に縮小する方法

flex-shrinkは、以下の状況で機能します。親要素の幅が、flex-basisで設定された子要素の合計幅よりも小さい場合flex-wrapプロパティがno-wrapに設定されている場合これらの条件を満たす場合、flex-shrinkの値に応じて、子要素が縮小されます。