Bulmaを導入(インストール・CDNから参照)する

Bulma ブルマ ロゴ

CSSフレームワークのBulmaを使うと、レイアウトやエレメント、フォーム要素などのスタイルを簡単に設定できます。また、Bulmaはレスポンシブデザインにも対応しているので、様々なWebサイトで利用することができます。
そこで本記事ではBulmaの導入方法について説明したいと思います。

Bulmaとは

Bulmaは無料で提供されているFlexboxベースのオープンソースCSSフレームワーク(ライブラリ)です。
BulmaはJavascriptなどを使わずにCSSのみで実装されています。
ちなみに世界的にも有名なTwitter社が開発したCSSフレームワークのBootstrapは、CSSだけでなくJavaScript(jQuery)もセットになってフレームワークが構成されています。
BulmaはBootstrapに比べてシンプルで軽量で速いです。
Bulmaは比較的後発のCSSフレームワークなので、デザイン性や拡張性が高い設計となっています。
Bulmaに定義されているクラスは、単純明快でわかりやすいものが多く揃っているので、とても使いやすくなっています。
また、英語ではありますがドキュメントが充実していますので、学習コストも少なくて済みます。

Bulmaをダウンロードしてインストールする

Bulmaのサイトにアクセスします。

Bulma

Bulmaのダウンロード

Bulmaのサイトにアクセスすると以下のページが表示されます。

Bulma ホームページ

「Download」ボタンをクリックします。
「Download」ボタンは画面の右上、または画面の左中央あたりにあります。

Bulma ダウンロード

「Download」ボタンをクリックすると、Bulmaのダウンロードが始まり、圧縮ファイル(zipファイル)がダウンロードされます。

Bulma ダウンロードした圧縮ファイル

ダウンロードしたzipファイルを7zipなどの解凍ソフトで解凍するか、エクスプローラーで解凍ファイルを開いて、中のファイルを他のフォルダーにコピーします。

Bulmaのインストール

ダウンロードしたファイルを解凍すると、cssフォルダー、sassフォルダーなどが作成されます。

Bulmaを導入するWebサイトにcssフォルダーをコピーします。

今回は、Webサイトのルートの直下にcssフォルダーを配置することにします。(index.htmlが配置されているフォルダーにcssフォルダーを配置します。)

HTMLファイルに適用

HTMLファイル(index.html)にBulmaを適用する場合は以下のようになります。

パッケージマネージャーでBulmaをインストールする

npm、yarnなどのパッケージマネージャーを使用してBulmaのcss、sassをインストールすることもできます。

npm

npmでのインストールは以下のコマンドを実行します。

yarn

yarnでのインストールは以下のコマンドを実行します。

bower

bowerでのインストールは以下のコマンドを実行します。

NuGet

NuGetでのインストールは以下のコマンドを実行します。

NuGetではパッケージマネージャーを使用してインストールすることもできます。

Visual Studioで作成したプロジェクトを右クリックしてコンテキストメニューを表示します。
表示されたコンテキストメニューにある「NuGet パッケージの管理」をクリックします。

NuGet パッケージの管理メニュー

「NuGet パッケージ マネージャー」の画面が表示されますので「参照」をクリックします

NuGetパッケージの管理で参照を選択

「参照」をクリックするとコンボボックスが表示されますので「bulma」と入力します。

NuGetパッケージの管理でbulmaを入力

左ペインのリストに「Blazorise.Bulma」が表示されますので選択します。

NuGetパッケージの管理でBlazorise.Bulmaを表示

選択すると右ペインに詳細が表示されますので「インストール」ボタンをクリックします。

NuGetパッケージの管理でBlazorise.Bulmaをインストール

インストールの途中で「変更のプレビュー」ダイアログボックスが表示されたら「OK」ボタンをクリックしてください。

NuGet パッケージの管理 変更のプレビューダイアログボックス

CDNを参照してBulmaを利用する

Bulmaのファイルをダウンロードせずに、手軽に使えるCDNを参照して利用することもできます。

CDNへのリンクを設定

HTMLのheadタグ(<head>)の内にlinkタグ(<link>)を他のスタイルシートへのリンクよりも先に入れて、Bulmaのスタイルを参照します。

jsDelivr

CDNJS

上記の例では、バージョン「0.8.0」を参照しています。
バージョンの部分は環境に合わせて適宜変更してください。

HTMLファイルに適用

HTMLファイル(index.html)にBulmaのCDNへの参照を適用すると、次のようになります。

まとめ

BulmaのWebサイトへの導入は以上です。

Bulmaは

  1. ファイルをダウンロードしてサイトに配置
  2. パッケージマネージャーでインストール
  3. CDNを利用して参照

のいずれの方法でもWebサイトへ導入できます。

目的や用途に応じて、Bulmaを利用する方法を使い分けてください。