HTMLとCSSのメモ（コピペ用）
HOMEに戻る

レスポンシブ対応するためのメディアクエリの書き方

CSS

メディアクエリあれこれ

CSS
@media screen and (max-width:599px){
  599px以下に適用されるCSS
}
@media screen and (min-width:600px){
  600px以上に適用されるCSS
}
@media screen and (min-width:600px) and (max-width:1080px){
  600px以上 1080px以下に適用されるCSS
}
@media only screen and (min-width:1081px){
  1081px以上に適用されるCSS
}
@media (orientation:landscape) {
  スマホやタブレットを横向きにした時に適用されるCSS
}
@media (orientation:portrait){
  スマホやタブレットを縦向きにした時に適用されるCSS
}
@media (orientation:landscape) and (max-width:767px){
  デバイスが横向き、かつ画面の横幅が767px以下の場合に適用されるCSS
}

基準になるスマーフォンの幅やデザインにより、ブレイクポイントは適宜調整。

印刷用メディアクエリ

きっちり表示できなくてもよいが、Webページでいらない部分を削除して印刷したいという場合に、印刷用のメディアクエリを利用する。あまりおすすめではないです。

@media print　使用例

CSS
@media print {
  .header{display:none;} //”.header”を印刷しない
}

印刷サイズを指定する場合（下記はA4用）

CSS
@media print and (width: 210mm) and (width: 297mm) {
  .header{ background-color:#f00;}
}

あくまで緊急避難的に必要箇所を記述する感じで利用する。
別途、印刷用のprint.cssを作成したほうが、管理が楽です。