2018/5/23こんにちは!スギモトです!みなさん「bulma」をご存知でしょうか。Vue.jsは学習コストが低く、既存サイトにも比較的導入しやすいということで近年人気のJavascriptのフレームワークですが、Javascriptで便利なフレームワークを利用しだすと、じゃあcssもフレームワークが欲しくなってきませんか?私が請負うWebの案件でいつも最後まで課題として残るのが、デザインの問題です。cssの細かい部分について、あーだこーだと言われ最後まで仕様が決まらない......なんてことばかりでした。そこで、逃げ道兼言い訳として用意するのがCSSフレームワークです。フレームワーク側で決められている色ですとか、そういうガイドラインで作られています、と。修正するには、それなりのリスクとコストがー、と。色々な意味で便利なCSSフレームワークですが、いくつもあって選定に困りますよね。困ると面倒なのでBootstrapになりがちです。情報が豊富&経験者が多いので。いい加減飽きてきます。今回は人気だと噂の「bulma」に挑戦してみたいと思います。まとめ前提条件Win10VSCodeVue@2.5.11bulma@0.7.1Webpack@3.6.1npm導入済みという前提で進めます。準備いつもどおりの手順です。お試しプロジェクトのときは便利なのでvue-cliを使いましょう。インストールしていない方は下記のコマンドを叩いて下さい。iここまでで、Vue.jsのサンプルプロジェクトは完成のはずです。動作確認したい方は下記のコマンドを実行してみてください。devBulmaの話はここからBulmaをインストールCDNでも提供されているようですし、Zipとしてダウンロードもできるようですが、今回はnpmからやってみたいと思います。--save-devApp.vueにBulmaをImportこれだけで適用できるようです。実際に適用後の画面を見てみるとこんな感じです。スタイルが適用されていますね。フォントが細いタイプの模様。Bulmaのコンポーネントを使ってみるせっかくなのでよく使うコンポーネントも確認してみます。使い方は公式サイトで紹介されていました。(日本語未対応な模様)サンプルフォームクラスを付与するだけで、シンプルなスタイルのフォームが簡単にできました。公式サイトにもサンプルコードがいくつもありますので、よくわからなくてもなんとなく導入できそうです。「Element」同様サクッと高品質なコンポーネントを導入することができました。ここまで15分もかかっていません。合わせて読みたい!Vue.jsのUIライブラリ「Element」使ってみたまとめCSSフレームワークは簡単に導入できてとても便利です。0からベースデザインを自分で作る余裕のないとき、サクッと静的サイトを立ち上げたいときなどにはぜひ導入を検討してみてください!他にもいっぱいCSSフレームワークはありますので、色々試してみたいと思います。比べてみるだけでも楽しい。4つの味わいセレクション」買ってきました!スギモト(@sugimotonote)です。今年で31歳になりました。新卒で独立系SIerに入社して気がつけば8年。ここ何年かは某大手メーカーに常駐して社内SEとしてレガシーな業務システムをモダン化しています。