所感Bulmaを仕事で使うことになったのでさっくり概略を調べてみました。所感Bulmaとはオフィシャルサイトによると以下の通り。OSSのCSSフレームワークで。Flexboxをベースにしているようです。Flexboxモバイルファーストのレスポンシブデザイン。モジュールとして組み合わせて使うことができるようです。Moduleといいます。名前の通り、フレキシブルなレイアウトを簡単に実現する仕組みで、親Box・子Boxにより構成されます。小要素のBoxを横並びで表示し、親要素と小要素の横幅に応じて自動的に折り返して次の行に表示するなど、閲覧するブラウザ・端末に応じて見やすいレイアウトを自動的に生成します。ちなみにGridレイアウトと混同しがちですが、Flexboxは1次元レイアウト、Gridは2次元レイアウトです。ノンデザイン?調べると「ノンデザイン」というキーワードが多くヒットしました。意味を調べてみると、パーツを組み合わせてコーディングができてしまうようです。パーツの確認には以下のBulmaswatchというサイトが良いようです。ボタン、ヘッダー、メニューバー、ページネーション等色々あります。言葉こそ知らなかったものの、Bootstrapと同じですね。プロジェクトへの取り込み方CSSを1つ取り込むだけで楽に取り込むことができるようです。CDN経由が一番楽で、以下1行で取り込み可能です。href="https://cdnjs.cloudflare.com/ajax/libs/Bulma/0.6.2/css/Bulma.min.css">CDN経由でない方法は以下をご参照ください。親要素に「class=”columns”」小要素に「class=”column”」を設定することでカラムレイアウトが設定できます。レスポンシブのため、ウィンドウサイズによって小要素が自動的に改行されます。横幅のBreakpointsとしては、mobile、tablet、desktop、widescreen、fullhdの5つ。Bootstrapはxs、sm、md、lgの4つで、px数はやや違いますがBootstrap+fullhdの選択肢があると考えて良さそうです。親要素に以下を定義するだけです。flex;}モジューラビリティ必要に応じて個別にモジュールをimportすることができます。以下をsassに記載すればOKです。"Bulma/sass/grid/columns"面白そうな細かい機能チャット式のUI(RedmineやConfluenceのコメント機能が簡単に作れそう)入力項目を増やすUI(途中経路を追加など)所感Bootstrap4は使ったことがあったのでおおまかにBootstrap4との違いがわかりました。これから深く使ってみますので追って追加記事も作成しようと思います。ME温泉ソムリエエンジニア。サーバ構築からアプリケーションの開発まで手広く対応。