メディアクエリ:Bootstrapの使い方

PCサイト・モバイルサイトの微調整

レスポンシブウェブデザインを構築すると、どうしてもPCサイトと、スマートフォンサイトで、最終的に必ず微調整をします。
例えば「H1」のフォントサイズを、PCサイトでは40pt、スマートフォンサイトでは24ptのように微調整を行い、サイトを完成させます。今回のこの画面サイズに合わせた微調整の方法をご紹介します。

メディアクエリ

微調整はメディアクエリを使い、CSSを切り分けます。

スタイルシートを読み込む方法

//767pxまでの画面サイズに適用 (max-midth)
<link rel="stylesheet" href="xs.css" media="screen and (max-width:767px)">

//768px以上の画面サイズに適用(min-widht)
<link rel="stylesheet" href="sm.css" media="screen and (min-width:768px)">

CSSに記述する方法

@media screen and (max-width:767px) {
    /*　画面サイズが767px以下の場合読み込む　*/
    h1 { font-size:24pt;}
}
@media screen and (min-width:768px){
    /*　画面サイズが768px以上の場合読み込む　*/
    h1 { font-size:40pt;}
}

ポイント解説

---

Bootstrapは4つのブレークポイントがあります。各画面サイズ（767px以下、768px以上、992px以上、1200px以上）に合わせてフォントサイズや、コンテントエリアの幅が変わります。

 

この4カ所のブレークポイントに合わせて、微調整を行うのも良いかと思いますが、4つの画面サイズで確認しなくてはいけなくなるので、多くの工数を要します。私はよくスマホ用の調整（767px以下）と、PC用の調整（767px以上）の2カ所で調整することが多いです。
ですので、コードは上記でも例としてあげさせていただいたコードを使うことがおおいです。

 

@media screen and (max-width:767px) {
    /*　画面サイズが767px以下の場合読み込む　*/
    h1 { font-size:24pt;}
}
@media screen and (min-width:768px){
    /*　画面サイズが768px以上の場合読み込む　*/
    h1 { font-size:40pt;}
}