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;}
}

 
 
このエントリーをはてなブックマークに追加
Author ( この記事を書いた人 )

阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場