人気のCSSフレームワークBootstrapがメジャーバージョンアップして「Bootstrap 5」となりました。Bootstrap 5を紹介している公式ブログ記事はこちら。日本語記事だとPublickeyがわかりやすくまとめています。
当ブログではスマホ用テーマで長らくBootstrapを使っており、最近になってBootstrap 3から4に更新したばかりでした。というわけで、さっそくスマホ用テーマをBootstrap 5に更新してみました。自分の範囲では、コメント入力用のcollapseが動かなくなりましたが、「data-toggle」を「data-bs-toggle」に直したら動くようになりました。前回Bootstrap 3から4に更新した時よりも手間は少ないかも。
ほかにも見えない不具合はあるかもしれませんが、ひとまず様子を見ていきます。スマホ用テーマで経験を積んで、実戦でも使えるようにしておかねば。
ふと思い立って、色々といじってみました。
完全に自己満足ですが、ある種こういう作業は「素振り」になるので悪くないです。Bootstrapの3系から4系への差分が意外に多かったことに気づけてよかった。
先日Android版Firefox向けに調整したばかりの当ブログモバイルテーマですが、一から作り替えてみました。
従来のモバイルテーマはjQuery Mobileベースだったのですが、jQuery Mobile自体が少々重装備なのと、テーマファイルのベースが自分で作ったものではないためメンテナンスしづらいという問題がありました。そこで今回WordPressテーマや流行ライブラリの勉強を兼ねて、Bootstrapを用いてスクラッチで作ってみました。とにかく形にすることを優先して、画面デザインの多くはBootstrapのデフォルトそのままです。デフォルトのままでもそこそこきれいに見えるのがBootstrapの魅力ですね。
ブログ記事が読めるというレベルの基本的なところは問題ないはずです。ところどころ表示がおかしいところもあるかもしれませんが、それはおいおい直すということで。
UIまで手の回らないプログラマのためのBootstrap 3実用ガイド
BootstrapはHTMLのUIをカッコよくしてくれるフレームワークという程度の理解しかなかったので情報補充のために購入。一通り読んで、開発中にちょっとWeb UIを整えたいときに便利そうだなという感想。
まさしく「UIまで手の回らないプログラマ」になることがしばしばあるため、BootstrapとかjQuery Mobileとかお手軽にそれなりのHTML画面を作れる仕組みは開発ツールとして手元に置いておきたいなと思っています。