CSSフレームワーク「Bulma」を導入します！
営業だけでなく、色々やっている大魔王です。
マルチアングルライブ配信「fvLIVE」を今月にオプション追加予定で、それに合わせてWebページを改修しようと思い立ち、デザイン起こしからコーディングをやっておりました。ただ、一からコーディングをしていくと、私のコーディングスピードではかなり時間がかかるので、今回はCSSフレームワークを導入することにしました。
CSSフレームワークと検索するだけでも、たくさんの紹介記事が出てくるのですが、今更「Bootstrap」を導入するにも学習コストが高く、やだなぁーと思っていたら、私にぴったりなCSSフレームワークが見つかりました！
CSSフレームワーク「Bulma」です。
今回このフレームワークを選択した理由は下記の3つです。
1. 使えそうな部品がたくさん揃っている！
Bulmaは純CSSのフレームワークなのですが、他のCSSフレームワークが持っている部品は大抵揃っていて、
小規模のWEBサイトであれば大体OKです。
2. class名がわかりやすい。
Bootstrapのclassは学習コストが高くて、私のようなたまにコーディングする人にとっては、効率が悪くて、避けてきた経緯があります。でも、Bulmaは「is-」「has-」などすごくわかりやすくて、サイトのドキュメントをさらっと見れば、コーディングには入れたのは最高でした！
3. カスタマイズがしやすい。
Sassでカスタマイズできますし、私みたいにまだSassの導入できていない人は、独自のスタイルシートを別に用意して、上書きすることも簡単にできます。上書きで書いたCSSが動かないことも想定していて、Sassを勉強する準備しておりましたが、そんなことがなくあっさりちゃんと動いてくれました！！ただ、修正もSassを使った方が楽なので、こちらも学習していきたいと思います。
デメリットもあります。
動きのあるものはBulmaだけでは作れないということです。たとえば、レスポンシブでスマホ用にナビゲーションをハンバーガー形式を簡単にしてくれますが、実際にハンバーガーをクリックして、ナビゲーションを開くという動作はjavascript(jQuery)で実装しないといけません。
全くその辺がわからない人は厳しいかもしれません。。。
※実際に今回のWeb公開をされましたら、サンプルのjQueryを載せたいと思いますので、参考(？)にしてください。
ある程度CSSを使って一からWebサイトを構築できる人にとっては、学習コストが低く、導入できるので、一度Bulmaをお試ししてみるのもいいかと思います。
ご参考になれば、幸いです。
——————