ダウンロード

ここから始める

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

カラムサイズ

各カラムのサイズを個別に定義する

単一カラムのサイズを変更する場合は、次のクラスのいずれかを使用できます

  • is-three-quarters（4分の3）
  • is-two-thirds（3分の2）
  • is-half（半分）
  • is-one-third（3分の1）
  • is-one-quarter（4分の1）
  • is-full（全体）

他のカラムは、残りのスペースを自動的に埋めます。

以下の `20%` の倍数も使用できるようになりました

  • is-four-fifths（5分の4）
  • is-three-fifths（5分の3）
  • is-two-fifths（5分の2）
  • is-one-fifth（5分の1）

is-full（全体）

is-four-fifths（5分の4）

自動

自動

is-three-quarters（4分の3）

自動

自動

is-two-thirds（3分の2）

自動

自動

is-three-fifths（5分の3）

自動

自動

is-half（半分）

自動

自動

is-two-fifths（5分の2）

自動

自動

is-one-third（3分の1）

自動

自動

is-one-quarter（4分の1）

自動

自動

is-one-fifth（5分の1）

自動

自動

<div class="columns">
  <div class="column is-four-fifths">is-four-fifths</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-three-quarters">is-three-quarters</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-two-thirds">is-two-thirds</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-three-fifths">is-three-fifths</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-half">is-half</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-two-fifths">is-two-fifths</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-one-third">is-one-third</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-one-fifth">is-one-fifth</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

12カラムシステム #

グリッドは12カラムに分割できるため、各分割に対応するサイズクラスがあります

  • is-1
  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11
  • is-12

命名規則

各修飾子クラスは、12のうちいくつのカラムが必要かに基づいて命名されます. 7つのカラムが必要な場合は、 `is-7` を使用します.

is-1

1

1

1

1

1

1

1

1

1

1

1

is-2

1

1

1

1

1

1

1

1

1

1

is-3

1

1

1

1

1

1

1

1

1

is-4

1

1

1

1

1

1

1

1

is-5

1

1

1

1

1

1

1

is-6

1

1

1

1

1

1

is-7

1

1

1

1

1

is-8

1

1

1

1

is-9

1

1

1

is-10

1

1

is-11

1

is-12

オフセット #

.column 要素の周囲に水平方向のスペースを作成するために *空のカラム* (例: `<div class="column"></div>`) を使用できますが、 `is-offset-x` のような **オフセット** 修飾子も使用できます

is-half（半分）
is-offset-one-quarter（4分の1オフセット）

is-three-fifths（5分の3）
is-offset-one-fifth（5分の1オフセット）

is-4
is-offset-8（8オフセット）

is-11
is-offset-1（1オフセット） 

<div class="columns is-mobile">
  <div class="column is-half is-offset-one-quarter"></div>
</div>

<div class="columns is-mobile">
  <div class="column is-three-fifths is-offset-one-fifth"></div>
</div>

<div class="columns is-mobile">
  <div class="column is-4 is-offset-8"></div>
</div>

<div class="columns is-mobile">
  <div class="column is-11 is-offset-1"></div>
</div>

狭いカラム #

カラムが**必要なスペースだけ**を占めるようにするには、 `is-narrow` 修飾子を使用します. 他のカラムは残りのスペースを埋めます.

狭いカラム

このカラムの幅は200pxのみです。

フレキシブルカラム

このカラムは、利用可能な残りのスペースを占めます。

<div class="columns">
  <div class="column is-narrow">
    <div class="box" style="width: 200px">
      <p class="title is-5">Narrow column</p>
      <p class="subtitle">This column is only 200px wide.</p>
    </div>
  </div>
  <div class="column">
    <div class="box">
      <p class="title is-5">Flexible column</p>
      <p class="subtitle">
        This column will take up the remaining space available.
      </p>
    </div>
  </div>
</div>

サイズ修飾子と同様に、異なる**ブレークポイント**に対して狭いカラムを設定できます

  • .is-narrow-mobile
  • .is-narrow-tablet
  • .is-narrow-touch
  • .is-narrow-desktop
  • .is-narrow-widescreen
  • .is-narrow-fullhd

Bulmaの支援方法

一回限りの寄付

スポンサーをご覧ください

月額寄付

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