目次

181202 Bulma(CSS Flamework)

個人的に、CSSは極力書きたくないです。

Ionic Framework（スマホアプリ作成用ソフト）を用いると、書くべきCSSが少なくすみそうで好きなのですが、スマホサイト用なので、レスポンシブにするのなら、BulmaというCSSフレームワークがよいかもしれません。

CSSフレームワークはBootstrapが有名ですが、JQuery依存なので、個人的に苦手なので、Bulmaを試してみたいと思います。

https://bulma.io/

Bulmaを使用する方法

一番簡単なのは、BulmaのCSSファイルと、FontAwesoomeのアイコン定義ファイルを、CDNから読み込む方法です。

index.htmlファイルを作成して、以下のように記述します。(インターネットにつながった環境が必要) 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
      <p>
        <a href="#" class="button is-primary">HELLO!</a>
        
        <a class="button is-primary">is-primary</a>
        <a class="button is-link">is-link</a>
        <a class="button is-info">is-info</a>
        <a class="button is-success">is-success</a>
        <a class="button is-warning">is-warning</a>
        <a class="button is-danger">is-danger</a>
      </p>
      <p>
        何か書き込めば、改行される？
      </p>
      <p>
        <a class="button is-primary is-outlined is-fullwidth" href="https://bulma.io/documentation/elements/button/">Bulma Doc Button</a>
      </p>
      
    </div>
  </section>
  </body>
</html>

すると、以下のようになります。

Bulmaの使い方リンク

https://qiita.com/ochiochi/items/de1afd2d3fc8f6d3ea55
@ochiochi
2017年02月13日に更新
CSSフレームワーク BULMA チュートリアル①

https://qiita.com/t_kawai/items/aa87f6fe6c25dfd3dd65
@t_kawai
2018年05月14日に更新
【CSSフレームワーク】BULMAのnavbarを学ぶ(執筆中)

http://www.art-side.com/archives/129
bulmaのNavbar burgerメニューをvue(nuxt)に組み込む際のテンプレートの書き方
2018-10-10 投稿者: miho

Vue.js+Bulmaの使い方リンク

https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d
@isamusuzuki
2018年05月03日に更新
Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件

https://qiita.com/OvThAlmin/items/154e53952bc46d91d44c
@OvThAlmin
2018年10月28日に更新
nuxt-fontawesomeを使って Nuxt.jsへFont Awesome 5を導入する

https://qiita.com/isamusuzuki/items/09e46a9e0debeef71fc4
@isamusuzuki
2018年05月04日に更新
Nuxt.jsに組み込んだBulmaでスティッキーフッター (sticky footer) を実現する

その他