Bootstrap 5 実用ツール

ユーティリティ / ヘルパークラス

Bootstrap 5には、CSSコードを使用せずに要素のスタイルを素早く設定できるユーティリティ/ヘルパークラスがたくさんあります。

ボーダー

边框クラスを使用して要素にボーダーを追加または削除：

例

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

自分で試してみる

枠線の幅

使用 .border-1 まで .border-5 枠線の幅を変更するために：

例

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

自分で試してみる

枠線の色

任意の上下文枠線色クラスを使用して枠線に色を追加：

例

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

自分で試してみる

枠線の丸み

使用 rounded 要素に丸みを加えるためのクラス：

例

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

自分で試してみる

浮動とクリアフロート

使用 .float-end クラスで右に浮動させる要素、または .float-start 左に浮動し、 .clearfix クリアフロートクラス：

例

<div class="clearfix">
  <span class="float-start">左に浮動</span>
  <span class="float-end">右に浮動</span>
</div>

自分で試してみる

レスポンシブ浮動

スクリーンの幅に応じて左または右に浮動させる要素を、レスポンシブな浮動クラス（.float-*-left|right），そのうちの * は：

  • sm (576px以上)
  • md (768px以上)
  • lg (992px以上)
  • xl (1200px以上)
  • xxl (1400px以上)

例

<div class="float-sm-end">小さいスクリーンやより広いスクリーン上に右に浮動</div><br>
<div class="float-md-end">中程度のスクリーンやより広いスクリーン上に右に浮動</div><br>
<div class="float-lg-end">大きなスクリーンやより広いスクリーン上に右に浮動</div><br>
<div class="float-xl-end">非常に大きなスクリーンやより広いスクリーン上に右に浮動</div><br>
<div class="float-xxl-end">特別大きなスクリーンやより広いスクリーン上に右に浮動</div><br>
<div class="float-none">浮動しない</div>

自分で試してみる

中央に配置

使用 .mx-auto 中央に配置される要素（margin-left と margin-right: auto を追加）：

例

<div class="mx-auto bg-warning" style="width:150px">中央に配置</div>

自分で試してみる

幅

w-*クラスを使用して（.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）要素の幅を設定：

例

<div class="w-25 bg-warning">幅25%</div>
<div class="w-50 bg-warning">幅50%</div>
<div class="w-75 bg-warning">幅75%</div>
<div class="w-100 bg-warning">幅100%</div>
<div class="w-auto bg-warning">自動幅</div>
<div class="mw-100 bg-warning">最大幅100%</div>

自分で試してみる

高さ

h-*クラスを使用して（.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）要素の高さを設定：

例

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">高さ25%</div>
  <div class="h-50 bg-warning">高さ50%</div>
  <div class="h-75 bg-warning">高さ75%</div>
  <div class="h-100 bg-warning">高さ100%</div>
  <div class="h-auto bg-warning">自動高さ</div>
  <div class="mh-100 bg-warning" style="height:500px">最大高さ100%</div>
</div>

自分で試してみる

スペーサー

Bootstrap 5には幅広いレスポンシブなマージンとパディングのユーティリティクラスがあります。これらはすべての断点に適用できます：

  • xs (576px以下)
  • sm (576px以上)
  • md (768px以上)
  • lg (992px以上)
  • xl (1200px以上)
  • xxl (1400px以上)

これらのクラスの使用形式は以下の通りです：{property}{sides}-{サイズ} 用 xs、および {property}{sides}-{breakpoint}-{サイズ} 用 sm、md、lg、xl および xxl。

property 以下のいずれかです：

  • m - 設定 マージン
  • p - 設定 パディング

sides 以下のいずれかです：

  • t - 設定 margin-top または padding-top
  • b - 設定 margin-bottom または padding-bottom
  • s - 設定 margin-left または padding-left
  • e - 設定 margin-right または padding-right
  • x - 同時に設定 padding-left および padding-right または margin-left および margin-right
  • y - 同時に設定 padding-top および padding-bottom または margin-top および margin-bottom
  • blank - 要素のすべての4辺に設定 マージン または パディング

サイズ 以下のいずれかです：

  • 0 - 設定する マージン または パディング 設定する 0
  • 1 - 設定する マージン または パディング 設定する .25rem
  • 2 - 設定する マージン または パディング 設定する .5rem
  • 3 - 設定する マージン または パディング 設定する 1rem
  • 4 - 設定する マージン または パディング 設定する 1.5rem
  • 5 - 設定する マージン または パディング 設定する 3rem
  • auto - 設定する マージン autoに設定

例

<div class="pt-4 bg-warning">上インセット（1.5rem）のみがあります。</div>
<div class="p-5 bg-success">すべての辺に内側インセット（3rem）があります。</div>
<div class="m-5 pb-5 bg-info">すべての辺に外側インセット（3rem）および下インセット（3rem）があります。</div>

自分で試してみる

更多間隔示例

.m-# / m-*-# すべての辺のアウトセット 試してみる
.mt-# / mt-*-# 上アウトセット 試してみる
.mb-# / mb-*-# 下アウトセット 試してみる
.ms-# / ms-*-# 左アウトセット 試してみる
.me-# / me-*-# 右アウトセット 試してみる
.mx-# / mx-*-# 左および右インセット 試してみる
.my-# / my-*-# 上および下アウトセット 試してみる
.p-# / p-*-# すべての辺のインセット（フィルリング） 試してみる
.pt-# / pt-*-# 上インセット 試してみる
.pb-# / pb-*-# 下インセット 試してみる
.ps-# / ps-*-# 左インセット 試してみる
.pe-# / pe-*-# 右インセット 試してみる
.py-# / py-*-# 上および下インセット 試してみる
.px-# / px-*-# 左および右インセット 試してみる

私たちの CSS 単位リファレンスマニュアル remおよび異なるサイズ単位に関する詳細はこちらで読むことができます。

影

を使用してください。 shadow- 要素に影を追加するクラス：

例

<div class="shadow-none p-4 mb-4 bg-light">影がない</div>
<div class="shadow-sm p-4 mb-4 bg-white">小さな影</div>
<div class="shadow p-4 mb-4 bg-white">デフォルトの影</div>
<div class="shadow-lg p-4 mb-4 bg-white">大きな影</div>

自分で試してみる

垂直アライメント

を使用してください。 align- クラスは要素のアライメントを変更します（inline、inline-block、inline-table、テーブルセル要素のみ）：

例

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

自分で試してみる

アスペクト比

親の幅に応じてリスポンシブなビデオやスライドショーを作成します。

を追加します。 .ratio クラスは選択したアスペクト比と .aspect-ratio-* 親要素に追加し、その中に埋め込み（ビデオまたは iframe）を追加します：

例

<!-- アスペクト比 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- アスペクト比 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- アスペクト比 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- アスペクト比 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

自分で試してみる

可視性

使用 .visible または .invisible クラスは要素の可視性を制御できます：

注釈：これらのクラスは CSS display 値を変更しません。ただ追加 visibility:visible または visibility:hidden。

例

<div class="visible">私は表示されています。</div>
<div class="invisible">私は非表示です。</div>

自分で試してみる

閉じるアイコン

使用 .btn-close クラスは閉じるアイコンのスタイルを設定できます。通常、警告ボックスやモーダルで使用されます。

例

<button type="button" class="btn-close"></button>

自分で試してみる

スクリーンリーダー

使用 .visually-hidden クラスはすべてのデバイスで要素を非表示にし、スクリーンリーダーを除きます：

例

<span class="visually-hidden">スクリーンリーダー以外のすべてのスクリーンで非表示になります。</span>

自分で試してみる

色

「色」の章に記載されているように、以下にすべてのテキストおよび背景色クラスの一覧を示します：

テキストの色に対するクラスは：

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（デフォルトの body 項目の色/通常はブラック）
  • .text-light

例

自分で試してみる

上下文テキストクラスはリンクにも使用できます：

例

自分で試してみる

また、.text-black-50 または .text-white-50 クラスを使用して、ブラックまたはホワイトテキストに50%の不透明度を追加することもできます：

例

自分で試してみる

背景色

背景色に対するクラスは：

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

背景色はテキストの色を設定しませんので、特定の情况下、それらを一緒に使用する必要がある場合があります。 .text-* クラスを一緒に使用します。

例

自分で試してみる