【学習記録】Buefyについてメモ

今の現場ではCSSフレームワークにBuefyが採用されてるので、使い方をいろいろ勉強中です。
個人開発でVuefyを使ってるので現場でもVuefyだったら楽ではあったのですが、使ったことないフレームワーク使えるのも知見が広がるのでありがたいです。

Buefyの公式ドキュメントは以下です。

buefy.org

BuefyはCSSフレームワークのBulmaがベースになっているVue.js用のフレームワークとのこと。

Bulmaは全然詳しくないですが、Railsの勉強してた時にちょっと触ってたので確かに雰囲気似てるなと思いました。

現場で使う範囲ではそこまで複雑なデザインは今のところないので、公式ドキュメントと他のメンバーが書いたコードを参考にさせてもらいながら対応できています。

ただ、なぜかCSSのクラスが効かない場面があってよくわからずググってると以下の記事を見つけました。

arakan-pgm-ai.hatenablog.com

テキストの中央寄せなどのクラスには「content」の記述が必要とのこと。
実際試してみると確かに動くようになりました。まったく考えもしない方法だったので助かりました。

なぜcontentがあると動くのかはまだよくわかっていませんが、フロントエンドはわからないこと多いので一つずつゆっくり理解深めていきたいと思います。

使い慣れないフレームワークの使い方を急ぎで覚える機会を増やすことで、汎用的な「速習力」とか「慣れの速さ」とかを鍛えることを意識していきます。