Bulmaのクラス(部品)を組み合わせてWebページを作成する

Bulma ロゴ トップ バナー

今回は、Bulmaが提供してくれている様々なクラスを使用して一般的なWebページを作成したいと思います。

ここでは、以下のページを作成します。

Bulmaのクラス部品を組み合わせて作成するWebページのサンプル

ページの全体像

作成するページは、ごく普通の一般的な形式のページになります。

ページの上部には、ヘッダーを配置します。

中央のボディ部分は、2列構成にします。

ページの下部には、フッターを用意します。

Bulmaのクラス部品を組み合わせて作成するWebページの全体像イメージ

ページの基本となる枠組み

ページを作成する準備として基本の枠組みを作成します。

HTML

viewportの設定を行い、BulmaのCSSとFont AwesomeのCSSをheadタグで読み込みます。

ヘッダー

ヘッダーは、上部のナビゲーションバー、中央部のタイトルとサブタイトル、下部のナビゲーションバーの3つのパーツから構成します。

Bulmaのクラス部品を組み合わせて作成するWebページのサンプル(ヘッダー)

HTML

上部ナビゲーションバー

ヘッダー上部のナビゲーションバーには、ブランドロゴ、言語を選択するドロップダウンリスト、サイト内検索を行うボックス、ログインボタン(リンク)を配置しています。

HTML

ここでは、Bulmaのナビゲーションバーのスタイルを設定する以下のクラスを使用しています。

  • navbar
    ナビゲーションバーのメインコンテナに指定するクラスです。
  • navbar-brand
    ナビゲーションバーにブランドロゴを配置する際にに指定するクラスです。
  • navbar-start
    ナビゲーションバーの開始を表すクラスです。要素はナビゲーションバーの左側に配置されます。
  • navbar-end
    ナビゲーションバーの終了を表すクラスです。要素はナビゲーションバーの右側に配置されます。
  • navbar-item
    ナビゲーションバーのアイテムに指定するクラスです。
  • navbar-link
    ドロップダウンのリンクを矢印を表現するクラスです。
  • navbar-dropdown
    ドロップダウンリストアイテム(メニュー)のコンテナに指定するクラスです。
Bulmaのナビゲーションバー Navbar [CSSフレームワーク]
WebアプリケーションやWebシステムでは、ページの上部や下部にナビゲーションバーを配置して、ユーザーの操作性を向上させます。 ...

ブランドロゴのコンテナとなるdiv要素には、navbar-brandクラスを指定します。
ブランドロゴのリンクのa要素には、navbar-itemクラスを指定します。

言語を選択するドロップダウンリストのコンテナのdiv要素には、navbar-startクラスを指定し、その子要素のdiv要素には、navbar-item、has-dropdown、is-hoverableクラスを指定します。
is-hoverableクラスを指定することで、ドロップダウンにマウスカーソルを合わせることでリストアイテムが表示されるようになります。
ドロップダウンリストは、navbar-linkクラスとnavbar-dropdownクラスを指定して作成します。is-boxedクラスは、ドロップダウンリスト部分をボックス化するために指定しています。ドロップダウンのリストアイテムのa要素には、navbar-itemクラスを指定します。

タイトルとサブタイトル

タイトルとサブタイトルを配置する部品は、section要素をコンテナとしてheroクラスを指定します。
タイトルのh1要素には、titleクラスを指定し、サブタイトルのh2要素には、subtitleクラスを指定しています。

下部ナビゲーションバー

ヘッダー下部のナビゲーションバーには、ナビゲーションメニューのリンク、ダウンロードボタン、各種SNSボタン、RSSボタンを配置しています。

HTML

ナビゲーションメニューのアイテムのa要素には、navbar-itemクラスを指定します。
アイテムにはicon-textクラスを指定して、アイコンとテキストを配置しています。

HTML

ボディ

ボディには左側にサイドバーを配置して、右側にメインコンテンツを配置します。

Bulmaのクラス部品を組み合わせて作成するWebページのサンプル(ボディ)

ボディ部分は左ペインと右ペインの2列構成になっています。
左右のペインはcolumnsクラスとcolumnクラスを使用して、横に2分割して列を2つ作成しています。
左側の列(column)にis-4クラスを指定して左右の比率を1:2にしています。

HTML

サイドバー

サイドバーには新情報を表示する通知ボックスと、縦(垂直)方向のナビゲーションメニューを配置しています。

通知ボックスのaside要素には、notificationクラスを指定します。
通知ボックス内の「news」のタグラベル(バッジ)はtagクラスを指定して作成しています。

HTML

サイドバーのメニューのコンテナとなるaside要素には、boxクラスを指定してボックス化し、menuクラスを指定しています。
メニューのカテゴリーを表すテキストには、menu-labelクラスを指定します。メニューリストのコンテナのul要素には、menu-listクラスを指定します。
メニューリストのアイテムのli要素には、is-activeクラスを指定することで背景色を変更し、アクティブなアイテムを表現することができます。

HTML

メインコンテンツ

メインコンテンツには、上部にタブとボタンを配置したサブヘッダーを作成し、下部にメディアオブジェクトを使用した掲示板のような本文を配置しています。

サブヘッダーは、section要素にlevelクラスを指定して横(水平方向)にタブとボタンを配置しています。
タブを配置するコンテナのdiv要素には、level-leftクラスを指定して左寄せにし、ボタン(フィルター)を配置するコンテナのdiv要素には、level-rightクラスを指定して右寄せにしています。

タブは、div要素にtabsクラスを指定して作成します。
フィルターボタンにはbuttonクラスを指定します。

HTML

メディアオブジェクトの本文はコンテナとなるarticle要素にmediaクラスを指定します。
メディアオブジェクトの画像を配置するfigure要素には、media-leftクラスを指定して左側に配置します。
メディアオブジェクトのテキストを配置するdiv要素には、media-contentクラスを指定して右側に配置します。

HTML

フッター

フッターにはCopyright(コピーライト)を配置しています。

Bulmaのクラス部品を組み合わせて作成するWebページのサンプル(フッター)

フッターのfooter要素には、footerクラスを指定します。
footerクラスを指定すると、要素の下部に適切なマージンが設けられます。

HTML

最後に

CSSフレームワークのBulmaが提供している様々なクラスをを使用して1枚のWebページを作成しました。
Bulmaを使用することで面倒なCSSの記述をかなり省略できるので、簡単にWebサイトを作成する必要がある時はぜひ利用してみてください。
Bulmaを利用すると素早く見栄えのいいWebページを作成することができます。

最後に今回作成したページの全HTMLを記載しておきます。

Bulma 入門 Tips 一覧