暑い日が続いていますね。連日猛暑が続き、北海道では14年ぶりとなる少雨、干ばつの影響で野菜の生育に影響が出始めているとか、、新型コロナの感染拡大、大雨、猛暑・・・と暗いニュースが続いていますが、気を取り直して今日も一日頑張りましょう!

さて、皆大好き Bootstrap ですが、Bootstrap5の最初のマイナーリリースとなったBootstrap 5.1.0が、2021年8月4日にリリースされました!

Bootstrap 5.1.0でサポートされた機能

Bootstrap 5.1.0では、20程度のアップデートがあったのですが、代表的なアップデートとして紹介されているのは、CSS Grid、navbarsのoffcanvasなど以下9項目です。

  • CSS Grid
  • Offcanvas in navbars
  • Placeholders
  • Horizontal collapse
  • Stack and vertical rule helpers
  • New CSS variables
  • Update .bg-*and .text-* utilities
  • Four new examples
  • Modal and offcanvas backdrops

最も野心的な取り組みとしては、 CSS Gridのexperimental version(実験的な位置づけのバージョン)をサポートし始めたことでしょうか。

長年利用し続けられてきたDefaultのグリッドシステムの代替として、実験バージョンを投入してきた訳ですから、今後の Bootstrap が大きく変わっていく予告のようなものなのかもしれませんね。

CSS Grid

CSS Gridについての詳細はこちらのページ(外部リンク)で確認することができますので、気になる方はチェックしてみてください。

簡単な使い方の説明からDefaultのグリッドシステムとの比較などがアップされています。レスポンシブ、Auto columns、Nestingあたりはチェックしておきたいとことです。

bootstrapとは

bootstrapをあまり知らない方の為に、簡単にご紹介だけしておきます。

bootstrapとは、世界中で最も人気のあるフロントエンドフレームワークのひとつです。個人的にはプログラミングとWebデザインの両方のスキルを身に着けることは、センスの問題?(;^ω^)もあり、かなり難しい問題であると考え、ついついデザインは専門のスタッフに任せきりにしてしまう傾向があるのですが、、 bootstrapを使うことでデザインのセンスがなくても簡単に美しいウェブ画面をつくることができます。

特にシンプルなグリッドシステムやテーブル、ボタン、フォーム、それと今時は欠かすことができないレスポンシブルな機能については素晴らしいWebデザインを提供してくれます。

Bootstrapの使い方

bootstrap は、Bootstrapのページ(外部リンク)からソースをダウンロードし、ローカルに組み込む方法か、既にホストされているファイルをネット経由で読み込むかのどちらかの方法で使うことができます。

Bootstrapのインストールも簡単です。

npm install bootstrap

簡単で、便利ですね。

Bootstrap 5.1.0がリリースされましたので、時間のある時にでもアップデートして、遊んでみたいと思います。

今日も一日猛暑の予報ですが、こまめに水分をとりながら熱中症に気を付けつつ、今日も一日頑張りましょう!