読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

メディアクエリの書き方

メディアクエリを記述する順番

  • 後から記述した書式指定によりそれより前に記述された値が上書きされます
  • PC用とスマートフォン用の2種類の場合は、「〜以上」「〜以下」という条件分岐でできるため複雑にはなりません
  • タブレット用も含めた3種類になると、記述する順番が影響するため注意が必要です
  • 「〜以下」を条件に記述する場合は、サイズが大きいものから記述します
  • 「〜以上」を条件に記述する場合は、サイズが小さいものから記述します

複数条件の連結

  • 「かつ」や「または」などで複数の条件を結ぶことも可能です
AND条件
  • 複数の条件を「かつ」で結ぶときは「and」キーワードを利用します
@media screen and ( min-width: 480px ) and ( max-width: 640px ) {................}

この場合、「画面の幅が、480px〜640pxの場合」という意味になります。

OR条件
  • 複数の条件を「または」で結ぶときには、各条件を「, カンマ」で区切って記述します
@media screen and ( min-width: 480px ) ,  screen and ( max-width: 640px ) {................}

この場合、「画面の幅が、480px以下、または640px以上の場合」という意味になります。

否定条件とonly

  • 否定条件やIE8などの古いブラウザ対策のときに利用します
not(否定条件)の指定
  • @mediaに続けて「not」キーワードを記述すると否定条件を指定できます
@media not screen and ( max-width: 480px ) {................}

この場合、「画面の幅が、480px以下ではない場合」つまり「480px以上」という意味になります。

  • 否定条件を利用するときは、「メディアタイプ」の記述が必須です
onlyキーワードの指定
  • メディアクエリをサポートしていないブラウザ向けの対策として利用します
  • メディアクエリをサポートしているブラウザでは、問題なくメディアクエリが処理されます
@media only screen and ( max-width: 480px ) {................}

画面の幅以外の条件指定

  • メディアクエリの条件指定に利用できる主なプロパティ

プロパティ min- / max- 条件
width Web画面の幅
height Web画面の高さ
aspect-ratio Web画面の縦横比
device-width バイス画面の幅
device-height バイス画面の高さ
device-aspect-ratio バイス画面の縦横比
orientation

画面の向き(縦方向)

resolution 画面の解像度

height
  • 「画面の高さ」を条件に指定できます
  • max-height(〜以下)、min-height(〜以上)などのプロパティを使用することも可能です
  • 実際には、Webの世界の高さはフレキシブルが基本のため指定することはありません
aspect-ratio
  • 「画面の縦横比」を条件に指定できます
  • 横方向と縦方向の比率を「/ スラッシュ」で区切って値を指定します
@media only screen and ( min-aspect-ratio: 4/3 ) {................}

この場合、画面の比率が、「4:3」より横長になったときに、メディアクエリの条件が有効になります

device-width / device-height / device-aspect-ratio
  • 「画面の幅/高さ/縦横比」を条件に指定できます
  • これらのプロパティで条件を指定した場合は、Webの表示領域ではなく端末の画面サイズに有効/無効が判別されます
@media only screen and ( min-device-width: 1600px ) {................}

この場合、「液晶画面の幅」が1600px以上のときに、メディアクエリの条件が有効になります。
物理的な画面サイズで判別されるため、ブラウザウィンドウを変更しても変化することはありません。

orientation
  • 「画面の向き」を条件に指定できます
  • 縦向き(縦長)の場合は「portrait」、横向き(横長)の場合は「landscape」を値にします
@media only screen and ( orientation: landscape ) {................}

この場合、端末を横向きしたときにだけ、メディアクエリの条件が有効になります。
ただし、この条件はパソコンでも機能することに注意しなければいけません。


よって、実際に使用するときには以下のように記述します。

@media only screen and ( max-width: 640px ) and ( orientation: landscape ) {................}
resolution
  • 「画面の解像度」を条件に指定できます


以下のように記述すると、画面の解像度が300dpi以上のときにメディアクエリの書式指定が有効になります。

@media only screen and ( min-resolution: 300dpi ) {................}


resolutionのサポート状況 Can I use
http://caniuse.com/#feat=css-media-resolution

メディアタイプの種類

  • W3Cで定義されているメディアタイプ

メディアタイプ バイスの種類
all すべてのデバイス
screen 画面
print 印刷
handheld モバイル機器
projection プロジェクター
tv テレビ
tty 文字幅固定のデバイス
braille 点字ディスプレイ
embossed 点字プリンター
speech 音声


以下のように記述すると、画面表示の色に関係なく文字色を黒色、背景を白色で印刷できるようになります。

@media print {
  * {
    color: #000 !important;
    background: #FFF !important;
  }
}