メディアクエリ「CSS」ナナヨ マニュアル

閲覧しているメディアやブラウザの大きさによって、スタイルシートを切り替えます。

Bootstrapでも利用されているグリッド

CSS3から追加された機能です。

以前のメディアタイプでの指定から、さらに、横幅で切り替えが行われます。

これにより、パソコン、タブレット、スマートフォンのサイズ別に切り替えることができます。

記述例

@media (min-width: 800px) {
   /* 横幅が800px以上の場合のスタイル */
}

@media (max-width: 799px) {
   /* 横幅が799px以下の場合のスタイル */
}

@media (*****) {/*スタイル*/}　…適応させる条件を定義します。

 【min-width:800px】 …800px以上と条件定義（横幅の最小値が800pxまで対応）

 【max-width:799px】…799px以下と条件定義（横幅の最大値が799pxまで対応）

上記のような設定で、800pxを起点に有効になるスタイルシートが変わります。

ブレークポイント

Bootstrap5で運用されている、設定ポイントを例にすると、こんな感じです。

各メディアの大きさに合わせて、表記が切り替わるように６段階のポイントを設定しています。

分かりやすく、ブレイクポイントで背景色を設定しました。

ウィンドウサイズ（ブラウザ）の横幅を調整してみてください。横幅により下記の色が変わります。

これが、スタイルシートの切り替えになります。

ブレイクポイントのCSS

.size-color {
  background-color: #7fffbf;
  }
/*横向きモバイル*/
@media (min-width: 576px) {
.size-color {
  background-color: #7fffff;
  }
}
/*タブレット*/
@media (min-width: 768px) {
.size-color {
  background-color: #7fbfff;
  }
}
/*デスクトップ*/
@media (min-width: 992px) {
.size-color {
  background-color: #7f7fff;
  }
}
/*ワイド・デスクトップ*/
@media (min-width: 1200px) {
.size-color {
  background-color: #bf7fff;
  }
}
/*さらにワイドな・デスクトップ*/
@media (min-width: 1400px) {
.size-color {
  background-color: #ff7fbf;
  }
}

class=”size-color”　で指定した背景色をブレイクポイントで、切り替える指定をしています。

ななこ

このスタイルシートで、PC用とモバイル版で、それぞれページを作らなくてよくなったよ！