メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

縦仕切り線（Vertical rule） v5.1.0新設

カスタム縦仕切り線ヘルパーを使用して、<hr> 要素のような垂直仕切りを作成。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.1.0新設

使い方（how it works）

縦仕切り線は <hr> 要素に着想を得ており、一般的なレイアウトで垂直方向の仕切りが作成できる。<hr> 要素と同じようなスタイルが設定されている。

  • 線の幅は 1px
  • min-height は 1em
  • 色は currentcolor と opacity を経由して設定される

必要に応じて、スタイルを追加してカスタマイズする。

実例（Example）

1.基本の設定

見本
設定例
<div class="vr"></div>

2.高さの調整

縦仕切り線の高さは、flexレイアウトで調整（.vr のデフォルトは display: inline-block）。

見本
設定例
<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>

3.太さの調整

px-*ユーティリティクラスを使用すれば、より太めの仕切り線も作成できる。

見本

.vr.px-1（左右のpadding0.25remずつ）

.vr.px-2（左右のpadding0.5remずつ）

.vr.px-3（左右のpadding1remずつ）

.vr.px-4（左右のpadding1.5remずつ）

.vr.px-5（左右のpadding3remずつ）

width を設定（5pxの場合）

デフォルト（参考）

設定例
.px-*を使用<div class="vr px-1"></div>
widthを設定<div class="vr" style="width: 5px;"></div>
【設定】
  • 仕切りを入れたい部分に div.vr を入れる
  • 高さを調整したい場合は、height を設定（場合によっては .d-flex で囲む）
  • 太さを調整したい場合は、.vr に .px-{size} を追加するか、width を設定（デフォルトは 1px）
  • 横仕切り線については、Rebootの横仕切り線に記載

積み重ねヘルパーで使用（With stacks）

積み重ねヘルパーの使用でもできる。

見本 見やすいよう色と枠を付けています
1番目のアイテム
2番目のアイテム
3番目のアイテム
設定例
<div class="hstack gap-3">
  <div class="p-2">1番目のアイテム</div>
  <div class="p-2 ms-auto">2番目のアイテム</div>
  <div class="vr"></div>
  <div class="p-2">3番目のアイテム</div>
</div>

CSS v5.2.0Sassから名称変更

Sass変数（Sass variables） v5.3.1変数変更

縦仕切り線の幅を変更するためにSass変数をカスタマイズ。

デフォルトの設定
scss/_variables.scss 内 vr-variables の設定$vr-border-width:             var(--#{$prefix}border-width);