blogのCSSフレームワークをBulmaに乗り換えた

2018/06/22

ちょっとblogの見た目を弄ろうかなー、と思い立ったので、ついでにCSSフレームワークも乗り換えることにしました。

今まではFoundationを採用していましたが、シンプルなサイトですし、もっと軽量なフレームワークでよさそうだなあ、と。

モダンで軽量で見た目がいい、という基準でいくつかのフレームワークを試して、今回はBulmaを採用することに。

といったあたりが特徴でしょうか。

用意されている様々なコンポーネントを使うだけでPCでもmobileでもいい感じの見た目になるのはありがたい。追加でCSSを書く必要があまりありませんでした。重量級のフレームワークと比べるとHTMLもシンプルに書ける気がします。

ドキュメントはそれなりに充実しているので基本的な使い方には困らないのですが、もう一段掘り下げた応用編的なドキュメントが欲しくなる局面がままありました。

PanelとCardとBoxの使い分けがイマイチワカラン、とか、Column間のmargin (gapと呼ぶみたい)がなくなることがある、とかちょいちょいハマるんですよね。こういう時の解決法がなかなか見つけられないのです。

利用者がそれなりに多いフレームワークなのでググれば正解に辿り着くこともあるのですが、公式ドキュメントがカバーしてくれるならそれに越したことはないはず。

（モダンな）CSS全然分かりません、という人であればそれこそBootstrapのようなメジャーどころのほうがいいかもしれません。

CSSがある程度分かる人がサクッとサイトを作るのに使う、とか、BulmaをベースにしてCSSをガリガリ書いていく、とか、そういった用途に向いたフレームワークなのかな、という印象です。