文書の過去の版を表示しています。

181202 Bulma(CSS Flamework)

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>

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

サルでもわかる機械学習

181202 Bulma(CSS Flamework)

目次

Bulmaを使用する方法