Bootstrap」タグアーカイブ

Bootstrap 5正式版リリース


人気の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系に変更(いまさらながら)
  • 画像やfaviconをSVGに変更
  • その他細々微調整

完全に自己満足ですが、ある種こういう作業は「素振り」になるので悪くないです。Bootstrapの3系から4系への差分が意外に多かったことに気づけてよかった。

【年末年始の自由研究】スマートフォン向けブログテーマをBootstrapで作りかえてみた


blogtheme_bootstrap

先日Android版Firefox向けに調整したばかりの当ブログモバイルテーマですが、一から作り替えてみました。

従来のモバイルテーマはjQuery Mobileベースだったのですが、jQuery Mobile自体が少々重装備なのと、テーマファイルのベースが自分で作ったものではないためメンテナンスしづらいという問題がありました。そこで今回WordPressテーマや流行ライブラリの勉強を兼ねて、Bootstrapを用いてスクラッチで作ってみました。とにかく形にすることを優先して、画面デザインの多くはBootstrapのデフォルトそのままです。デフォルトのままでもそこそこきれいに見えるのがBootstrapの魅力ですね。

ブログ記事が読めるというレベルの基本的なところは問題ないはずです。ところどころ表示がおかしいところもあるかもしれませんが、それはおいおい直すということで。

【読書】UIまで手の回らないプログラマのためのBootstrap 3実用ガイド


UIまで手の回らないプログラマのためのBootstrap 3実用ガイド

BootstrapはHTMLのUIをカッコよくしてくれるフレームワークという程度の理解しかなかったので情報補充のために購入。一通り読んで、開発中にちょっとWeb UIを整えたいときに便利そうだなという感想。

まさしく「UIまで手の回らないプログラマ」になることがしばしばあるため、BootstrapとかjQuery Mobileとかお手軽にそれなりのHTML画面を作れる仕組みは開発ツールとして手元に置いておきたいなと思っています。