CSSのメディアクエリ：レスポンシブデザインの基本

Font Awesomeとpositionに続いて、「メディアクエリ」を学びました。画面サイズに応じてスタイルを変更し、スマホやタブレットにも対応できます。

メディアクエリとは

メディアクエリは、画面サイズに応じてCSSのスタイルを設定できる手法です。

構文: @media (条件) { }

@media (max-width: 768px) {
  /* 画面幅が768px以下のときに適用 */
  .box {
    width: 100%;
  }
}

ポイント

  • @media の後にセミコロンは不要
  • 条件に当てはまるときに、{} 内のCSSが適用される

max-width：最大幅

max-width は、最大幅を指定します。

@media (max-width: 768px) {
  /* 画面幅が768px以下のとき */
  .menu {
    display: none; /* メニューを非表示 */
  }
}

「画面幅が◯◯px以下のとき」という条件になります。

min-width：最小幅

min-width は、最小幅を指定します。

@media (min-width: 1024px) {
  /* 画面幅が1024px以上のとき */
  .container {
    width: 1000px;
  }
}

「画面幅が◯◯px以上のとき」という条件になります。

ブレイクポイント

ブレイクポイントとは、条件指定の「●px」のことです。デザインが切り替わるポイントです。

一般的なブレイクポイント：

  • 768px: タブレット以下（スマホ・タブレット）
  • 1024px: PC以上
/* スマホ・タブレット */
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

/* PC */
@media (min-width: 1024px) {
  .container {
    width: 1000px;
  }
}

実用例：レスポンシブデザイン

/* PC表示（デフォルト） */
.box {
  width: 300px;
  display: inline-block;
}

/* タブレット以下 */
@media (max-width: 768px) {
  .box {
    width: 45%; /* 横幅を%指定に変更 */
  }
}

/* スマホ */
@media (max-width: 480px) {
  .box {
    width: 100%; /* 1列表示 */
    display: block;
  }
}

box-sizing: border-box

box-sizing を border-box に指定すると、要素の幅（width）の合計に padding と border が含まれます。

* {
  box-sizing: border-box;
}

box-sizing の違い

/* デフォルト（content-box） */
.box {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}
/* 実際の幅 = 300px + 20px×2 + 2px×2 = 344px */

/* border-box */
.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}
/* 実際の幅 = 300px（paddingとborderを含む） */

重要: margin は含まれません。

*（アスタリスク）：全ての要素を指定

*（アスタリスク） は、全ての要素を指定します。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

サイト全体に共通のスタイルを適用したいときに使います。

floatとclear

float：要素を横並びに

.box {
  float: left; /* 左に寄せて横並び */
}

問題：親要素の高さが0になる

子要素が全て float の時、親要素の高さは0になります。

<div class="parent">
  <div class="child" style="float: left;">子要素1</div>
  <div class="child" style="float: left;">子要素2</div>
</div>

親要素の高さが0になってしまいます。

解決策：clear で解除

clear: left で float を解除します。

<div class="parent">
  <div class="child" style="float: left;">子要素1</div>
  <div class="child" style="float: left;">子要素2</div>
  <div style="clear: left;"></div> <!-- 空タグで解除 -->
</div>

空タグを使って float を解除するのが一般的です。

max-width で大きさを指定

max-width は、要素の最大幅を指定します（レスポンシブデザインで便利）。

img {
  max-width: 100%; /* 親要素の幅を超えない */
}

画像が親要素からはみ出すのを防げます。

非表示にした要素の表示

display: block で、非表示にした要素を表示できます。

/* デフォルトで非表示 */
.menu {
  display: none;
}

/* スマホでは表示 */
@media (max-width: 768px) {
  .menu {
    display: block;
  }
}

今日の学びのポイント

  • メディアクエリ: @media (条件) { } （セミコロン不要）
  • max-width: 最大幅（◯◯px以下）
  • min-width: 最小幅（◯◯px以上）
  • ブレイクポイント: デザインが切り替わるポイント（768px、1024pxなど）
  • box-sizing: border-box: width に padding と border を含める（margin は含まれない）
  • *: 全ての要素を指定
  • float: 要素を横並びに
  • clear: float を解除（空タグで解除）
  • max-width: 要素の最大幅を指定
  • display: block: 非表示要素を表示

メディアクエリを使うことで、PC・タブレット・スマホのすべてに対応したレスポンシブデザインが実現できます。

コメント