Web

Bulma (CSS フレームワーク) のサンプルページを作りました

投稿日:2018年10月12日 更新日:

概要

Bulma というCSSフレームワークを使ったサンプルページを作りました。

Bulma は、以下の特徴を持つ CSSフレームワークです。

  • Flexbox をフルに活用している。
  • シンプルなグリッドシステム
  • 学習が容易
  • カスタマイズが簡単
  • JavaScript は含まれていない。

Flexbox をフルに活用している

Flexbox というのは、今まで難しかった「要素を横に並べる」機能を簡単に実現するための新しい CSS の仕様です。(参考:CSS Flexible Box Layout Module Level 1

このサイトでも CSS Flexible Box Layout Module のサンプルページを作りました というページで取り上げています。

Bulma はこの新しい CSS の仕様をフルに活用しているフレームワークです。

シンプルなグリッドシステム

Bulma には columns というCSSクラスが用意されており、簡単にレスポンシブな動作を実現することができます。つまり、画面の幅によって、要素が横に並んだり縦に並んだりといった動作を自動的に変化させることができます。

この columns とは別に、レスポンシブな動作を指定する CSS クラスも複数用意されています。

学習が容易

Bulma の用意している CSSクラスの名前は、先頭に is-has- がついており覚えやすいです。

カスタマイズが簡単

Bulma は、Sass というCSSの拡張言語でカスタマイズすることができます。

Sass の変数がたくさん用意されており、その値を変更するだけでスタイルを変更することができます。

JavaScript は含まれていない。

Bulma には JavaScript ファイルが含まれておらずシンプルで軽いです。

とはいっても、例えばモーダル(ウィンドウ)コンポーネントの表示/非表示を実現するためには JavaScript による処理が必要になりますので、そこは自分で追加する必要があります。苦手な方には少し大変かもしれませんが、必要最低限な JavaScriptのコードだけ追加すればよいですし、無駄なコードを読み込ませることもなく動作が軽いという利点につながります。

サンプルページ

作成したサンプルページの URL は以下になります。

デモページ

? Bulma Sample ページ

Bulma の機能 1つ1つに関して気付いたことや注意点なども、この中に書いています。今後も気付いたことがあれば追加していく予定です。

サンプルページ画面
サンプルページ画面

Bulma 公式サイト

おわりに

少し使ってみた上での感想ですが、確かに Bulma は使いやすいですし、見た目もよいです。

これからどんどん使っていきたいと思います。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

JavaScript

console.log や console.error の便利なところ

console.log や console.error の便利なところを紹介します。

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

Web

Gmail でよく使うキーボードショートカット

Gmail でよく使うキーボードショートカットを紹介します。 1. Gmail のキーボードショートカットを有効にする手順 まず、Gmail でキーボードショートカットを利用するには、設定で有効にする …

MathJax を試してみました。

MathJax は、HTML上で数式を美しく表示するための JavaScriptライブラリです。 基本的な使い方は、 HTMLファイルに以下を記述して MathJax.js を読み込みます。HTMLフ …

Google

Google マップの便利な機能

目次1. はじめに2. Googleマップの便利な機能3. 経路検索(ルート検索)経路をホーム画面に追加4. 運転モード5. マイプレイス6. 印刷 1. はじめに Googleマップ はとても便利な …