ダウンロード

ここから始める

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

カラーパレットヘルパー

テキストの色や背景として、色のパレットを使用します

Bulmaには7つの基本色があります

text
link
primary
info
success
warning
danger

Bulmaは、これらの各色に対して、自動的に濃淡のコレクションを生成します。これらは、同じ色の異なるバリエーションを試すことができるカラーパレットとして機能します。

テキストの色 #

Bulmaには、各色の27種類の濃淡に対応するCSSクラスが用意されています。各濃淡には、フォアグラウンド/バックグラウンドの組み合わせで役立つ反転の同等物も付属しています。
クラス コード 例 色見本 反転 色見本
has-text-primary 
<p class="has-text-primary">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-00 
<p class="has-text-primary-00">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-05 
<p class="has-text-primary-05">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-10 
<p class="has-text-primary-10">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-15 
<p class="has-text-primary-15">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-20 
<p class="has-text-primary-20">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-25 
<p class="has-text-primary-25">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-30 
<p class="has-text-primary-30">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-35 
<p class="has-text-primary-35">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-40 
<p class="has-text-primary-40">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-45 
<p class="has-text-primary-45">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-50 
<p class="has-text-primary-50">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-55 
<p class="has-text-primary-55">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-60 
<p class="has-text-primary-60">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-65 
<p class="has-text-primary-65">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-70 
<p class="has-text-primary-70">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-75 
<p class="has-text-primary-75">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-80 
<p class="has-text-primary-80">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-85 
<p class="has-text-primary-85">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-90 
<p class="has-text-primary-90">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-95 
<p class="has-text-primary-95">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-100 
<p class="has-text-primary-100">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-light 
<p class="has-text-primary-light">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-dark 
<p class="has-text-primary-dark">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-soft 
<p class="has-text-primary-soft">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-bold 
<p class="has-text-primary-bold">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma
has-text-primary-on-scheme 
<p class="has-text-primary-on-scheme">Hello Bulma</p>
 こんにちは Bulma こんにちは Bulma

背景色 #

27種類の濃淡はすべて、背景ヘルパーとしても利用できます。フォアグラウンドとして反転色と組み合わせることで、わずか2つのクラスで読みやすい要素を簡単に作成できます。
クラス コード 例 色見本
has-background-primary 
<p class="has-background-primary has-text-primary-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-00 
<p class="has-background-primary-00 has-text-primary-00-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-05 
<p class="has-background-primary-05 has-text-primary-05-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-10 
<p class="has-background-primary-10 has-text-primary-10-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-15 
<p class="has-background-primary-15 has-text-primary-15-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-20 
<p class="has-background-primary-20 has-text-primary-20-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-25 
<p class="has-background-primary-25 has-text-primary-25-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-30 
<p class="has-background-primary-30 has-text-primary-30-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-35 
<p class="has-background-primary-35 has-text-primary-35-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-40 
<p class="has-background-primary-40 has-text-primary-40-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-45 
<p class="has-background-primary-45 has-text-primary-45-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-50 
<p class="has-background-primary-50 has-text-primary-50-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-55 
<p class="has-background-primary-55 has-text-primary-55-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-60 
<p class="has-background-primary-60 has-text-primary-60-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-65 
<p class="has-background-primary-65 has-text-primary-65-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-70 
<p class="has-background-primary-70 has-text-primary-70-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-75 
<p class="has-background-primary-75 has-text-primary-75-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-80 
<p class="has-background-primary-80 has-text-primary-80-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-85 
<p class="has-background-primary-85 has-text-primary-85-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-90 
<p class="has-background-primary-90 has-text-primary-90-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-95 
<p class="has-background-primary-95 has-text-primary-95-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-100 
<p class="has-background-primary-100 has-text-primary-100-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-light 
<p class="has-background-primary-light has-text-primary-light-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-dark 
<p class="has-background-primary-dark has-text-primary-dark-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-soft 
<p class="has-background-primary-soft has-text-primary-soft-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-bold 
<p class="has-background-primary-bold has-text-primary-bold-invert">
Hello Bulma
</p>
 こんにちは Bulma
has-background-primary-on-scheme 
<p class="has-background-primary-on-scheme has-text-primary-on-scheme-invert">
Hello Bulma
</p>
 こんにちは Bulma

Bulmaを支援する方法

一度限りの寄付

スポンサーを見る

月ごとの寄付

スポンサーになる
#native_company# #native_desc#
#native_cta#