Help us understand the problem. What is going on with this article?

CSSフレームワーク「Bulma」の Tips集

More than 1 year has passed since last update.

はじめに

業務でBulmaを一通り使ってみて、Tipsが溜まってきたので吐き出しておきます。
今後、何かあれば随時更新したいと思っています。

レスポンシブ無効にしてwidthを固定化したい

PCオンリーのサイト作成にBulmaを使っていてwidthを固定したい時があったので紹介します。
Nuxt.js+Bulmaなのでapp.scssでBulmaの変数を以下のように変更しています。

assets/css/app.scss
$navbar-breakpoint: 0px;
$tablet: 0px;
$desktop: 1024px;
$widescreen-enabled: false;
$fullhd-enabled: false;

#main {
    width: $desktop;
    margin: 0 auto;
}

簡単に説明すると各種breakpointを0pxに設定して無効化。
desktopを起点にするのでお好みのwidthを設定。
widescreenとfullhdはenabledで無効化できるのでfalseを指定。
あとはcssでwidth固定してセンタリングすることで対応しました。

formのplaceholderの色を変更したい

Bulmaのドキュメントになかったので掲載しておきます。

assets/css/app.scss
$input-placeholder-color: #お好みの色

Columsのマージンを無くしたい

columsはマージンがdefaultでついており、
マージンを消したいシーンがよくあるのでメモ。
is-marginlessをcolumsと一緒に付けるだけ。

<footer class="footer columns is-marginless">
.
</footer>

Columsの間隔(gap)を変更したい

is-variableをつけてis-(n)でgapを変更することが出来る。

<div class="columns is-variable is-3">
.
</div>

横方向(水平方向)centerにしたい

<div class="has-text-centered">
縦方向センター
</div>

縦方向(垂直方向)centerにしたい

columnsにはis-vcenteredが使える。

<div class="columns is-vcentered">
縦方向センター
</div>

それ以外の要素で縦方向centerを使いたい時には普通にclassを定義。

.is-vertical-center {
  display: flex;
  align-items: center;
}

動的に要素が変更されるdropdown-menuでwidthを自動調節したい

検索の候補などをdropdown-menuで表現したい時に、普通にdropdown-menuを使うとwidthが表示内容に関わらず$dropdown-menu-min-width(12rem)が適応されてしまう。
これを解消するために以下のようにclassを定義することで解消。

.dropdown-menu {
  white-space: nowrap;
}

ulのデザインが反映されない

普通にulタグで組むとリストマーカーもインデントも反映されません。
以下のようにcontentクラスで

    ブロックを囲ってやるとデザインが反映されます。
<div class="content">
  <ul>
    <li>いぬ</li>
    <li>ねこ</li>
  </ul>
</div>

まとめ

Bulmaはドキュメントも充実しているので、自分書くCSSの量を大幅に抑えて(ほぼ書かなくていいと言ってもいいくらい)ページコーディングが出来るのでとても便利です。

たまにこれどうすんの?って疑問に思うこともありますが、Bulmaのコードを読めばよしなにカスタマイズも可能です。

今後Bulmaを使って詰まったことなどあれば随時、追記していこうと思います。

yoshinbo
サービスエンジニアです。新規事業をよく担当します。
skill
株式会社SKILLはブロックチェーン関連サービス開発会社です。ブロックチェーン技術の社会実装を目指し、プロダクト開発および実証実験を行っています。
https://skill.luxe/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away