2 flat logo on transparent 256
2019-02-09

軽量なCSSフレームワークBulma(ブルマ)のご紹介

Made with bulma  dark

プログラミング言語にかからず、フロントページのコーディングには必ずHTMLとCSSの知識が必要になります。

スマホが普及している昨今ではレシポンシブデザインなども必要になってきており、フロントエンドで考えることが増加しています。

Bulma(ブルマ)とは

Bootstrapなどと同様でCSSのフレームワークになります。

Bulma(ブルマ)公式サイト

Bulmaの特徴ですが

1:CSSのみで構成されているので早い

2:後発のCSSフレームワークの為デザイン性 拡張性が高いとなります。

最新のCSSに対応できるよう標準でFlexBoxに対応して おりFont Awesome Sassに対応しています。

利用に関してはCDNやnpm、Gitでのダウンロード対応が可能です。

しかし、軽量であることを目指しているためBootstrapのような jQueryの拡張コンポーネントなどは現在提供されていません

またIE11の対応は90%くらいになりますので、IEを想定シている場合はご注意ください。

もちろんそれ以外のiOSやAndroidなどは対応しております。

FlexBox自体は解説は以下

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

Font Awesomeの解説は以下

サイトへ簡単にアイコンを無料設定できる|Font Awesomeの使い方|サンプルコード付き

Sassの関連記事

Ruby On RailsでSassを活用し、CSS作成を高速・効率化する

Bulma(ブルマ)でできること

最新のCSSフレームワークである為、他のCSSフレームワークで提供されている機能はすべて対応しております。

・グリッドシステム

・100%レシポンシブデザイン対応

・Bulmaのコンポーネントを利用することによって、簡単にデザイン・機能利用が可能

・SassによるCSSの色管理

※Sassはコンパイルが必要です

Bulmaを利用する

前述した通り、CDNを利用 Git からダウンロード Npmでダウンロードの3つの方法があります。

CDNで利用する場合

htmlのヘッダーなどで以下を追加すればそのまま利用できます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">

Npmでダウンロードする

LinuxやMacのターミナルで以下Commandを実行します。

npm install bulma

bowerを利用する場合は以下から

bower install bulma

※npmのバージョンによってはインストールできない場合があるので、npmのバージョンアップが必要になる場合があります。

Gitからダウンロード

Gitからダウンロード

以上になります。

Bulmaのサンプルコードを利用した解説記事は以下から

CSSフレームワークBulma(ブルマ)を使ったグリッドシステムの解説

その他関連記事

Vue.jsとAnimate.cssで手軽にアニメーションを実現する|コピペで動くサンプル付き

Sass(Scss)のfor文を使って、ちょっとしたデザイン修正を便利に行う

CSSだけでOK!ヘッダーとサイドバーを固定する|サンプルコード付き

現役デザイナーが教える! デザインを勉強する上で参考になりそうなサイトとその理由

CSS3でhoverした時に背景をふわっと変更する|コピペで動くサンプル付き

Vue.jsでマークダウンに対応したメモ帳アプリを作成する|コピペで動くサンプルコード付き

Bootstrap系の記事は以下から

Bootstrapでボタンの色や大きさを変更する|コピペで動くサンプル付き

Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付き

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

LocalStorageとBootstrapのモーダルを利用する

Bootstrapでテーブル表記を行う|コピペで動くサンプル付き

Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き

前の記事
次の記事