基本要素

Basic Elements

Typography

タイポグラフィ

見出し、文字サイズ、太さ、配置など文字に関するユーティリティです。

見出しクラス

見出し1クラス (.h1)

.h1

見出し2クラス (.h2)

.h2

見出し3クラス (.h3)

.h3

見出し4クラス (.h4)

.h4

見出し5クラス (.h5)

.h5

見出し6クラス (.h6)

.h6

テキストサイズ

小さいテキスト (.text-xs)

.text-xs

やや小さいテキスト (.text-sm)

.text-sm

標準テキスト (.text-base)

.text-base

やや大きいテキスト (.text-lg)

.text-lg

大きいテキスト (.text-xl)

.text-xl

より大きいテキスト (.text-2xl)

.text-2xl

さらに大きいテキスト (.text-3xl)

.text-3xl

最も大きいテキスト (.text-4xl)

.text-4xl

フォントウェイト

軽いフォントウェイト (.font-light)

.font-light

標準フォントウェイト (.font-normal)

.font-normal

中間フォントウェイト (.font-medium)

.font-medium

やや太いフォントウェイト (.font-semibold)

.font-semibold

太いフォントウェイト (.font-bold)

.font-bold

より太いフォントウェイト (.font-extrabold)

.font-extrabold

テキスト配置

左揃えテキスト (.text-left)

.text-left

中央揃えテキスト (.text-center)

.text-center

右揃えテキスト (.text-right)

.text-right

両端揃えテキスト (.text-justify)

.text-justify

テキスト変換

大文字テキスト (.uppercase)

.uppercase

小文字テキスト (.lowercase)

.lowercase

先頭大文字テキスト (.capitalize)

.capitalize

ユーティリティクラスの使い方

								
<!-- タイポグラフィユーティリティの例 -->
<div class="h2 text-primary mb-4">プライマリ色の見出し</div>
<p class="text-lg mb-2">大きめのテキストパラグラフ</p>
<p class="text-gray">グレーのテキスト</p>

ユーティリティクラスを使用すると、HTMLマークアップ内で直接スタイルを適用できるため、CSSの記述量を減らし、迅速に開発できます。複数のクラスを組み合わせることで、柔軟なレイアウトやスタイリングが可能になります。

Colors

カラー

背景色、文字色、不透明度を指定できます。

背景色

.bg-primary

.bg-secondary

.bg-tertiary

.bg-quaternary

.bg-quinary

.bg-white

.bg-light-gray

.bg-dark-gray

.bg-gray

.bg-dark

.bg-black

文字色

プライマリテキスト色 (.text-primary)

.text-primary

セカンダリテキスト色 (.text-secondary)

.text-secondary

ターシャリテキスト色 (.text-tertiary)

.text-tertiary

ホワイトテキスト色 (.text-white)

.text-white

ライトグレーテキスト色 (.text-light-gray)

.text-light-gray

ダークグレーテキスト色 (.text-dark-gray)

.text-dark-gray

グレーテキスト色 (.text-gray)

.text-gray

ダークテキスト色 (.text-dark)

.text-dark

ブラックテキスト色 (.text-black)

.text-black

不透明度

不透明度 10% (.opacity-10)

.opacity-10

不透明度 25% (.opacity-25)

.opacity-25

不透明度 50% (.opacity-50)

.opacity-50

不透明度 75% (.opacity-75)

.opacity-75

不透明度 90% (.opacity-90)

.opacity-90

ユーティリティクラスの使い方

								
<!-- 色のユーティリティの例 -->
<div class="bg-primary text-white p-4">
  プライマリ背景に白いテキスト
</div>

Spacing Utilities

スペーシング

マージン・パディングを指定できます。

マージン

マージン 2 (.m-2)

.m-2

上マージン 4 (.mt-4)

.mt-4

下マージン 3 (.mb-3)

.mb-3

水平中央 (.mx-auto)

.mx-auto

パディング

パディング 2 (.p-2)

.p-2

上パディング 4 (.pt-4)

.pt-4

下パディング 3 (.pb-3)

.pb-3

水平パディング 4 (.px-4)

.px-4

ユーティリティクラスの使い方

								
<!-- スペーシングユーティリティの例 -->
<div class="m-3 p-4">
  <div class="mx-3 my-1 px-4 py-2">上下はx、左右はy</div>
  <div class="m-3 p-4">上下左右どちらも</div>
</div>

Display & Layout Utilities

表示・レイアウト

block / inline-block / flexboxなど基本的なdisplayプロパティを指定できます。

ディスプレイ

ブロック表示 (.d-block)

.d-block

インラインブロック1 (.d-inline-block) インラインブロック2 (.d-inline-block)

.d-inline-block

フレックスアイテム1 (.d-flex)

フレックスアイテム2

.d-flex

フレックスユーティリティ

中央揃え (.justify-center)

.justify-center

両端揃え1

両端揃え2 (.justify-between)

.justify-between

垂直中央揃え (.items-center)

.items-center

ユーティリティクラスの使い方

								
<!-- レイアウトユーティリティの例 -->
<div class="d-flex justify-between items-center bg-light-gray p-3 mb-4">
  <div>左側のコンテンツ</div>
  <div>右側のコンテンツ</div>
</div>