Bulma

CSSフレームワーク

BulmaはCSSのみで動作する軽量CSSフレームワークです。このページもBulmaを使っています。

概要
項目内容
公式サイト https://bulma.io/
開発者 Jeremy Thomas
ライセンス MIT
Bulma v0.9.1
モジュールサイズ
bulma.min.css199KB

チートシート

テンプレート

Bulma CSSフレームワークのテンプレートは次のとおり。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

CDN

Bulma CSSフレームワークはCDN (Contents Delivery Network) を通じて使うことができる。CDNを使ったBulmaのテンプレートは次のとおり。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

.has-background-primary

<div class="has-background-primary">Primary</div>
Primary

.has-background-info

<div class="has-background-info">Info</div>
Info
<div class="has-background-link">Link</div>

.has-background-success

<div class="has-background-success">Success</div>
Success

.has-background-warning

<div class="has-background-warning">Warning</div>
Warning

.has-background-danger

<div class="has-background-danger">Danger</div>
Danger

.has-background-black

<div class="has-background-black">Black</div>
Black

.has-background-black-bis

<div class="has-background-black-bis">Black-bis</div>
Black-bis

.has-background-black-ter

<div class="has-background-black-ter">Black-ter</div>
Black-ter

.has-background-dark

<div class="has-background-dark">Dark</div>
Dark

.has-background-grey-darker

<div class="has-background-grey">Grey</div>
Grey-darker

.has-background-grey-dark

<div class="has-background-grey-dark">Grey-dark</div>
Grey-dark

.has-background-grey

<div class="has-background-grey">Grey</div>
Grey

.has-background-grey-light

<div class="has-background-grey-light">Grey-light</div>
Grey-light

.has-background-grey-lighter

<div class="has-background-grey-lighter">Grey-lighter</div>
Grey-lighter

.has-background-light

<div class="has-background-light">Light</div>
Light

.has-background-white-ter

<div class="has-background-white-ter">White-ter</div>
White-ter

.has-background-white-bis

<div class="has-background-white-bis">White-bis</div>
White-bis

.has-background-white

<div class="has-background-white">White</div>
White

.button

<button class="button">Button</button>

<a class="button">Link</a>

Link

<input type="submit" class="button">

<input type="reset" class="button">

.card

<div class="card">
<div class="card-content">Content</div>
</div>
Content

.card-header

<div class="card">
  <header class="card-header">
    <p class="card-header-title">Header title</p>
  </header>
  <div class="card-content">Content</div>
</div>

Header title

Content
<div class="card">
  <div class="card-content">Content</div>
  <footer class="card-footer">
    <p class="card-footer-item">1st footer item</p>
    <p class="card-footer-item">2nd footer item</p>
  </footer>
</div>
Content

.column

<div class="columns">
  <div class="column">first column</div>
  <div class="column">second column</div>
</div>
first column
second column

.is-full

<div class="columns">
  <div class="column is-full has-background-primary">full column</div>
</div>
full column

.is-half

<div class="columns">
  <div class="column is-half has-background-primary">half column</div>
</div>
half column

.is-one-third

<div class="columns">
  <div class="column is-one-third has-background-primary">1/3 column</div>
</div>
1/3 column

.is-two-thirds

<div class="columns">
  <div class="column is-two-thirds has-background-primary">2/3 column</div>
</div>
2/3 column

.is-one-quarter

<div class="columns">
  <div class="column is-one-quarter has-background-primary">1/4 column</div>
</div>
1/4 column

.is-three-quarters

<div class="columns">
  <div class="column is-three-quarters has-background-primary">3/4 column</div>
</div>
3/4 column

.container

<div class="container has-background-primary">
  <p>Container</p>
</div/>

Container

.is-fluid

<div class="container is-fluid has-background-primary">
  <p>Fluid container</p>
</div/>

Fluid container

.is-widescreen

<div class="container is-widescreen has-background-primary">
  <p>Widescreen container</p>
</div/>

Widescreen container

.is-fullhd

<div class="container is-fullhd has-background-primary">
  <p>Full HD container</p>
</div/>

Full HD Container

.has-text-weight-light

<p class="has-text-weight-light">Light</p>

Light

.has-text-weight-normal

<p class="has-text-weight-normal">Normal</p>

Normal

.has-text-weight-medium

<p class="has-text-weight-medium">Medium</p>

Medium

.has-text-weight-semibold

<p class="has-text-weight-semibold">Semibold</p>

Semibold

.has-text-weight-bold

<p class="has-text-weight-bold">Bold</p>

Bold

<footer class="footer">
  <div class="content has-text-centered">
    <p>SE学院</p>
  </div>
</footer>

.input

<form action="#">
  <div class="field">
    <label class="label">First name</label>
    <div class="control">
      <input class="input" type="text" placeholder="First name">
    </div>
  </div>
</form>
<a onclick="openModal('modal')" class="button is-primary">開く</a>

<div class="modal">
  <div class="modal-background"></div>
    <div class="modal-content">
      <!-- contnt -->
    </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

<script>
  function openModal(id) {
    document.getElementById(id).classList.add("is-active")
  }
  function closeModal(id) {
    document.getElementById(id).classList.remove("is-active")
  }
<script>
開く .modal-card
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div id="example" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="/css/bootstrap/">Bootstrap</a>
      <a class="navbar-item" href="/css/materialize/">Materialize</a>
      <a class="navbar-item" href="/css/milligram/">Milligram</a>
    </div>
  </div>
</nav>
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div id="example" class="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item" href="/css/primer/">Primer CSS</a>
      <a class="navbar-item" href="/css/pure/">Pure.css</a>
      <a class="navbar-item" href="/css/semantic/">Semantic UI</a>
    </div>
  </div>
</nav>
<nav class="navbar is-primary">
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="/css/skeleton/">Skeleton</a>
      <a class="navbar-item" href="/css/spectre/">Spectre.css</a>
      <a class="navbar-item" href="/css/tachyons/">Tachyons</a>
    </div>
  </div>
</nav>

.has-dropdown

<nav class="navbar">
  <div class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">Framework</a>
        <div class="navbar-dropdown">
          <a class="navbar-item" href="/css/tailwind/">Tailwind CSS</a>
          <a class="navbar-item" href="/css/uikit/">UIkit</a>
          <a class="navbar-item" href="/css/foundation/">Zurb Foundation</a>
        </div>
      </div>
    </div>
  </div>
</nav>

.has-text-centered

<p class="has-text-centered">中央寄せ</p>

中央寄せ

.has-text-justified

<p class="has-text-justified">両幅寄せ</p>

両幅寄せ

.has-text-left

<p class="has-text-left">左寄せ</p>

左寄せ

.has-text-right

<p class="has-text-right">右寄せ</p>

右寄せ

.has-text-primary

<p class="has-text-primary">Primary</p>

Primary

.has-text-info

<p class="has-text-info">Info</p>

Info

<p class="has-text-link">Link</p>

.has-text-success

<p class="has-text-success">Success</p>

Success

.has-text-warning

<p class="has-text-warning">Warning</p>

Warning

.has-text-danger

<p class="has-text-danger">Danger</p>

Danger

.has-text-black

<p class="has-text-black">Black</p>

Black

.has-text-dark

<p class="has-text-dark">Dark</p>

Dark

.has-text-grey-darker

<p class="has-text-grey-darker">Grey-darker</p>

Grey-darker

.has-text-grey-dark

<p class="has-text-grey-dark">Grey-dark</p>

Grey-dark

.has-text-grey

<p class="has-text-grey">Grey</p>

Grey

.has-text-grey-light

<p class="has-text-grey-light has-background-black">Grey-light</p>

Grey-light

.has-text-grey-lighter

<p class="has-text-grey-lighter has-background-black">Grey-lighter</p>

Grey-lighter

.has-text-light

<p class="has-text-light has-background-black">Light</p>

Light

.has-text-white

<p class="has-text-white has-background-black">White</p>

White

.section

<section class="section has-background-primary">
  <p>Section</p>
</section>

Section