BulmaとはWebサイトを作成するためのモバイルファーストなCSSフレームワークです。数あるCSSフレームワーク の中でも圧倒的な使いやすさを誇り人気を集めております。この記事ではBulmaを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説していきます。
BulmaとはWebサイトを作成するためのモバイルファーストなCSSフレームワークです。モバイルファーストでレスポンシブWebインターフェイスを構築するために簡単に組み合わせることができ、CSSのみで構成されているので早いことで人気を集めております。Flexboxをベースにしており「Font Awesome」「Sass」に対応しています。同じCSSフレームワークの中でも最も人気を集める「Bootstrap」と比較してもシンプルでかつ軽量で早いという特徴があります。モダンなデザインも豊富なことからカスタマイズ無しでもデザイン性の高いWebサイトが作れます。
CSSとはWebページの見た目・デザインを調整するためのスタイルシート言語です。正式名称は『Cascading Style Sheets(カスケーディング・スタイル・シート)』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。CSSの登場によってHTMLで作成されたWebページ上での表現をより高度に装飾ができるようになりました。具体的には文字のサイズや色、レイアウトなどの表示スタイルなど細かな編集まで手が届くようになったのです。CSSはファイル名に拡張子の『.CSS』を付けることで、コンピューターにCSSファイルとして認識されます。
フロントエンドとはWebサービス利用者の目に触れる部分を表します。よってフロントエンドとはWebサービスの利用者が目に触れる部分のシステムを開発することです。フロントエンドの開発を行うエンジニアを『フロントエンドエンジニア』と呼びます。システム業界では”見える部分を作る人”と呼ばれております。主な業務内容としてWebブラウザ上で見ることが出来るページや機能の作成など挙げられます。その際に利用される技術要素としてHTML、CSS、JavaScriptなどがあります。フロントエンド側がサーバーにプログラム実行のリクエストをすることで。サーバから必要な情報を受け取りWeb上にリクエストした内容が表示されます。
フロントエンジニアが習得するべき最低限の技術について解説している記事はこちら>>
Bulmaの読み方は『ブルマ』です。名前の由来は日本アニメ「ドラゴンボール」のキャラクターである「ブルマ」から来ているそうです。当初、プロジェクト名は「トランクス(Trunks)」(こちらもドラゴンボールのキャラクター)という名前のテーマジェネレーターであるはずでしたがドメイン名の取得が出来ずに断念したようです。
Bulmaの特徴を見ていきましょう。
BulmaはCSSのみで構成されているので早いという特徴があります。BulmaではJavaScriptを必要としません。BootstrapやTailwindCSSなどのCSSフレームワークはJavaScriptの読み込みが必要となるケースが多いです。BulmaはCSSファイルをWebページに組み込むだけで手軽にそして早く使えます。
BulmaはレスポンシブWEBデザインに対応しているというメリットがあります。Webサイト制作においてPC/モバイルの両デバイスに対応させるべく個別にスタイルをコーディングすることは単純に工数が2倍になることと同じです。Bulmaでは表示端末に合わせて自動で表示を最適化するレスポンシブWEBデザインに対応しているのでデバイス単位でのスタイル作成の工数を省くことが出来ます。
Bulmaはモジュール分割という特徴があります。Sassで記述されており各構成要素が独立したSassソースとして分割されているため、利用者は必要なモジュールのみを取り込んで使用することができます。
Bulma以外のCSSフレームワークを見ていきましょう。
BootstrapとはWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。Twitter社が2011年に開発し、フロントエンドフレームワークの中でも最も人気を集めております。BootstrapではWebページの基本機能として使用される「メニュー」「ボタン」「フォーム」などのパーツをテンプレートで用意しております。見た目を調整するCSSファイルや動きをつけるJavascriptファイルが既に作成されており、それらの定義を呼び出すだけでデザインやUIの知識がなくとも、動きのあるリッチなWebサイトを素早く簡単に制作することができます。
TailwindCSSとはWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。2019年にバージョン1.0がリリースされたばかりと数あるCSSフレームワーク比較的新しいものです。TailwindCSSはユーティリティーファーストを掲げており便利で汎用的なクラスがたくさん用意されています。ユーザーはそれらを組み合わせて自由に使用することができます。特徴として「ユーティリティファースト」「CSSファイルサイズを小さくする」「スタイルの変更をHTMLローカルで安全に行える」などが挙げられます。
UIkitとは高速で強力なWebインターフェースを開発するためのCSSフレームワークです。軽量でモジュール式を採用しており、数あるCSSフレームワークの中でも圧倒的な高いデザイン性であることを多くのユーザーに評価されています。そのユーザーインタフェースの美しさはテンプレートでそのまま使用しても高いセンスを感じさせることができます。デザインにおいて基礎でありながらも難しく高度な技術である「余白」の活用に強いこだわりを感じさせます。
Bulmaを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説させていただきました。Bulmaを一言で表すと『モバイルファーストなCSSフレームワーク』です。特徴として「CSSのみで構成されているので早い」「レスポンシブWebデザイン」「モジュール分割」などが挙げられます。Bulmaについてこの記事に書かれている最低限の内容は理解をしておくようにしましょう。