メインコンテンツへスキップ

位置ユーティリティ(Position)

要素の位置をすばやく設定するには、これらの短縮形ユーティリティを使用。

※固定位置のクラスはヘルパーに移動

位置の値(Position values)

位置ユーティリティクラスで迅速に設定できるが、レスポンシブには未対応

設定例
指定なし<div class="position-static">...</div>
相対位置<div class="position-relative">...</div>
絶対位置<div class="position-absolute">...</div>
固定位置<div class="position-fixed">...</div>
Sticky位置<div class="position-sticky">...</div>
【設定】
  • 指定なし(デフォルトと同じ)(position: static):.position-static
  • 相対位置(position: relative):.position-relative
  • 絶対位置(position: absolute):.position-absolute
  • 固定位置(position: fixed):.position-fixed
  • Sticky位置(position: sticky):.position-sticky

 

要素の端からの位置(Arrange elements)v5.0.0-alpha2新設、v5.0.0-beta1一部クラス名変更

端からの配置ユーティリティを使用して要素を簡単に配置する。クラスの形式は {property}-{position} となる。

property(プロパティ)は次のいずれか:

  • top - 垂直方向の top(上)の位置
  • start - 水平方向の left(左)の位置(LTR内)
  • bottom - 垂直方向の bottom(下)の位置
  • end - 水平方向の right(右)の位置(LTR内)

position(位置)は次のいずれか:

  • 0 - 端から 0 の位置
  • 50 - 端から 50% の位置
  • 100 - 端から 100% の位置

scss/_variables.scss 内の $position-values Sassマップ変数にエントリーを追加することで、位置の値はさらに追加できる)

定義済クラスの種類
端の場所 上端 行頭端
v5.0.0-beta1クラス名変更
下端 行末端
v5.0.0-beta1クラス名変更
端から 0 の位置 .top-0 .start-0 .bottom-0 .end-0
端から 50% の位置 .top-50 .start-50 .bottom-50 .end-50
端から 100% の位置 .top-100 .start-100 .bottom-100 .end-100
見本 見やすいよう枠と色を付けています
1
2
3
4
5
6
設定例
<div class="position-relative">
  <div class="position-absolute top-0 start-0">1</div>
</div>

定義済クラスの組み合わせ

位置 クラス
行頭上(上記見本の1) .position-absolute.top-0.start-0
行末上(上記見本の2) .position-absolute.top-0.end-0
上下左右中央(上記見本の3) .position-absolute.top-50.start-50
上下左右中央(上記見本の4) .position-absolute.bottom-50.end-50
行頭下(上記見本の5) .position-absolute.bottom-0.start-0
行末下(上記見本の6) .position-absolute.bottom-0.end-0
【設定】
  • div.position-relative > div.position-absolute.{property}-{position}.{property}-{position}は上記「定義済クラスの種類」から選択)
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
      • 行頭端:.left-{position}.start-{position}
      • 行末端:.right-{position}.end-{position}

 

要素を中央に配置(Center elements)v5.0.0-alpha2新設、v5.0.0-beta1クラス追加

さらに、変換ユーティリティクラス .translate-middletransform: translateX(-50%) translateY(-50%))を使用して要素を中央に配置できる。

このクラスは、translateX(-50%)translateY(-50%) を要素に適用。これにより、端からの配置ユーティリティと組み合わせて、要素を絶対的中心に配置できる。

見本 見やすいよう枠と色を付けています
1
2
3
4
5
6
7
8
9
設定例
<div class="position-relative">
  <div class="position-absolute top-0 start-0 translate-middle">1</div>
</div>

定義済クラスの組み合わせ

位置 クラス
行頭上(上記見本の1) .position-absolute.top-0.start-0.translate-middle
中央上(上記見本の2) .position-absolute.top-0.start-50.translate-middle
行末上(上記見本の3) .position-absolute.top-0.start-100.translate-middle
行頭中央(上記見本の4) .position-absolute.top-50.start-0.translate-middle
上下左右中央(上記見本の5) .position-absolute.top-50.start-50.translate-middle
行末中央(上記見本の6) .position-absolute.top-50.start-100.translate-middle
行頭下(上記見本の7) .position-absolute.bottom-0.start-0.translate-middle
中央下(上記見本の8) .position-absolute.bottom-0.start-50.translate-middle
行末下(上記見本の9) .position-absolute.bottom-0.start-100.translate-middle

.translate-middle-xtransform: translateX(-50%))か .translate-middle-ytransform: translateY(-50%))クラスを追加することにより、要素を水平方向または垂直方向にのみ配置できる。

見本 見やすいよう枠と色を付けています
1
2
3
4
5
6
7
8
9
設定例
<div class="position-relative">
  <div class="position-absolute top-0 start-50 translate-middle-x">2</div>
</div>

定義済クラスの組み合わせ

位置 クラス
行頭上(上記見本の1) .position-absolute.top-0.start-0
中央上(上記見本の2) .position-absolute.top-0.start-50.translate-middle-x
行末上(上記見本の3) .position-absolute.top-0.end-0
行頭中央(上記見本の4) .position-absolute.top-50.start-0.translate-middle-y
上下左右中央(上記見本の5) .position-absolute.top-50.start-50.translate-middle
行末中央(上記見本の6) .position-absolute.top-50.end-0.translate-middle-y
行頭下(上記見本の7) .position-absolute.bottom-0.start-0
中央下(上記見本の8) .position-absolute.bottom-0.start-50.translate-middle-x
行末下(上記見本の9) .position-absolute.bottom-0.end-0
【設定】
  • .position-absolute.{property}-{position}.translate-middle, .translate-middle-x, .translate-middle-y(組み合わせは上記「定義済クラスの組み合わせ」を参照)を追加
【変更履歴】
  • 【v5.0.0-beta1】
    • .translate-middle-x, .translate-middle-y が追加

 

実例(Examples)

これらのクラスの実例をいくつか示す:

1.ボタンを装飾

見本
設定例
メール<button type="button" class="btn btn-primary position-relative">
  メール <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">未読メッセージ</span></span>
</button>
マーカー<button type="button" class="btn btn-dark position-relative">
  マーカー <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>
アラート<button type="button" class="btn btn-primary position-relative">
  アラート <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">未読メッセージ</span></span>
</button>

これらのクラスを既存のコンポーネントとともに使用して、新しいコンポーネントが作成できる。$position-values 変数にエントリを追加することで機能拡張できる。

2.プログレスバーの両端と中央に円をつける

見本
設定例
<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>

 

Sass v5.0.0-beta3追加

マップ(Map)

デフォルトの位置ユーティリティ値は Sassマップで宣言され、ユーティリティの生成に使用。

scss/_variables.scss 内 position-map の設定$position-values: (
  0: 0,
  50: 50%,
  100: 100%
);

ユーティリティAPI(Utilities API)

位置ユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらを参照。

デフォルトの設定
scss/_utilities.scss 内 utils-position の設定"position": (
  property: position,
  values: static relative absolute fixed sticky
),
"top": (
  property: top,
  values: $position-values
),
"bottom": (
  property: bottom,
  values: $position-values
),
"start": (
  property: left,
  class: start,
  values: $position-values
),
"end": (
  property: right,
  class: end,
  values: $position-values
),
"translate-middle": (
  property: transform,
  class: translate-middle,
  values: (
    null: translate(-50%, -50%),
    x: translateX(-50%),
    y: translateY(-50%),
  )
),