Hello Bulma!

====== 181202 Bulma(CSS Flamework) ====== 個人的に、CSSは極力書きたくないです。 Ionic Framework（スマホアプリ作成用ソフト）を用いると、書くべきCSSが少なくすみそうで好きなのですが、スマホサイト用なので、レスポンシブにするのなら、BulmaというCSSフレームワークがよいかもしれません。 CSSフレームワークはBootstrapが有名ですが、JQuery依存なので、個人的に苦手なので、Bulmaを試してみたいと思います。 https://bulma.io/ {{:z_blog:2018:pasted:20181202-121333.png}} ===== Bulmaを使用する方法 ===== 一番簡単なのは、BulmaのCSSファイルと、FontAwesoomeのアイコン定義ファイルを、CDNから読み込む方法です。 index.htmlファイルを作成して、以下のように記述します。(インターネットにつながった環境が必要)




  
    
    
    Hello Bulma!
    
    
  
  
  
    
      
        Hello World
      
      
        My first website with Bulma!
      
      
        HELLO!
        
        is-primary
        is-link
        is-info
        is-success
        is-warning
        is-danger
      
      
        何か書き込めば、改行される？
      
      
        Bulma Doc Button

すると、以下のようになります。 {{:z_blog:2018:pasted:20181202-120957.png}} ===== 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) を実現する ===== その他 =====