Somurie Engineer's Blog

Bulmaについて調べてみた

Bulmaを仕事で使うことになったのでさっくり概略を調べてみました。 Contents 1 Bulmaとは 1.1 Flexboxとは? 2 ノンデザイン? 3 プロジェクトへの取り込み方 4 気になったポイント 4.1 画面レイアウト 4.2 実装方法 4.3 モジューラビリティ 4.4 面白そうな細かい機能 5 所感 Bulmaとは オフィシャルサイトによると以下の通り。OSSのCSSフレームワークで。Flexboxをベースにしているようです。 Bulma is a free, open source CSS framework based on Flexbox モバイルファーストのレスポンシブデザイン。 モジュールとして組み合わせて使うことができるようです。 Flexboxとは? FlexboxはCSS3で採用された機能で、正式名称をFlexible Box Layout Moduleといいます。 名前の通り、フレキシブルなレイアウトを簡単に実現する仕組みで、親Box・子Boxにより構成されます。小要素のBoxを横並びで表示し、親要素と小要素の横幅に応じて自動的に折り返して次の行に表示するなど、閲覧するブラウザ・端末に応じて見やすいレイアウトを自動的に生成します。 ちなみにGridレイアウトと混同しがちですが、Flexboxは1次元レイアウト、Gridは2次元レイアウトです。