HTML5
CSS3

CSSフレームワーク BULMA チュートリアル①

More than 1 year has passed since last update.

はじめに

BULMAは、CSSフレームワークで、2016年5月に勧告候補になり各ブラウザへの対応も進んでいる「Flexbox」を最大限に利用しています。またJavaScriptを必要としないことも特徴で、BULMAが用意したCSSファイルを一つ、Webページに組み込むだけで手軽に使えるようになるのも良いところかと思います。

本記事では、BULMAの簡単な使い方を紹介するために、まずは基礎的な使い方を説明し、そのあとはWebページを1ページ作成するチュートリアルを行う予定です。

BULMAの導入

BULMAを導入するには三つの手段があると公式ドキュメントに紹介されています。「NPMコマンドでインストール」、「公式サイトからダウンロード」、「CDNを利用」の三つです。本記事では主に「CDNを利用」を使う予定です。

下記のサンプルコードはCDNをつかってBULMAを導入している例です。BULMAと一緒に使うことを推奨されている「Font Awesome」もCDNで導入しています。

tutorial.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>BULMAチュートリアル</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  </head>
  <body>
    <a href="#">HELLO!</a>
  </body>
</html>

BULMAの基本

BULMAで用意されているコンポーネントやレイアウトを利用するには、HTML要素にクラスを割り当てます。
tutorial.html中のa要素に下記のようにbuttonクラスを追加してBULMAの働きを見てみてください。

tutorial.html(抜粋)
<a href="#" class="button">HELLO!</a>

de9bd5b4-e3cb-ccc7-f4b2-b9fba53bebbb.png

色と大きさの指定

BULMAではモディファイアーと呼ばれるクラスを追加することで、要素の色や大きさを変更することもできます。
再度、tutorial.html中のa要素に下記のようにクラスを追加してください。

tutorial.html(抜粋)
<a href="#" class="button is-primary is-large">HELLO!</a>

bfcc2f28-878d-ff24-db14-5b00e1fbb6f8.png

使用できる色の一覧は次の通りです。

  • is-primary
  • is-info
  • is-success
  • is-warning
  • is-danger
  • is-white
  • is-black

dd2de3f5-6ff0-ff67-3e8a-f62ed6a2cbd8.png

ただしBULMAのソースコードを見てみると、もう少し定義済みの色があるような感じです。

使用できる大きさの一覧は次の通りです。

  • is-small
  • is-medium
  • is-large

a4e387bd-b937-e060-cc47-9c2e3cb6491d.png

レイアウト

要素のレイアウトは、クラスを付与するだけで実現できます。

tutorial.html(抜粋)
<div class="columns">
   <div class="column">
     <div style="background-color: #42afe3">
       左サイド左サイド左サイド左サイド左サイド
     </div>
   </div>
   <div class="column">
     <div style="background-color: #f68b39">
       まんなかまんなかまんなかまんなかまんなか
     </div>
   </div>
   <div class="column">
     <div style="background-color: #fce473">
       右サイド右サイド右サイド右サイド右サイド
     </div>
   </div>
</div>

cc1ab719-684c-8900-4450-11ff3c727b7d.png

並べたいそれぞれの要素には"column"クラスを付与し、それを"columns"クラスを付与した要素で囲むことで、レイアウトが完成します。
デフォルトでは、各"column"クラスの要素は均等に並べられます。これを変更する手段として二種類のモディファイアーが用意されています。

  • 分数表現:ウィンドウ幅の1/2や1/3といった指定
  • グリッド表現:ウィンドウ幅を12分割したうちのいくつ分となるかを指定
tutorial.html(抜粋)
    <div class="columns">
      <div class="column is-two-thirds">
        <div style="background-color: #f68b39">
          ウィンドウ幅2/3サイズの要素
        </div>
      </div>
      <div class="column is-one-thirds">
        <div style="background-color: #fce473">
          ウィンドウ幅1/3サイズの要素
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column is-one-quarter">
        <div style="background-color: #42afe3">
          ウィンドウ幅1/4サイズの要素
        </div>
      </div>
      <div class="column is-half">
        <div style="background-color: #f68b39">
          ウィンドウ幅1/2サイズの要素
        </div>
      </div>
    </div>

fccad358-ac8f-e45f-fe6d-7b72e9506889.png

tutorial.html(抜粋)
    <div class="columns">
      <div class="column is-4">
        <div style="background-color: #f68b39">
          ウィンドウ幅4/12サイズの要素
        </div>
      </div>
      <div class="column is-8">
        <div style="background-color: #fce473">
          ウィンドウ幅8/12サイズの要素
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column is-2">
        <div style="background-color: #42afe3">
          ウィンドウ幅2/12サイズの要素
        </div>
      </div>
      <div class="column is-2">
        <div style="background-color: #f68b39">
          ウィンドウ幅2/12サイズの要素
        </div>
      </div>
    </div>

aa46211f-04cf-0537-1565-8c287efee105.png

ここまでのまとめ

まずは基本的なBULMAの使い方と導入の仕方を説明しました。
次回からは↓こんなようなWebページを作るチュートリアルを始めたいと思います。
5e88d5a2-a891-d14f-81a6-50dd767677d9.png

 目次

CSSフレームワーク BULMA チュートリアル①
CSSフレームワーク BULMA チュートリアル②
CSSフレームワーク BULMA チュートリアル③