CSSで画面をレスポンシブに画面幅によって表示を切り替える方法/@media（メディアクエリ）の使い方

レスポンシブデザインの要所、メディアクエリの解説記事です。基本的な使い方は難しくないので、まずポイントを押さえてしまいましょう。

メディアクエリとは
メディアクエリの使い方
CSSファイルごと分ける場合

メディアクエリとは

パソコンとスマホでは見せ方や画像を変える、タブレットでも変える、印刷時にも変えるというように、デバイスや媒体によって同じページでも段組みやレイアウトを切り替える技術のことです。デバイスの縦・横で切り替えたりもできます。

メディアクエリの使い方

構文はこちら。

スタイルを画面の幅やデバイスによって振り分ける
@media 条件{セレクタ:スタイル}

画面幅が1024px以上/以下で背景の色と幅が変わるボックスを作ってみます。

test

.blk-or-wht{
background-color:white;
color:black;
text-align:center;
width:100px;
height:25px;
border:1px solid black;
}

@media(max-width:1024px){
  .blk-or-wht{
  width:50px;
  background-color:black;
  color:white;
  }
}

max-width:1024pxの場合は、1024px以下で条件が適用されます。条件はandで接続することも可能です。
よくあるPC/タブレット/スマホ縦横で表示を切り替える場合は次のように書きます。この1024や768のような表示が切り替わる境界をブレイクポイントと言います。

@media screen and(max-width:768px) {
...
}
@media screen and(min-width:768px) and (max-width:1024px) {
...
}
@media screen and(max-width:1024px){
...
}

最初は省略していましたが、頭につけてるscreenはデバイスやPCの画面表示の際に適用、という意味のメディアタイプの指定です。印刷に適用したい場合はprintと記述します。特にメディアタイプを問わない場合はallと記述します。
上のスタイルの振り分けでは、画面の小さいものから順番に記述していますが、こういう書き方をモバイルファーストと呼びます。逆に画面の大きいものから順に書く場合はデスクトップファースト(PCファースト)です。読み込み回数が少なくなるので、モバイルの場合は処理が気持ち軽くなります。どういう媒体で読まれるメディアかによってどちらで書くかを決めます（たとえばうちのサイトはほとんどPCからの閲覧なので、デスクトップファーストで書いてます）。
条件の値はwidthで行う場合が多いですが、デバイスの方向をorientation:portrait（縦）/landscape（横）で指定したり、ブラウザウィンドウの縦横比をaspect-ratioで指定したり、Device Pixel Ratioで画面解像度で振り分けるすることもできます。また、論理演算子もand以外にも使えるようで、,区切りで条件()を記述してどれか満たしたら適用、というようなことも可能です。

CSSファイルごと分ける場合

上の記述はひとつのCSSファイルに書く場合ですが、最初からちがうCSSを読み込ませるという方法もあります。

<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">
<link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:768px)">
<link rel="stylesheet" href="medium.css" media="screen and (min-width:768px) and (max-width:1024px)">
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">