nikkie-ftnextの日記

イベントレポートや読書メモを発信

「Bootstrapでclassに指定するmdって、何？」　ブレークポイントを知り、モバイル用のレイアウトだけに余白を追加するまで

はじめに

「そこは、私の世界を変える入り口でした1」、nikkieです。

映画『かがみの孤城』応援目的で縦書き鏡文字ジェネレータを開発しています。
その中でBootstrapの理解が深まる経験をしました。
その経験をアウトプットします。

目次

縦書き鏡文字ジェネレータ、モバイル用のレイアウトにしたい！

年始に1日ハッカソンして作った縦書き鏡文字ジェネレータ。

Bootstrap 5でスタイルを当てています。
実現したい見た目は

  • PCの画面サイズでは2カラム構成（Canvasとボタン群を左右に並べる）
  • スマホの画面サイズでは1カラム構成（Canvasの下にボタン群が来る）

でした。
※お手元で見たい方は https://ftnext.github.io/flipped-letters-generator/ へどうぞ。

1日ハッカソンでここまでやりきったつもりでしたが、スマホでアクセスしても2カラム構成でした。
そのときのHTMLはこちら

<main>
  <div class="container">
    <div class="row">
      <div class="col-8">
        <!-- Canvasが来ます -->

縦書き鏡文字ジェネレータで実現したい見た目は、過去にPyCon JPスタッフ向けに作ったプロポーザルレビューアプリのテンプレート2で実現済みです3。
そのときどうやったのかなとコードを見に行くと、col-8ではなくcol-md-8と指定していました4。
「そうか、mdがいるのか」とHTMLを修正。
スマホの画面サイズでは1カラムとなりました！

<main>
  <div class="container">
    <div class="row">
-      <div class="col-8">
+      <div class="col-md-8">
        <!-- Canvasが来ます -->

col-8とcol-md-8の違いって、何？

追加したmdがそもそも何なのかが分かっていなかった5ので、この機にドキュメントに当たることにしました。
※col自体や、8の方（12カラムあるうちの8つを指定）については今回は深めません

ブレークポイント！

このmdはブレークポイント（breakpoint）と呼ばれるそうです6。

☝️のドキュメントの中の「Available breakpoints」を読んでいくと7

Bootstrapには6つのデフォルトのブレークポイントがあり、grid tiers と呼ばれる 6つのデフォルトのブレークポイントが含まれています。

「Available breakpoints」にあるブレークポイントについての表が参考になります（必見だと思います！）。

  • 6つのデフォルトブレークポイント
  • クラスインフィックス8
    • None(指定なし), sm, md, lg, xl, xxl の6つ
  • 適用される画面サイズ

col-md-8のmdは、Mediumブレークポイントを示すインフィックスなんですね！
col-8はインフィックスの指定がないのでX-Smallブレークポイントを指定している、と。

ブレークポイント指定の読み方

グリッドシステムのドキュメントの「How it works」より

そのブレークポイントとその上のすべてのブレークポイントに影響を与えます (e.g., .col-sm-4 applies to sm, md, lg, xl, and xxl).

例を見てなるほどと思いました。
col-sm-4（Smallブレークポイントのインフィックス）はSmallとSmallより上のすべてのブレークポイント（sm, md, lg, xl, xxl）を指定したことになる、と。

ジェネレータの実装は、以下のように説明できます。

col-8は「すべての画面サイズで12カラム中8つ」と指定していて、col-md-8は「Medium以上の画面サイズでは12カラム中8つ」と指定（Mediumより小さい画面サイズでは指定なし）ということなんですね！
（col-8はすべての画面サイズに適用されるから、スマホの画面サイズでも1カラムにならず、2カラム構成だったわけですね）

モバイル用のレイアウトだけで余白を入れたい

col-md-8によって、スマホの画面サイズでは1カラム構成にできました。
ただ、トップの段落のまわりに余白が入らなかったり、Canvasとテキスト入力欄の間に余白がなかったり（下図）と余白を調整したくなりました。

余白を入れる（ただし、すべてのレイアウトに適用される）

1カラムのとき、Canvasとその下に来るテキスト入力欄の間（縦方向）に余白を入れることを考えます。
まず浮かんだのはCanvas（のdiv）にmargin bottomの指定でした。

<main>
  <div class="container">
    <div class="row">
-      <div class="col-md-8">
+      <div class="col-md-8 mb-5">
        <!-- Canvasが来ます -->
      </div>
      <!-- 別のdivでテキスト入力欄（など）が来ます -->

このmb-5という指定もブレークポイントが関わっています！

https://getbootstrap.jp/docs/5.0/utilities/spacing/#notation

クラスは，xs の場合は {property}{sides}-{size} という形式で sm、md、lg、xl、xxl の場合は {property}{sides}-{breakpoint}-{size} というクラスになります。

mb-5は、X-Small以上の画面サイズ（＝すべての画面サイズ）でsize 5のマージンをbottomに入れる指定ということですね。
これで余白は追加されたのですが、「この余白はPCの画面サイズでは不要なんだけど、すべての画面サイズに入れるしかないのかな」と少しもやもやが残りました。

モバイル用のレイアウトだけで余白を入れる

ドキュメントを参考に、以下のクラス指定でやりたいことができました！

# https://github.com/ftnext/flipped-letters-generator/blob/46495b09b20300036260f03a25c49e174722a782/src/index.html#L52
<main>
  <div class="container">
    <div class="row">
-      <div class="col-md-8 mb-5">
+      <div class="col-md-8 mb-5 mb-md-0">
        <!-- Canvasが来ます -->
      </div>
      <!-- 別のdivでテキスト入力欄（など）が来ます -->

すべての画面サイズではなく、スマホの画面サイズだけで余白が入ります（ブラウザの開発者ツールで確認）

どのようにこの指定に至ったのかを明かします。
ドキュメントを読む中でヒントに気付きました。

ブレークポイント指定の読み方を知ったドキュメントには以下のようにあります：

ブレークポイントごとにコンテナやカラムのサイズや振る舞いを制御することができます。

🤔（sm以下では余白あり、md以上では余白なしって指定できる、ってこと？ でもどうやるんだろう）

余白（マージンやパディング）の指定のドキュメントで、size 0の説明が目を引きました

0 - for classes that eliminate the margin or padding by setting it to 0

この2つのインプットからひらめいた仮説が「ブレークポイントを2つ指定すればいいのでは」というもの。

  • mb-5はX-Small以上の画面サイズ（＝すべての画面サイズ）でCanvasのbottomにsize 5のマージン
  • mb-md-0はMedium以上の画面サイズでCanvasのbottomにsize 0のマージン（＝マージンなし）
    • Medium以上の画面サイズではこちらを優先

つまり

  • X-Small以上Medium未満の画面サイズ（None, sm）では、bottomにsize 5のマージン
  • Medium以上の画面サイズ（md, lg, xl, xxl）では、bottomにマージンなし

これを実装して試してみると、想定したとおりに動きました🙌

終わりに

意味を理解せずに使っていたcol-md-8（ブレークポイント）について、何を指定しているのか説明できるまで理解を深められました。
理解が深まったことで、「あるブレークポイントまでは〜〜で、そこからは〇〇」のようなレイアウト指定の仕方にも気付きました！

Bootstrapのブレークポイントという道具についてはどう使っているかが言語化できるようになりました。
「魔法だな〜」と感じて使っている状態（＝道具に使われている状態）はだいぶ脱せたかなと思います。
一方、ブレークポイントがラップしているCSSの仕組みなど、まだまだ魔法と感じる部分は多いです。
そのあたりは今後の伸びしろとして、チャンスが来たときにキャッチアップしたいと思います。

One more thing...
nikkieにとってはBootstrapの理解を深める機会にもなった映画『かがみの孤城』、皆さま、ぜひ観に行ってください〜！

P.S. Mediumってどんな端末の画面サイズなの？

ブレークポイントのドキュメントの中の「Available breakpoints」の表、書いてあるピクセル数が具体的な端末と結び付けられませんでした。

Medium md ≥768px

Bootstrap 4の情報ですが、以下が参考になりました。
Bootstrapのバージョンによってブレークポイントやインフィックスは変わるかもしれませんが、ピクセル数と端末の対応は変わらないだろうと、参考にしています。
（Bootstrap 5のドキュメントは探しきれていないので、ご存じの方ぜひ教えてください）

タブレット端末など 768px 以上

sm (Small:スマホサイズ)
md (Medium:タブレットサイズ)

そして、こちらのとほほさんのBootstrap 4入門でも、画面サイズに応じた多段階の指定を紹介されていますね！
（<div class="col-sm-4 col-md-8">B</div>）

なお、とほほさんはBootstrap 5入門も公開されています！すごい👏

  1. ↩
  2. 静的サイトとしてアーカイブしたページが https://pyconjp.github.io/pycon.jp.2021.review/201001.html で見られます↩
  3. Bootstrap（当時は4）については、時間の制約から理解を深めることをせずに、Exampleを真似て実装しました↩
  4. https://github.com/pyconjp/pycon.jp.2021.review/blob/352ec3f2ac5d9473ed723882597287f23f4e79ab/reviewsite/templates/review/detail_proposal.html#L11↩
  5. 分かっていたら「col-8と指定すればどんな画面サイズでも2カラムになる」と勘違いしないと思うのです↩
  6. Bootstrapのドキュメント、日本語で読めるようになっていてありがたい限りですね。プロポーザルレビューアプリ実装時は英語だったと記憶しています↩
  7. grid tiersは追っていませんが、https://getbootstrap.jp/docs/5.0/layout/grid/#grid-tiers のあたりではないかと思われます。「グリッド層の数をカスタマイズすることもできます。」↩
  8. 頭に付くのがプレフィックス（接頭辞）、末に付くのがサフィックス（接尾辞）なので、中に付く＝インフィックス（漢字をあてるなら、中置辞？）と理解しています↩