Webサイト制作者必見!CSSフレームワークBulmaの導入方法 | 千葉で集客ホームページ制作はティーエスフォート
コラム

Webサイト制作者必見!CSSフレームワークBulmaの導入方法

Webサイト制作者必見!CSSフレームワークBulmaの導入方法

今回の記事では、CSSフレームワークであるBulmaの導入方法をご紹介します。

1.Bulmaとは

BulmaはJavaScriptを必要としないことが特徴で、Bulmaが用意したCSSファイルをWebページに組み込むだけで手軽に使えるようになります。

Bulmaは類似フレームワークのBootstrapと比べてシンプルで軽量で速いというメリットがあり、さらにデザイン性や拡張性が高い設計になっています。

また、サービス自体は英語ですが、ドキュメントが充実しているため、学習にかける時間的コストも少なくて済みます。

2.Bulmaのインストール方法

Bulmaを導入するには3つの手段があります。「公式サイトからダウンロード」、「NPMコマンドでインストール」、「CDNを利用」の3つです。

1つずつインストール方法をご紹介します。

公式サイトからダウンロード

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

ダウンロードしたファイルを解凍します。

Bulmaを導入するWebサイトに解凍した「css」ディレクトリをコピーします。

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

XHTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>テスト</title>
<!-- CSSの読み込み -->
<link href="css/bulma.min.css" rel="stylesheet">
</head>
<body>
<h1>導入</h1>
</body>
</html>

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

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

npmでのインストール
# npm install bulma

yarnでのインストール
# yarn add bulma

bowerでのインストール
# bower install bulma

NuGetでのインストール
Install-Package Blazorise.Bulma -Version 0.8.8.3

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

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

CDNとは「Content Delivery Network」の略です。同一のコンテンツを、多くのユーザーの端末に効率的に配布するために使われる仕組みです。

まず、CDNへのリンクを設定します。

HTMLのheadタグの内にlinkタグを他のスタイルシートへのリンクよりも前に挿入することによって、Bulmaのスタイルを参照します。

jsDelivrの場合
HTML
<!-- BulmaのCSS(スタイルシート)を参照 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.css">


CDNJSの場合
HTML
<!-- BulmaのCSS(スタイルシート)を参照 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css">



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

HTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>テスト</title>
<!-- BulmaのCSSの読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.css">
</head>
<body>
<h1>導入</h1>
</body>
</html>

3.Bulma の使い方

Bulmaはグリッドシステムを採用しています。親要素のブロックにcolumnsクラスをつけ、子要素のブロックにcolumnクラスをつけます。これによってカラムレイアウトを構築することができます。

HTML
<div class="columns">
<div class="column">
1
</div>
<div class="column">
2
</div>
</div>

まとめ

今回のコラムでは、CSSフレームワークのBulma導入方法をご紹介しました。

3種類のインストール方法(公式サイト、パッケージマネージャー、CDN)があります。
CSSによるデザインをより簡単に効率よく行うにあたって、ぜひ導入を検討してみてください。

関連記事

ページ先頭へ