【更新：ポータルサイトに使ってみました】beta2まで進んだBootstrap5を予習 : ポータルサイトブログ

2021/3/30

昨年アルファ版が登場したBootstrap5、本日時点で既にbeta2まで開発が進んでおり正式リリースもそう遠くない気がします。
弊社ではV4を利用している案件が多いのですが、これからV5もどんどん利用率が高くなると想定しています。そこで今回はV5予習をしてスムーズな移行を目指したいと思います。

【2021/3/30追記】V4との相違点で戸惑った点・関心した点を紹介

左右のpaddingとmarginの変更

V4では左のpaddingはpl-* / marginはml–* で右のpaddingはpr-* / marginはmr-* でしたが、V5では左のpaddingはps-* / marginはms-* で右のpaddingはpe-* / marginはme–* となっています。
何度かV4のまま記述してしまい変更点に気付くまで若干時間がかかりました。慣れるのに時間がかかりそうです。
ポータルサイトは掲載する情報が多くpadding/marginを多用するので、この変更はしっかり頭に入れておきたいです。

■Spacing
https://getbootstrap.com/docs/5.0/utilities/spacing/

フォントの太さ指定

フォントを太くしたい場合はfont-weight-boldを利用していましたが、これがfw-boldと簡略化しました。覚えやすいし記述が簡単で便利になりました。
ポータルサイトの記事で利用頻度が高いので嬉しい変更点です。

■Font weight and italics
https://getbootstrap.com/docs/5.0/utilities/text/#font-weight-and-italics

テキストの左寄せ・右寄せ

これはちょっと厄介な変更になりましたがテキストの左寄せがtext-leftからtext-startに右寄せがtext-rightからtext-endにそれぞれ変わりました。
ポータルサイトではあまり利用しないのではないかと思いますが、ちょっと混乱する変更です。

■Text
https://getbootstrap.com/docs/5.0/utilities/text/

角丸の変更と追加

上述のテキストの左右寄せと同様に角丸の左右も統一されています。左：round-leftからrounded-start、右：rounded-rightからrounded-end;
またrounded-pillという要素があらたに加わりましたが、ポータルサイトのボタンデザインに利用できるのではないかなと思います。

■Border-radius
https://getbootstrap.com/docs/5.0/utilities/borders/#border-radius

痒いところに手が届くようになったグリッドシステム

Bootstrapの基本中の基本であるグリッドシステムですがコンテンツを配置する際の隙間はコントロールできず、もうちょっとどうにかならんものかと悶々としていました。

そんな状況を打破する「Gutters」という機能が追加されています。
詳細としては配置する要素のPadding調整ができるようになり隙間の大きさをコントロールできるようになったという事です。

■Gutters
https://getbootstrap.com/docs/5.0/layout/gutters/

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

もちろんレスポンシブ対応なのでスマートフォンだと隙間が広すぎるけどPCだとちょうどいいって場合も難なく使えます。

ブレークポイントの追加

V4ではExtra small (xs)～Extra large (xl)の計5つのブレークポイントが用意されていましたが、新たにExtra extra large (xxl)が追加され6つのブレークポイントが利用可能になりました。ウルトラワイドモニターなど横幅の広いモニター利用率が高まっている傾向もあり気が利いている印象です。

■Breakpoints
https://getbootstrap.com/docs/5.0/layout/breakpoints/

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

フォームの見せ方にも一工夫

あまり工夫のしようがないフォームですがV5ではそこにもメスを入れています。一見するとプレースフォルダーですがカーソルを当てると入力欄のラベルが移動するちょっとリッチな動きが設定可能です。抜け目ない感じが良いですね。

■Floating labels
https://getbootstrap.com/docs/5.0/forms/floating-labels/

地味にうれしいパンくずのカスタム

いままでのパンくずリストは ”/” 区切り一択でしたがこちらのカスタムが可能になりました。重要性は低いのですがカスタムするとなるとスタイルシートを編集する必要があり結構面倒くさい仕様でした。
V5からはSVGも利用できてカスタムの幅が広がります。

■Breadcrumb
https://getbootstrap.com/docs/5.0/components/breadcrumb/

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="mt-2">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">会社概要</li>
    </ol>
</nav>

まとめ

ちょうどその機能が欲しかったというような細かい機能が追加されたV5。多少記述の変更がありそうですが、すんなり移行できそうです。DOCも以前より見やすく検索しやすいのでますます利用率があがりそうです。
フロントのフレームワークとしては1歩も2歩も飛びぬけた存在になりましたね。