ブレイクポイントでスタイルを分けるCSSソースの書き方

ブレイクポイントが決まったら、CSSソースを記述しましょう。ブレイクポイントを使ってスタイルを分割するためには、CSS3のメディアクエリ(Media Queries)という記述方法を使います。メディアクエリは、下記のように条件を指定して適用対象を限定する書き方です。
@media (適用条件) {
   /* この条件に限定したスタイル */
}
詳しくは記事「メディアクエリで画面サイズ別にCSSを切り替える方法」で解説していますのでご参照下さい。以下にも、簡単にだけご紹介しておきます。
 
  1. モバイルファーストでのCSSの書き方
  2. 各デザインを別々に用意する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デザインやウェブサイトのモバイル対応方法に関しては、下記の関連記事もぜひご参照下さい。

【関連記事】


投資未経験者限定で、オンラインインタビューを受けていただける方を募集中!
ご応募の際に事前に投資意向調査アンケートにご回答いただきます。
投資に興味がない方から興味がある方まで幅広く受け付けております。
※謝礼は10,000円になります(最大10名まで)

ご協力いただける方はこちらから回答をお願いいたします(回答期限は2021年3月1日15時まで)


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。