Bulma

マークアップ

Bulmaとは、CSSのフレームワーク(開発を楽に行えるように用意された枠組み・機能群)の一つです。特徴は、JavaScriptが組み込まれていないので軽いという点です。標準でFlexboxに対応しています。

導入

HTMLのhead要素内に以下の記述を加えるだけで使用できます。

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

最新バージョンは以下のサイトでご確認ください。

bulma - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
bulma - Modern CSS framework based on Flexbox - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

使い方

HTML要素に使いたいclass属性を指定します。

例1
  <a href="#" class="button">
    ボタン
  </a>
Image from Gyazo

buttonクラスを指定すると、a要素がボタンになりました。

例2
  <a href="#" class="button is-large is-info">
    ボタン
  </a>

is-largeクラスで大きくし、is-infoクラスで青くしました。

より詳しく知りたい方は公式サイトをご覧ください。

参考記事

軽量なCSSフレームワークBulma(ブルマ)のご紹介
Bootstrapなどと同様でCSSのフレームワークになります。 Bulmaの特徴ですが、シンプルで軽量なカスタマイズ性を実現することを目指し、CSSのみで構成されています。標準でFlexBoxに対応しています。
軽量なレスポンシブCSSフレームワーク bulma を3分で紹介
Bulmaがどんなものか短時間で知りたい人のために、Bulmaの紹介記事を送ります。 Bulmaは、Bootstrapなどと同じレスポンシブCSSフレームワークの一つです。Jeremy Thomasによって開発が行われて
CSSフレームワークのススメ - BULMAの導入と覚え書き - Qiita
はじめに Webサイトの三大要素「HTML」「JavaScript」「CSS」。 HTMLは内容と構造を、JavaScriptは振る舞いを、CSSは表現を受け持つと言われます。 私は普段バックエンド中心に仕事をしているエンジニ...

コメント

タイトルとURLをコピーしました