ブレイクポイントがわかるデスクトップ壁紙

2021年5月に正式リリースになった Bootstrap5。
これから使おうかなという方も多いかと思います。

Bootstrapといえば、レスポンシブデザインに対応したフレームワークとして高い人気があります。
人気の理由は、画面の横サイズに対応してコンテンツの配置を自由に変えることができるグリッドシステムが、比較的簡単に記述できるからではないでしょうか。
例えば、画面が大きいパソコンでは横に6列並んで表示されるものを、スマートフォンのような小さい画面では、横に2列ずつにする・・・といったことが自動で行われます。
その画面の大きさの判定は、画面サイズが○ピクセル以上になったら6列、○ピクセル以下になったら2列といったように、判定する大きさが区切られています。
これをブレイクポイントと呼んでいます。

今回は、そのグリッドシステムとブレイクポイントのおさらいと、ブレイクポイントがどこなのかが視覚的に分かるデスクトップ壁紙を紹介します。

【 2021年9月24日追記 】
この記事を書いた後に気付いたことがあります。
パソコンの横ドット数と、ウェブブラウザの横ドット数は一致していないことがあります。(当方所有の 15.6インチのノートPC ( ディスプレイ解像度 1920X1080 ) で MicroSoft Edge と、Chromeで確認)
したがって、この壁紙で示しているブレイクポイントと実際ブラウザでのブレイクポイントがずれているように感じることがあります。

そのため、この壁紙使えないかも・・・と思っています。
そのあたりの詳しい説明は、レスポンシブデバッグ用の便利なスニペット という記事を書きました。
そちらをご参照ください。

レスポンシブデバッグ用の便利なスニペット

レスポンシブデバッグ用の便利なスニペット

Bootstrap のグリッドシステムのおさらい

Bootstrapのグリッドシステムは、下のように 12等分されたセルを何個分使うかという指定のしかたをします。

今あなたは、どんなデバイスで見ていますか？
もしスマートフォンだったら、12個セルが横に並ばずに縦に並んでいることでしょう。
できれば画面の大きいパソコンで見てください。

パソコンで見ている方は、ブラウザの横幅を変えていってみて下さい。
ブラウザの画面横幅が1400ピクセルを超えていれば、横に12個セルが並びます。
ブラウザの画面幅が1400ピクセルを下回り、1200ピクセルに達するまでは横に6個、縦に2列になります。
そしてもっと小さくしていくと、横に4個、3個、2個、最後には1個になるのが分かります。

この横に何個並ぶかを切り替える画面幅のポイントは決まっていて、この切り替わりポイントのことをブレイクポイントと呼んでいます。

Bootstrap5 の場合のブレイクポイントは、下の表のように決まっています。

Dimensions の欄にある数字が、ブラウザの画面サイズを指しています。
例えばブラウザの画面サイズが、1024px であれば、992ピクセル以上 1199ピクセル以下の Large のエリアとして認識されます。

レイアウトグリッドの具体的な書き方

具体的に HTML をどうコーディングすればいいかを説明します。
基本的に Bootstrap が準備している クラスを付けて指定をしていきます。

単純な例

<div class="container">
  <div class="row">
    <div class="col-md-4">something</div>
    <div class="col-md-4">something</div>
    <div class="col-md-4">something</div>
  </div>
</div>

まず一番外側、”container” というクラスを持った DIV要素で囲みます。
次に “row” というクラスを持った DIV 要素で囲みます。
最後に、横に並ばせるための “col” で始まるクラスを持った DIV 要素を必要個数書きます。

この “col” で始まるクラスが、どのブレイクポイントの時にグリッド何個分を使うかという指定をするためのものになり、ここがキモとなります。

上記の例は、”col-md-4″ で、 ブレイクポイント “md”以上の時、つまりブラウザの横幅が 768 ピクセル以上の状態では、グリッド 4個分を使ってね、という意味になります。

上記 HTML を実際に表示させると下ようになります。（わかりやすいように各セルに枠線を加えています）
実際にブラウザの横幅を変えて動きを見てください。

ブラウザの画面の幅が極端に狭い状態では、セルは縦 3 列になっています。
md のブレイクポイントとなる 768ピクセルを超えたあたりで、横 に 3個に並びなおしますよね？

“col-md-4” なので、ブラウザの画面幅が md のブレイクポイントに達したら横12個分あるグリッドのうち 4個分を占有してねということになるので、12グリッド 割る 4 グリッドで セルは 3 個分横並びにできますよね。
ということで、md のブレイクポイントになると、横3個分並ぶようになるのです。

各ブレイクポイントごとに、何グリッド分使うかを使い分けたい場合は、クラスを何個も書きます。
下の例のように、クラスをスペース区切りで連ねます。

<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1">
<!-- この例だと、一番小さい画面サイズではグリッド12個分、ブレイクポイント sm だと6個分
といった感じで、それぞれのブレイクポイントでの占有したいグリッドの個数を変えることができます -->

よくある 左側に本文、右側にサイドバーのようなブログ形式のレイアウトの例

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-8">
       本文のエリア
    </div>
    <div class="col-12 col-lg-4">
       サイドバーのエリア
    </div>
  </div>
</div>

クラス col-12 と col-lg-8 が指定されている本文のエリアは、ブレイクポイント lg 以上の画面サイズのときは
横 8個分のグリッドを占有しますが、それ以下のブレイクポイントでは 12個分つまり横幅いっぱいに表示されます。

クラス col-12 と col-lg-4 が指定されているサイドバーのエリアは、ブレイクポイント lg 以上で横4個分です。

これで画面サイズの大きいパソコンではサイドバーが横に配置されるけれど、小さい画面のスマートフォンで見たときは、縦に並べるということが可能になるわけです。

上記のHTMLを実際に表示させると下のようになります。(わかりやすいように背景色をつけたりしています）
画面幅を伸ばしたり縮めたりして確認してね。

ブレイクポイントが分かる壁紙

さて、前置きが長くなってしまいましたが・・・いや、本当はグリッドについてはもっと説明しなければいけないことがあるのですがとりあえずさわりだけを説明させていただいたところで、ようやく壁紙の話を。

前述のように、Bootstrap のグリッドシステムは、ブレイクポイントによって配置が変わりますので、どこで変わるのか視覚的にわかるといいよな～と思い、パソコンのデスクトップ用の画像を作りました。

ご自由にお使いください。
画像の上で右クリックするとポップアップメニューの中に「名前をつけて画像を保存」というのが出てきますので、それを選択して保存してください。

15.6インチのノートパソコンの一般的な解像度 1920 X 1080 のサイズで作っています。
それ以下の解像度のパソコンでは使えません。
もっと大きなモニターで作業をされている方は、壁紙として使用するときに、「画面のサイズに合わせる」を選択せずに「中央に表示」を選択して、画像が拡大されないようにして使ってください。

ちなみに、ブレイクポイントの判定は、あくまでもブラウザの画面サイズでの判定です。
ブラウザ画面には右側にスクロールバーがありますので、その幅分実際の画面幅は狭くなります。
「あれ～？この壁紙のブレイクポイントよりも早く（または遅く）配置が切り替わる～」と感じると思います。
それはスクロールバーのせいですからね。

各バージョンでのブレイクポイントの違い

このブレイクポイント、Bootstrap のバージョン ３，４，５でそれぞれ違っています。
バージョン４と５で比較した場合では、5になって最上位のブレイクポイント xxl が追加になっただけなのでまだ救われるのですが、バージョン 3 から 4または5では全然違います。

下記にそれぞれのバージョンでのブレイクポイントを視覚化したものを載せます。

ポイントとなるところは、768、992、1200 といったあたりでは違いはないものの、バージョン3でのブレイクポイントの名称とバージョン4以降のそれがひとつずれています。

筆者は、Bootstrap3 で数々の WordPress テーマを作ってきました。
その資産を生かしたいと考えていたのですが、それは儚い夢でした。
Bootstrap3 から 5 に対応させるためには、このグリッド以外にも名称が変わったクラスも多々あり、地獄の苦しみを味わうことになりそうだと理解しましたので諦めました。

このブログは、Bootstrap5 に対応したテーマになっていますが、レイアウトグリッドについては 一から書き直しました。

まとめ