こんな人におすすめ

CSS嫌いな人挙手してな

CSSというと蕁麻疹が出る方は結構いるのではないでしょうか？僕もその一人です。思ったような見た目にならなかったり、ちゃんと書いてるはずなのに表示が変になったり。思い通りにならないってところがCSSの難しいところですよね。「書いたのに反映されないじゃん」「何でお前もうごくねん！」「なんか3px分ずれた。。」ってのは日常茶飯事なはず。。。

そんなあなたに、CSSフレームワーク【Bulma】がおすすめ！もちろん、このブログもほぼBulmaでできています。(Bulmaさん、ありがとう！) これ使うと "CSSストレスほぼ0"で開発できます！

さっそくBulmaを使ってみよう！

そもそもBulmaとは？

Bulmaとは、Webサイトを作成するためのモバイルファーストなCSSフレームワークです。すぐに使用できる無料のオープンソースフレームワークで、応答性の高いWebインターフェイスを簡単に組み合わせて構築することができます。もっと簡単に言うと、ボタンやドロップダウン、テキストなどのさまざまなパーツがあらかじめデザインとコーディングされているので、ちょいと指定するだけでデザイナーが作ったみたいな整ったUIにすることができます。他にも同じCSSフレームワークでいうと「Bootstrap」もあります。ですがBulmaの方がシンプルでかつ軽量で速いので今回はBulmaを紹介します。モダンなデザインも豊富なことからカスタマイズ無しでもデザイン性の高いWebサイトが作れます！

まずは準備。

早速Bulmaを使ってみましょう！使うにしてもまずはbulmaをインストールしてください。 ※今回はnpmを使用しています。　他にもHtmlのheadに以下を追加してもOKです。

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma-rtl.min.css">

 npm install bulma

実践してみよう！

インストールが終わったので、実際に使ってみましょう！使い方は簡単で、"classに指定するだけ"です。え、そんだけ？そんなんでいいの？と思うかも知れませんが、はい。これだけなんです！それでは、実例を見ていきましょう！

 <!-- ボタン -->
<button class="button">Button</button>

<!-- 入力フォーム -->
<input class="input" type="text" placeholder="Text input" />

<!-- カラム -->
<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

<!-- 通知で出すやつ -->
<div class="notification is-warning">
  <button class="delete"></button>
  ここに通知で出す文章を書いておきましょう。こういうポップアップって
  <strong>なんかこわいよねｗ</strong
  >なんか急に出てくるとほんとびっくりする。 例えば、<br />
  あなたのPCはウイルスに汚染されました。今すぐに<a
    >ウイルス対策ソフトウェア</a
  >
  をダウンロードして実行してください。みたいな。
</div>

どうでしょうか？多分単体だとあまり良さが実感できないと思います。。。「なんか、ちょっと綺麗なinputやbuttonになっただけじゃん」「レイアウトうんぬんはどうもなってないじゃん」と思った方も多いはず。なので次は、実際のレイアウトを意識したものを紹介します！CSSなしでこれ作れるのは感動ものだと思うのでぜひ試してみてください！

 <div class="container">
  <div class="tile is-ancestor">
    <div class="tile is-vertical is-8">
      <div class="tile">
        <div class="tile is-parent is-vertical">
          <article class="tile is-child message">
            <div class="message-header">
              <p>僕はCSSが嫌いです。</p>
              <button class="delete" aria-label="delete"></button>
            </div>
            <div class="message-body">
              わぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁ
              <strong>もぉぉぉぉぉぉぉｘ</strong>, うがぁぁぁぁぁぁぁ
              CSSだるいCSSだるいCSSだるいCSSだるいCSSだるいCSSだるいCSSだるいCSSだるい
              CSSだるいCSSだるいCSSだるいCSSだるいCSSだるいCSSだるいCSSだるいCSSだるい
              <a>まじでCSS嫌いs</a> んなぁぁぁぁぁぁああ
              <em>やだぁぁぁぁぁ</em>んまぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁ
            </div>
          </article>
        </div>
        <div class="tile is-parent">
          <form class="tile is-child box">
            <div class="field">
              <label class="label">Email</label>
              <div class="control">
                <input
                  class="input"
                  type="email"
                  placeholder="e.g. alex@example.com"
                />
              </div>
            </div>

            <div class="field">
              <label class="label">Password</label>
              <div class="control">
                <input class="input" type="password" placeholder="********" />
              </div>
            </div>

            <button class="button is-primary">Sign in</button>
          </form>
        </div>
      </div>
      <div class="tile is-parent">
        <article class="notification is-danger">
          <p class="title">お知らせ</p>
          <p class="subtitle">
            あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ
            あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ
          </p>
          <div class="content">
            <!-- Content -->
          </div>
        </article>
      </div>
    </div>
    <div class="tile is-parent">
      <!-- ツ●ートみたいなモノ -->
      <div class="box">
        <article class="media">
          <div class="media-left">
            <figure class="image is-64x64">
              <img
                src="https://bulma.io/images/placeholders/128x128.png"
                alt="Image"
              />
            </figure>
          </div>
          <div class="media-content">
            <div class="content">
              <p class="subtitle is-6">
                <strong>お名前</strong> <small>@onamaeee</small>
                <small>28m</small>
                <br />
                ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容
              </p>
            </div>
            <nav class="level is-mobile">
              <div class="level-left">
                <a class="level-item" aria-label="reply">
                  <span class="icon is-small">
                    <i class="fas fa-reply" aria-hidden="true"></i>
                  </span>
                </a>
                <a class="level-item" aria-label="retweet">
                  <span class="icon is-small">
                    <i class="fas fa-retweet" aria-hidden="true"></i>
                  </span>
                </a>
                <a class="level-item" aria-label="like">
                  <span class="icon is-small">
                    <i class="fas fa-heart" aria-hidden="true"></i>
                  </span>
                </a>
              </div>
            </nav>
          </div>
        </article>
        <article class="media">
          <div class="media-left">
            <figure class="image is-64x64">
              <img
                src="https://bulma.io/images/placeholders/128x128.png"
                alt="Image"
              />
            </figure>
          </div>
          <div class="media-content">
            <div class="content">
              <p class="subtitle is-6">
                <strong>お名前</strong> <small>@onamaeee</small>
                <small>28m</small>
                <br />
                ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容
              </p>
            </div>
            <nav class="level is-mobile">
              <div class="level-left">
                <a class="level-item" aria-label="reply">
                  <span class="icon is-small">
                    <i class="fas fa-reply" aria-hidden="true"></i>
                  </span>
                </a>
                <a class="level-item" aria-label="retweet">
                  <span class="icon is-small">
                    <i class="fas fa-retweet" aria-hidden="true"></i>
                  </span>
                </a>
                <a class="level-item" aria-label="like">
                  <span class="icon is-small">
                    <i class="fas fa-heart" aria-hidden="true"></i>
                  </span>
                </a>
              </div>
            </nav>
          </div>
        </article>
        <article class="media">
          <div class="media-left">
            <figure class="image is-64x64">
              <img
                src="https://bulma.io/images/placeholders/128x128.png"
                alt="Image"
              />
            </figure>
          </div>
          <div class="media-content">
            <div class="content">
              <p class="subtitle is-6">
                <strong>お名前</strong> <small>@onamaeee</small>
                <small>28m</small>
                <br />
                ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容
              </p>
            </div>
            <nav class="level is-mobile">
              <div class="level-left">
                <a class="level-item" aria-label="reply">
                  <span class="icon is-small">
                    <i class="fas fa-reply" aria-hidden="true"></i>
                  </span>
                </a>
                <a class="level-item" aria-label="retweet">
                  <span class="icon is-small">
                    <i class="fas fa-retweet" aria-hidden="true"></i>
                  </span>
                </a>
                <a class="level-item" aria-label="like">
                  <span class="icon is-small">
                    <i class="fas fa-heart" aria-hidden="true"></i>
                  </span>
                </a>
              </div>
            </nav>
          </div>
        </article>
        <article class="media">
          <div class="media-left">
            <figure class="image is-64x64">
              <img
                src="https://bulma.io/images/placeholders/128x128.png"
                alt="Image"
              />
            </figure>
          </div>
          <div class="media-content">
            <div class="content">
              <p class="subtitle is-6">
                <strong>お名前</strong> <small>@onamaeee</small>
                <small>28m</small>
                <br />
                ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容ツ●ート内容
              </p>
            </div>
            <nav class="level is-mobile">
              <div class="level-left">
                <a class="level-item" aria-label="reply">
                  <span class="icon is-small">
                    <i class="fas fa-reply" aria-hidden="true"></i>
                  </span>
                </a>
                <a class="level-item" aria-label="retweet">
                  <span class="icon is-small">
                    <i class="fas fa-retweet" aria-hidden="true"></i>
                  </span>
                </a>
                <a class="level-item" aria-label="like">
                  <span class="icon is-small">
                    <i class="fas fa-heart" aria-hidden="true"></i>
                  </span>
                </a>
              </div>
            </nav>
          </div>
        </article>
      </div>
    </div>
  </div>
</div>

どうですか？こんなふうにcssをいじることなくいい感じなデザインに仕上げることができます！ぜひぜひ皆さんもBulmaでCSSのない開発、しちゃってください！