最終更新日：2022.05.23 [月]　公開日：2017.11.24 [金]　カテゴリー：html・CSS・jQuery・JS備忘

昔はスマホなどがなかったので、PCか携帯か・・・くらいのもんでしたが、今となってはタブレットもスマホもあり、それこそデバイスのサイズによってレイアウトを変えるのが当たり前のレスポンシブ時代になりました。

以前はこの程度の読み込み方、このmedia=“screen”とかmedia=“print”とかだけでもできていたのですが、デバイスの種類が増えて来て、これだけでは難しくなり、

というように、デバイスの幅などで判断してスタイルシートを当てることができるようになりました。
ちなみに、このサンプルコードは幅４８０ピクセルまではstyle.cssを読み込むという内容になります。

こういうのをメディアクエリというわけですが、メディアクエリにも何種類かやり方があるようです。

link rel =〜　で読み込む場合

/*480px以下の媒体ではstyle1.cssを読み込む*/


/*481px以上1024px以下の媒体ではstyle2.cssを読み込む*/


/*1025px以上の媒体ではstyle3.cssを読み込む*/

上記のような方法でスタイルシートを媒体のサイズによって分ける方法です。
完全に幅によって読み込むスタイルシートが別のスタイルシートになるので、それぞれ一通りスタイルを書く必要があります。

@importで読み込む場合

import.cssとかに以下を書いて、htmlにはimport.cssだけ読み込ませたら良い@import方式です。

@import url("style1.css") screen and (max-width:480px) ;
/*480px以下の媒体ではstyle1.cssを読み込む*/

@import url("style2.css") screen and (min-width:481px) and (max-width:1024px) ;
/*481px以上1024px以下の媒体ではstyle2.cssを読み込む*/

@import url("style3.css") screen and (min-width:1025px) ;
/*1025px以上の媒体ではstyle3.cssを読み込む*/

@mediaで読み込む場合

どのデバイスでも同じ共通の部分を書いて書くメディア部分を設定していく方法です。
共通部分が多くて、ちょっとの書き換えでいい場合なんかはこれが便利です。
ものすごく指定が多くて、逆に上書きとかさせるのがややこしい場合は@importとかlink relで完全に分けた方がややこしくなくて良いかと思います。

@media screen and (max-width:480px){
/*480px以下で適用する内容*/
}

@media screen and (min-width:481px){
/*481px以上で適用する内容*/
}

@media screen and (min-width:1025px){
/*1025px以上で適用する内容*/
}

色々なやり方があると思うのですが、私個人としては、PCようにザーッとスタイルを書いて、
後からメディアクエリでスマホサイズの指定をして調整していく・・・っていうやり方がやりやすく思います。

でも本当はスマホサイズからした方が良いらしいですね・・・昔からの癖でついつい先にPCをベースにして、あとからスマホサイズやタブレットサイズを調整していくパターンにしてしまいがちな私です。

以上、ざっと簡単にですがメディアクエリの自分的おさらいでした。