【保存版】CSS「@media.width」の基礎から応用まで！メディアクエリを使いこなして自由自在なWebデザイン

CSSの@media.widthメディアクエリは、Webページのデザインをデバイスの画面幅に応じて動的に調整するために使用されます。これは、レスポンシブWebデザインの重要な要素であり、さまざまなデバイスでユーザーに最適な閲覧体験を提供するのに役立ちます。

構文

@media only screen and (max-width: 768px) {
  /* 小さい画面向けのスタイル */
}

上記は、画面幅が768ピクセル以下の場合にのみ適用されるスタイルブロックの例です。

主な特性

• screen
  デスクトップやラップトップなどのコンピューター画面を対象にします。省略することもできますが、念のため明記しておくと良いでしょう。
• only
  指定されたメディアタイプのみを対象にします。省略することもできますが、古いブラウザとの互換性を考慮して明示的に記述することをお勧めします。
• min-width
  画面の最小幅をピクセル単位で指定します。
• max-width
  画面の最大幅をピクセル単位で指定します。

• 方向による区別
  orientation メディア特性を使用して、ポートレートモードとランドスケープモードを区別できます。
• 解像度による区別
  dpi メディア特性を使用して、デバイスの解像度に基づいてスタイルを適用できます。
• デバイスの種類による区別
  handheld や tablet などのメディアタイプを使用して、スマートフォンやタブレットなどの特定のデバイスをターゲットにすることができます。

実践的な例

• スマートフォン向けのデザイン
  

@media only screen and (max-width: 600px) {
  body {
    font-size: 16px;
    line-height: 1.5;
  }
  
  h1 {
    font-size: 24px;
  }
  
  img {
    max-width: 100%;
  }
}

• タブレット向けのデザイン
  

@media only screen and (min-width: 601px) and (max-width: 960px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  
  h1 {
    font-size: 30px;
  }
  
  img {
    max-width: 80%;
  }
}

• デスクトップ向けのデザイン
  

@media only screen and (min-width: 961px) {
  body {
    font-size: 20px;
    line-height: 1.7;
  }
  
  h1 {
    font-size: 36px;
  }
  
  img {
    max-width: 70%;
  }
}

• 古いブラウザでは、一部のメディアクエリがサポートされていない場合があります。
• メディアクエリは、ブラウザーウィンドウのサイズではなく、デバイスの画面サイズに基づいています。
• メディアクエリは、上から下へ順番に評価されます。そのため、条件が重複する場合は、より具体的なクエリが優先されます。

---

レスポンシブなメニュー

/* デフォルトスタイル（すべて画面幅） */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
  padding: 10px 20px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 20px;
}

nav a {
  color: #333;
  text-decoration: none;
}

/* タブレット向けのデザイン（最大幅960px） */
@media only screen and (max-width: 960px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }

  nav ul {
    margin-top: 10px;
  }

  nav li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/* スマートフォン向けのデザイン（最大幅600px） */
@media only screen and (max-width: 600px) {
  nav a {
    font-size: 14px;
  }
}

カラムレイアウトの切り替え

この例では、画面幅に応じてコンテンツを1カラムまたは2カラムに切り替えます。

/* デフォルトスタイル（すべて画面幅） */
.container {
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  flex: 1 0 30%;
  padding: 10px;
  background-color: #eee;
}

.main {
  flex: 2 0 70%;
  padding: 10px;
}

/* タブレット向けのデザイン（最大幅960px） */
@media only screen and (max-width: 960px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    order: 1;
  }

  .main {
    order: 2;
  }
}

/* スマートフォン向けのデザイン（最大幅600px） */
@media only screen and (max-width: 600px) {
  .sidebar,
  .main {
    flex: 1 0 100%;
  }
}

この例では、画面幅に応じて画像のサイズを自動的に調整します。

img {
  max-width: 100%;
  height: auto;
}

---

CSS Grid Layoutとfr単位

CSS Grid Layoutは、柔軟なレイアウトを構築するための強力なツールであり、メディアクエリを使用せずに画面サイズに応じてコンテンツを調整することができます。fr単位を使用することで、要素を自動的に伸縮させることができます。

例：

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

.item {
  background-color: #ccc;
  padding: 10px;
}

上記コードは、画面幅に応じて列の数を自動的に調整し、各要素を均等に配置します。

CSS Flexbox

CSS Flexboxも、柔軟なレイアウトを構築するためのツールであり、メディアクエリを使用せずに画面サイズに応じてコンテンツを調整することができます。flexプロパティを使用して、要素を伸縮させることができます。

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

.item {
  flex: 1 0 30%;
  background-color: #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

/* タブレット向けのデザイン（最大幅768px） */
@media only screen and (max-width: 768px) {
  .item {
    flex: 1 0 50%;
  }
}

/* スマートフォン向けのデザイン（最大幅600px） */
@media only screen and (max-width: 600px) {
  .item {
    flex: 1 0 100%;
  }
}

上記コードは、画面幅に応じて要素の幅を自動的に調整します。

JavaScript

JavaScriptを使用して、画面サイズを検知し、それに応じてスタイルを動的に変更することもできます。ただし、この方法は、CSSのみのソリューションよりも複雑でメンテナンスが困難になる可能性があります。

function adjustLayout() {
  const container = document.querySelector('.container');
  const items = document.querySelectorAll('.item');
  const screenWidth = window.innerWidth;

  if (screenWidth < 768) {
    container.style.flexDirection = 'column';
    items.forEach(item => item.style.flex = '1 0 50%');
  } else if (screenWidth < 600) {
    container.style.flexDirection = 'column';
    items.forEach(item => item.style.flex = '1 0 100%');
  } else {
    container.style.flexDirection = 'row';
    items.forEach(item => item.style.flex = '1 0 30%');
  }
}

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

上記コードは、ウィンドウのサイズ変更時にadjustLayout関数を呼び出し、画面サイズに応じて要素のスタイルを調整します。

注意点

上記で紹介した方法は、それぞれ長所と短所があります。状況に応じて最適な方法を選択する必要があります。

• JavaScript
  複雑なレイアウトや動的なレイアウト変更に適していますが、メンテナンスが困難になる可能性があります。
• CSS Flexbox
  シンプルで柔軟なレイアウトを構築するのに適していますが、複雑なレイアウトには不向きな場合があります。
• CSS Grid Layoutとfr単位
  高度なレイアウトを構築するのに適していますが、複雑になる可能性があります。

• 新しいCSS機能の登場により、将来的にはメディアクエリが必要なくなる可能性があります。
• メディアクエリは、依然としてレスポンシブWebデザインの重要なツールです。上記で紹介した方法は、メディアクエリを完全に代替するものではありません。