未分類

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 は使いやすいですし、見た目もよいです。

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

📂-未分類

執筆者:labo


comment

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

関連記事

no image

日本のソフトウェア業界に関するネガティブな情報

ソフトウェア業界の真実も知って頂きたいため、ネガティブな記事を載せていきます。 ※ ここに載せた記事の内容の真偽については議論の余地もありますが、私の経験から見ても、現実の一面を表していることは否定で …