ブレイクポイントでスタイルを分けるCSSソースの書き方
ブレイクポイントが決まったら、CSSソースを記述しましょう。ブレイクポイントを使ってスタイルを分割するためには、CSS3のメディアクエリ(Media Queries)という記述方法を使います。メディアクエリは、下記のように条件を指定して適用対象を限定する書き方です。
@media (適用条件) {
/* この条件に限定したスタイル */
}
詳しくは記事「メディアクエリで画面サイズ別にCSSを切り替える方法」で解説していますのでご参照下さい。以下にも、簡単にだけご紹介しておきます。※複数の環境に共通する装飾を1度だけしか書かずに済む、前者(1)の書き方がおすすめです。
モバイルファーストでのCSSの書き方
モバイル版のデザインを基準にして、ブレイクポイント単位で装飾を追記していく形態のモバイルファーストなCSSソースを記述する場合は、下記のような書き方になります。
/* ================= */
/* ▼A：共通スタイル */
/* ================= */
body {
background-color: lightyellow;
}
/* ------------------------------------- */
/* ▼B：タブレット以上向けの追加スタイル */
/* ------------------------------------- */
@media (min-width: 600px) {
body {
color: darkred;
}
}
/* ----------------------------- */
/* ▼C：PC以上向けの追加スタイル */
/* ----------------------------- */
@media (min-width: 1025px) {
body {
font-size: 12pt;
}
}
上記のCSSは、閲覧環境によって以下のように適用されます。- すべての環境で、Aが適用される。
→背景色が淡い黄色になる。 - 横幅600px以上の場合は、AとBが適用される。
→背景色が淡い黄色になり、文字色が濃い赤色になる。 - 横幅1025px以上の場合は、AとBとCが適用される。
→背景色が淡い黄色になり、文字色が濃い赤色になり、さらに文字サイズが12ptになる。
このように、モバイル用デザインを基準(＝全環境に共通のデザイン)にして、後からより大きな画面用の装飾を足していく方法での書き方は、記事「モバイルファーストでデザインする際のCSSの書き方」でも解説しています。併せてご参照下さい。
各デザインを別々に用意するCSSの書き方
スマートフォン用デザイン、タブレット用デザイン、PC用デザイン……などのように各デザインのCSSを別々に記述する場合は、ブレイクポイントを使って適用対象の範囲(上限や下限)を指定する書き方を使います。
/* --------------------------------- */
/* ▼a：スマートフォン専用のスタイル */
/* --------------------------------- */
@media (max-width: 599px) {
body {
background-color: lightyellow;
}
}
/* ----------------------------- */
/* ▼b：タブレット専用のスタイル */
/* ----------------------------- */
@media (min-width: 600px) and (max-width: 1024px) {
body {
background-color: aliceblue;
}
}
/* --------------------- */
/* ▼c：PC専用のスタイル */
/* --------------------- */
@media (min-width: 1025px) {
body {
background-color: mistyrose;
}
}
上記のCSSは、閲覧環境によって以下のように適用されます。- 横幅599px以下では、aだけが適用される。
→背景色が淡い黄色(lightyellow)になる。 - 横幅600px～1024pxの場合は、bだけが適用される。
→背景色が淡い青色(aliceblue)になる。 - 横幅1025px以上の場合は、cだけが適用される。
→背景色が淡い赤色(mistyrose)になる。
この書き方だと、複数の環境に共通する装飾でも毎回書く必要があるため、CSSソースが長くなってしまいます。しかし、画面サイズに応じてレイアウトや細部の装飾などあらゆるデザインを大きく変える場合には、この書き方が分かりやすくて楽な場合もあるでしょう。
レスポンシブなCSSを記述する際の、ブレイクポイントの決め方
今回は、レスポンシブWebデザインを採用してCSSを書く際に、ブレイクポイントをどう設定すれば良いかを考える方法をご紹介いたしました。望ましいブレイクポイントを設定して、多くの環境でうまく閲覧できるよう工夫してみて下さい。なお、レスポンシブWebデザインやウェブサイトのモバイル対応方法に関しては、下記の関連記事もぜひご参照下さい。【関連記事】
