この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
Bulmaとは
Bulmaは、ウェブサイトやウェブアプリケーションのデザインやレイアウトを効率的かつ簡単に作成するためのCSSフレームワークです。モダンなデザインと圧倒的な使いやすさが特徴で、CSSのみで構成されていますが、HTMLやJavaScriptとの連携が簡単で、カスタマイズが可能です。
Bulmaの基本情報
Bulmaは2016年にフランスのウェブデザイナー、Jeremy Thomasが作成しました。当初は、彼が個人的に使用するためのフレームワークでしたが、公開後、急速に成長し、世界中の技術者によって改善、機能追加が行われました。
名称: Bulma
種類: CSSフレームワーク
開発者: Jeremy Thomas
初版リリース: 2016年
最新版: v0.9.3
ライセンス: MIT License
Bulmaの特徴
Bulmaの最大の特徴は、Flexboxをベースとしたグリッドシステムです。このグリッドシステムにより、簡単にレスポンシブデザインを実装したでモバイルファーストなWebサイトを作成できます。Flexboxは、旧来のfloatを使ったグリッドシステムよりもシンプルで、レスポンシブデザインには欠かせない技術となっています。Bulmaのグリッドシステムは、様々なデバイスに対応し、非常に使いやすいです。
Bulmaのメリット
Bulmaのメリットは以下のとおりです。
モバイルファーストの設計に適している
Bulmaはモバイルファーストを意識した設計になっていて、スマートフォンやタブレットなどでも美しく表示されるウェブサイトを簡単に作成できます。
カスタマイズ性が高い
Sassを使用しているため、カスタマイズ性の高さが特徴的です。必要なモジュールだけを選択して使用したり、変数やミックスインを使用してカスタマイズします。
豊富なコンポーネント
Bulmaには、さまざまなコンポーネントが用意されており、これらを使用することでWebサイトの構築が容易になります。
Bulmaのコンポーネントには、以下のようなものがあります。
レイアウトコンポーネント
columns: カラムを定義するためのコンポーネント
container: コンテンツを中央に配置するためのコンポーネント
フォームコンポーネント
input: ユーザーがデータを入力するためのコンポーネント
textarea: 複数行のテキストを入力するためのコンポーネント
checkbox: チェックボックスを作成するためのコンポーネント
UIコンポーネント
button: ボタンを作成するためのコンポーネント
icon: アイコンを表示するためのコンポーネント
modal: モーダルを作成するためのコンポーネント
ナビゲーションコンポーネント
navbar: ナビゲーションバーを作成するためのコンポーネント
tabs: タブを作成するためのコンポーネント
Bulmaのデメリット
Bulmaは人気のCSSフレームワークですが、いくつかデメリットもあります。
似たようなデザインになってしまう
Bulmaはデフォルトのスタイルの特徴が強いため、Bulmaを使ったウェブサイトはどれも同じようなデザインになりがちです。
ファイルサイズが大きい
Bulmaは多くのコンポーネントを搭載しているためファイルサイズが大きくなります。ウェブ上において、大きいファイルの読み込みはウェブサイトのパフォーマンスに悪い影響があります。
BulmaとBootstrapの比較の違い
BulmaとBootstrapは両方とも、人気のあるフロントエンドフレームワークです。以下は、両者の主な違いです。
| Bulma | Bootstrap | |
| グリッドシステム | Flexbox | Flexboxまたはfloat |
| カスタマイズ可能な色 | あり | あり |
| カスタマイズ可能なフォント | あり | あり |
| カスタマイズ可能なアイコン | なし | あり |
| 組み込みコンポーネント | あり | あり |
| JavaScriptプラグイン | なし | あり |
| モバイルファーストデザイン | あり | あり |
| ライセンス | MIT | MIT |
BulmaはBootstrapと比較して機能的にはほぼ同等です。
Bulmaのインストール方法
Bulmaのインストール方法について詳しく説明します。
NPMを使ったインストール
Node Package Manager（NPM）を使ってBulmaをインストールするのが一番簡単な方法です。以下のコマンドを実行するだけで、Bulmaをプロジェクトに追加することができます。
npm install bulma
CDNを使ったインストール
Content Delivery Network（CDN）を使ってBulmaのスタイルシートを使用することも可能です。以下のリンクをHTMLファイルの<head>タグ内に追加します。
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css”>
GitHubからのダウンロード
GitHubリポジトリからBulmaをダウンロードすることもできます。BulmaのGitHubページからソースコードをダウンロードし、プロジェクトに追加します。
Bulmaの基本的な使用方法
Bulmaをインストールしたら、次にBulmaの基本的な使用方法を学びましょう。Bulmaは、HTMLのclass属性を使ってスタイルを適用します。以下に、Bulmaを使った簡単なHTMLテンプレートを示します。
このテンプレートでは、sectionとcontainerというBulmaのクラスを使用して、ページのレイアウトを設定しています。また、titleクラスは、テキストにスタイルを当てています。
Documentation| Bulma: Free, open source, and modern CSS framework based on Flexbox：https://bulma.io/documentation/
Bulmaのコンポーネント
Bulmaのコンポーネントを使用することで、迅速にウェブページを作成することができます。Bulmaのいくつかのコンポーネントの使用例を記載します。
ボタン
Bulmaでは、ボタンのスタイルを簡単にカスタマイズすることができます。以下は、Bulmaを使用してボタンを作成する例です。
<button class="button is-primary">Primary Button</button>
<button class="button is-link">Link Button</button>
<button class="button is-success">Success Button</button>
ナビゲーションバー
Bulmaのナビゲーションバーは、ウェブサイトのヘッダー部分に使用します。以下は、Bulmaを使用してナビゲーションバーを作成する例です。
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="logo.png" alt="Logo">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">Home</a>
<a class="navbar-item" href="#">About</a>
<a class="navbar-item" href="#">Contact</a>
</div>
</div>
</nav>
カード
Bulmaのカードは、情報を整理して表示するのに便利です。以下は、Bulmaを使用してカードを作成する例です。
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="image.jpg" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
カードを横に並べる
カードを横に並べるためには、Bulmaのcolumnsとcolumnクラスを使用します。以下に、3枚のカードが並んだHTMLテンプレートを示します。
<div class="columns">
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="image1.jpg" alt="プレースホルダー画像1">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">田中 太郎</p>
<p class="subtitle is-6">@tanaka_taro</p>
</div>
</div>
<div class="content">
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
<a href="#">#css</a> <a href="#">#レスポンシブ</a>
<br>
<time datetime="2016-1-1">2016年1月1日 - 23:09</time>
</div>
</div>
</div>
</div>
<div class="column">
<!-- 2枚目のカードのHTMLをここにコピー -->
</div>
<div class="column">
<!-- 3枚目のカードのHTMLをここにコピー -->
</div>
</div>
まとめ
Bulmaは簡単にレスポンシブデザインを作成することができるCSSフレームワークです。Flexboxを使用したグリッドシステムや多数のカスタマイズ可能なコンポーネント、ユーティリティが備わっており使いやすいフレームワークです。同じようなCSSフレームワークにBootstrapがありますが、機能はほぼ同等であり、基本的にはデザインで選ぶと良いと思います。
