Zenn
🎨

最近気になっているCSSフレームワークは、BulmaとTailWind CSS

2021/03/01に公開
JavaScript
Scss
Tailwind CSS
bulma
tech

はじめに

最近小耳に挟むなりして気になっているCSSフレームワークが2つあります。
今回は、その2つ(Bulma, TailWind CSS)について、まとめてみようかと思います。

Bulma

特徴としては以下です。

  • CSSのみでのフレキシブルデザインに対応している。
  • JavaScript無しで使える。
  • ドキュメントが読みやすく、クラス名の付与後の結果も分かりやすい。

ただ、気になるのはサイズですかね。
bootstrap.min.cssが150KBくらいに対して、bulma.min.cssは180KBくらいで軽量とは言えないところですかね。

試してみる

修飾子

  • ほとんどのBulma要素に、様々なスタイルがあり、適用するには、修飾子クラスの1つを追加するだけ。
  • それらはすべてis- または has- で始まる。
<!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://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
  </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>
      <a class="button">
        修飾子無し
      </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>
    </div>
  </section>
  </body>
</html>

画面
スクリーンショット 2021-02-11 22.54.53.png

モジュール性

Bulmaは、個別にインポートできる39個の.sassファイルで構成されている。

たとえば、Bulmaのcolumnの列のみが必要だとする。
それは、bulma/sass/gridフォルダにあるので、
直接必要なファイルを単純にインポートし、その後のユーティリティの依存関係を解決することで使用できます。

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/grid/columns.sass"

ちなみにcolumnの列を利用すると以下の感じになる。
スクリーンショット 2021-02-11 22.59.49.png

TailWind CSS

特徴としては以下です。

  • あらかじめ用意されているコンポーネントを利用するのではなく、ユーティリティクラスを使い回すことでデザインを作っていく。
  • Utility-Firstを掲げたCSSフレームワークです。

Utility-Firstとは？

  • 複雑なコンポーネントをつくるために単純で扱いやすい機能を集めたものだと言えそうです。

  • 感覚的には、全体的な余白や幅を設定し、背景色を設定し、ロゴ画像のサイズを設定するための幅と高さを設定するといった複数の設定を積み重ねてレイアウトを作り上げていく感じです。

  • これのいいところは、例えば他のCSSフレームワークであるBootstrapなどを使用すると、機能が揃いすぎている為、レイアウトが他のサイトと一緒になってしまうといったときに、TailWindは細かい設定をすることができるので、いいねといったところです。

  • さらに、0ベースでCSSを書くわけでもないので、より楽にデザインを作っていけるということになります。

試してみる

TailWind CSSの公式ページにいくと、ブラウザで手軽に体験ができるページがあるので、今回はそちらを使ってみます。(https://play.tailwindcss.com/)

下記のように、パディングを示すユーティリティ(py-8)などを組み合わせデザインを設定しているのが分かると思います。

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">
        Erin Lindford
      </p>
      <p class="text-gray-500 font-medium">
        Product Engineer
      </p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>

スクリーンショット 2021-02-11 23.22.15.png

まとめ

今回は、最近気になっているCSSフレームワークBulmaとTailWind CSSについて実際に触りながら、学んでいきました。

Discussion