プレフィックスとブレークポイントとは？

メディアクエリごとのグリッドシステム

別記事のレスポンシブルデザインでも紹介をしていますが、レスポンシブルデザインはCSSの「メディアクエリ」機能を利用し、画面の幅をチェックしてレイアウトを可変させるのが主な手段です。

肝となっているメディアクエリの技術は、bootstrap以前のcss3の時点でも実現ができていました。

bootstrapではレスポンシブデザインへの対応策として、横並びレイアウト（カラム）の並びを自在に操作できる「グリッドシステム」が導入されている事が大きな特徴です。

今回はその設定を詳しくご紹介します（ver3系を前提としています）。

グリッドシステムによる横並びレイアウト

このグリッドシステム把握・駆使する事でメディアクエリで設定する画面幅でどのように各カラムを並べるのかを自由に調整する事ができるようになります。

それまでの横並びレイアウトは、もちろんcssのfloatなどでそ都度実現していくのが一般的でした。

bootstrapはグリッドシステムに基づいて横並びレイアウトの制御が精密にされています。

これをルールにのっとって使うだけで簡単に実現・コントロールができるのです。

あわせて読みたい関連記事

グリッドシステムのprefixとブレークポイント

グリッドシステムはbootstrapCSSの特徴でも説明をしましたが、横並びレイアウトを構成する機能です。

枠内を12分割して、そのうち何個分のエリアで敷き詰めるかによって様々な列数の横並びを実現する仕組みです。

例えば2段組みであれば6個エリアを2セット敷き詰める事で合計が12となり、それぞれが横に並ぶというルールです。

4列の場合は3つのエリアを4セット敷き詰める事で実現されます。

12カラム×1=12
2カラム×6=12
3カラム×4=12
4カラム×3=12
6カラム×2=12

このグリッドシステムは入れ子にもできますので、1つのカラム内をさらに12分割して、中にさらに横並びを構成する事もできます。

仮に合計が12よりも小さい場合は単純に左詰めで表示されるだけですし、仮に12よりも大きくなった場合、その最後のエリアがセットでそのまま改行されて下に移動します。

これをパソコンで見た場合は全く問題は無いのですが、例えば複数の横並びコンテンツをスマホ画面で見た場合、画面のサイズ的に小さくなる事がイメージできます。

6列横並びでとなれば1つのカラムがすごく小さくなりますよね。

並べ替えが切り替わるポイント幅の設定

そこでbootstrapではメディアクエリのルールごとにこの基本のグリッドシステムに随時変更がされる幅のポイントが設定されているのですね。

それが「prefix」と「ブレークポイント」という幅の規則です。

いろいろなカスタマイズができるので、状況によっては以下の通りでない場合もありますが、基本的な状態としては以下のような規則となっています。

prefixとブレークポイントの表

	スマホ	タブレット	PC	PC大画面
幅	～767px	768px～991px	992px～1119px	1120px～
prefix	xs （extra small）	sm （small）	md （middle）	lg （large）
配置ルール	常に横並び	既定の幅を下回ると解除（縦並び）
幅の境界線部分がブレークポイント

上の図で「幅」となっているのが画面の横幅サイズ（pxピクセルサイズ）です。サイズの上にはよく使われる端末機械が記載されています。

そしてそれに対応して「xs」「sm」「md」「lg」という名称（プレフィックス）が設けられ、配置ルールが記載されています。

わかりやすく説明しますと、例えばモニターの幅の広いパソコンは今普通に出回っていると思いますが、それが上の表で行くと「lg」です。

次に前からある様なほぼ四角に近いモニターのパソコンが「md」、iPadの横画面などに代表されるタブレットが「sm」、スマホは「xs」となります。

数値の境界線を設定

「ブレークポイント」とは、上の各サイズの「数値の境」を示し、レイアウトが切り替わる境界部分を指します。

この数値はカスタマイズが可能なので絶対のルールではありません。基本ルールと捉えて下さい。

例えばスマホのところが「～767px」と書かれているので、768pxのモニターが仮にあった場合は「タブレット（sm）」での設定に変わる事になります。

つまりこの表は「どこからどこまでの数値領域が対象のプレフィックスとして扱われるか」のルールを示したものになります。

※グリッドシステムは基本的に上記の境界線ルールを守りますが、「lg」「md」「sm」設定ではブレークポイントを下回る画面だと横並びが解除されて下に移動します（縦並びになります）。そのかわり一番小さい「xs」設定では幅がどんなに小さくても設定カラムは横並びになります。

なぜプレフィックスやブレークポイントができたのか

この様な細かいルールができたのはなぜでしょう？

今までのホームページは外枠の幅がある程度決定された中で作られる事が一般的でした。

例えば900px弱程度の大枠の中にサイトが表示されており、サイトのコンテンツを中心にそろえて、その枠よりもモニターの幅が広い場合はできた左右の余白を背景として扱っていました。

2つの課題

それがしばらくして2つの課題ができます。

まず幅の広いディスプレイのパソコンが出てきた事。それからタブレット端末が出てきた事です。

幅の広いディスプレイで見ると左右の余白の方がすごく広くて（時にはホームページの幅より広い場合もあり）、それがサイトの品質に影響する（粗末に感じる）ようになりました。

タブレットの場合はサイズ的に、PCディスプレイとスマホ画面の丁度あいだ位に位置しています。

ふつうにパソコンサイトを表示した場合はそれなりに小さくまとまって表示されます。

操作がマウスでなく指になる

その時ホームページによってはボタンやメニューが小さかったり間隔が狭すぎたりで、指でタップしにくい（タップし間違える）という問題が出てきた事です。

このため、各端末ごとにきちんと対応した表示レイアウトを目指そうという事になりました。

マウスでクリックされる場合と指でタップされる場合とでは大きく違ってくるので、これを解消するユーザーフレンドリーな対応が急務になったのです。

広さをダイナミックに使って、見やすさ・操作性を向上する

この整備が整う事で、まずはどんなに幅の広いモニターでも幅いっぱいに広げてWEBサイトを見る事ができるようになりました。

この時仮に2列2段で表示しているコンテンツがあれば、ディスプレイの横幅に余裕がある訳ですから4列1段に揃えてOKになります。

逆に4列1段で通常表示しているコンテンツ部分をタブレットで見る場合は、2列2段に変化するようにしておけば見やすいです。

仮にボタンの部分があったとしてもタブレット時に余白を多めに取る様にすれば、隣り合ったメニューも指でタップしやすくなります。

そういった工夫ができるようになるのです。

つまり上記のプレフィックスで言いますと「lg」の設定は1200px程度の限界枠を作り、それそれ以下は100％幅を構築する事になります。

一押し人気コーナー紹介