レスポンシブデザインに必要不可欠なブレイクポイントとメディアクエリとは？

皆さま、こんにちは！

私たちは、オープンソースCMS「Drupal（ドルーパル）」専門の開発会社スタジオ・ウミです。 Drupalについては、こちらでくわしくご紹介しています。Webに携わられる方であれば知っておいて損はないと思いますので、ぜひ覗いてみてくださいね。

さて本題ですが、本日のブログテーマは「ブレイクポイント」と「メディアクエリ」です。

レスポンシブWebサイトの多くが「ブレイクポイント」と「メディアクエリ」による画面幅の変更を行っており、この2つはレスポンシブWebデザインにおいて大変重要な役割を担っています。今回は、これらの基本的な概念について、自分自身の覚え書きの意味も込めて、できるだけ分かりやすく解説していきたいと思います。 Web制作初心者の方を対象にした初歩的な内容となります。ある程度コーディング経験をお持ちの方には物足りないかと思いますので予めご了承ください。

ブレイクポイントはWebサイトにどう使われているの？

ブレイクポイントは、デバイスの画面幅・解像度に合わせたサイトデザインの表示に重要な役割を持っています。

日常的な使用シーンではあまりやることは無いと思いますが、レスポンシブWebサイトはブラウザのウィンドウの角をつかんで画面サイズを変更すると、どこかで「かくっ」と画面のレイアウトが切り替わる位置があります。その切り替わる瞬間の画面サイズにブレイクポイントは設定されています。ブレイクポイントが設定されていることで、画面幅の違う様々なデバイスに適したサイトデザインが実現でき、レスポンシブWebサイトとなります。（解像度よりもイメージしやすいかと思いますので、画面幅という言い方を使用させていただきます。）

ちなみに、Chromeの場合、Developerツールのトグルを利用して複数デバイスでのプレビューを見ることができます。

ブレイクポイントとは

レスポンシブWebサイトにおけるブレイクポイントとは、画面幅に合わせてCSSを切り替える時に使用する、切り替えポイントのことです。メディアクエリと併用し、ブレイクポイントでデザインが可変するポイントを設定することで、各デバイスに適したWebサイトを実現します。

ブレイクポイントはpixelによって設定されており、設定されるpixle数はWebサイトによって様々です。スマートフォンの幅、タブレットの幅、パソコンの幅に合わせてブレイクポイントが設定されています。どのデバイスも画面幅は様々なので、全ての機種に対応することができません。そのため、いくつかの主要なポイントにあわせて設定されることが多く、320px-480px,758px,1024pxのブレイクポイントが一般的に使われやすいです。これらの切り替えポイントは一般的に多く使われているだけで、ブレイクポイントに決まりはありません。最近はスマートフォンの画面幅が大きくなっていてタブレットに近づいてきているので、スマホのブレイクポイントを上記より大きく設定しているWebサイトも多くあります。

スマホなら320px〜480px、タブレットなら768px〜1023px（タブレット横）、そしてPCは1024px〜といったポイント設定が多いようです。

メディアクエリとは

メディアクエリは、ブレイクポイントにあわせてスタイルを設定することができる技術です。メディアクエリを使用することで、1つのスタイルシートの中で様々な画面幅に適応したスタイルを記述することができ、別のスタイルシートを読み込み必要がなくなります。

メディアクエリを使用することで、画面幅ごとにスタイルを切り替えることができます。 メディアクエリは、CSS2からあったmediaタイプを発展させたものだそうです。では、実際スタイルシートではどのような記述をするのかというと、下記のようになります。

@media screen and (max-width: 1024px){
     p{sample: sample;}
}
@media screen and (max-width: 850px){
      p{sample: sample;}
}
@media screen and (max-width: 559px){
      p{sample: sample;}
}

とあるページにおいて、指定したpx数の画面幅のとき変更する属性の挙動を指定する場合を想定しています。 この時指定する順番ですが、モバイルファーストといってPCの画面サイズからではなくスマートフォンを先に考え設定するやり方が一般的と言われています。 それぞれブレイクポイントとなるpx数を設定し、max-width:1024pxなら1024px以下の場合にスタイルが適応され、max-width:850pxなら850px以下に適応される…といった具合に画面幅に合わせたデザインを実現することができます。

まとめ

Web業界流れや機器の流通・発達によって、増加しているレスポンシブWebサイト。レスポンシブWebサイトにも、細かな構造と工夫がなされています。レスポンシブサイトを作成する仕組みの理解に少しでも繋がりましたでしょうか。

私もまだまだ勉強中の身で、ブログを書きながら覚えようと頑張っています。まだまだ理解が至らない部分も多いため、あまり深く掘り下げることはできませんでしたが、同じく勉強中の方や、これからレスポンシブWebデザイン制作をお考えの方のお役に少しでも立てましたら幸いです。