メディアクエリとは、CSS3から使えるようになった機能の1つで、画面サイズやブラウザの表示領域に応じて、適用させるスタイルシートを切り替えることができます。これによりパソコンやスマートフォンなどユーザーの閲覧環境に合わせたデザイン設計をCSSで行うことができます。

link要素でCSSを切り替える

HTMLのlink要素を利用してCSSを使い分ける方法があります。例えば、PCとスマホでスタイルシートを使い分けたい場合には、以下のような指定をします。

<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 799px)">
<link rel="stylesheet" href="pc.css" media="screen and (min-width: 800px)">

ブラウザの表示領域が799px以下の場合は「mobile.css」が適用され、800px以上の場合は「pc.css」が適用されるという指定になります。表示領域によって使用するCSSファイルを完全に使い分けたいときに利用したりします。

CSS内部に指定して切り替える

スタイルシートを使って条件に合わせて切り替える方法もあります。こちらの方法は1つのCSSファイル内にすべてのスタイルを記述していくため、閲覧環境ごとにCSSファイルを分けたりしません。

@media screen and (max-width:479px) {
表示領域が479px以下の場合に適用されるスタイルを記述
}

@media screen and (min-width:768px) {
表示領域が768px以上の場合に適用されるスタイルを記述
}

このようにブレークポイントと呼ばれる基準値を利用して、表示領域に合わせて適用させるスタイルを切り替えていきます。「max-width」は〇〇px以下、「min-width」は〇〇px以上の指定となります。これを組み合わせて「〇〇px以上□□px以下」といった複数の指定もすることができます。

@media (min-width: 600px) and (max-width: 959px) {
表示領域が600px以上959px以下の場合に適用されるスタイルを記述
}

この場合は、600～959pxの表示領域に限ってスタイルを適用させることができます。細かく区切って指定をすることもできますが、あまり細かく指定し過ぎてしまうと、かえってスタイルシートを管理するのに大変になることもあるので、状況に合わせてブレークポイントを見極めて使うと良いでしょう。

おすすめの記事