2021/01/26

CSSのメディアクエリ【現役エンジニアが解説】

PROGRAM

今回は、CSSのメディアクエリについて、link要素とスタイルシートでの指定方法に分け、簡単に解説していきます。

link要素で指定

端末のサイズによって、読み込むCSSファイルを指定できます。

端末の条件で、読み込むファイルを1つもしくは複数にすることも可能です。

<link rel="stylesheet" href="hoge_s.css" media="screen and (max-width:479px)">
<link rel="stylesheet" href="hoge_m.css" media="screen and (min-width:480px) and (max-width:767px)">
<link rel="stylesheet" href="hoge_l.css" media="screen and (min-width:768px)">

上記のコードでは、端末サイズが479ピクセル以下、480ピクセルから767ピクセル、768ピクセル以上で読み込むファイルを分けています。

スタイルシートで指定

端末のサイズによって、読み込むスタイルを指定することもできます。

全てのサイズを列挙する場合と、デフォルトのスタイルをベースとする場合の2通りの方法があります。

@media screen and (max-width:479px) {
    /* スマホ向け */
}
@media screen and (min-width:480px) and (max-width:767px)  {
    /* タブレットやスマホ向け */
}
@media screen and (min-width:768px) {
    /* PCやタブレット向け */
}

上記のコードでは、端末サイズが479ピクセル以下、480ピクセルから767ピクセル、768ピクセル以上で全てのサイズを列挙してスタイルを分けています。

デバイスの向きの判定方法

端末のサイズだけでなく、端末の向きによっても、スタイルを分けられます。

min-widthやmax-widthの代わりに、orientationを使い、portraitで縦向き、landscapeで横向きを指定可能です。

@media screen and (orientation:portrait){
    /* 縦向き */
}
@media screen and (orientation:landscape){
    /* 横向き */
}

上記のコードでは、メディアクエリでデバイスの向きを判別し、縦向き(portrait)の場合と横向き(landscape)の場合とで適用するスタイルを分けています。

• facebook
• Tweet
• Read Later