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

境界ユーティリティ(Borders)

境界ユーティリティを使用して、要素の borderborder-radius を素早くスタイル。画像、ボタン、またはその他の要素に最適。

枠の罫線(Border)v5.0.0-beta1一部クラス名変更

罫線ユーティリティを使用して、要素枠の罫線を追加や削除。すべての罫線から選択するか、一度に1つずつ選択。

罫線を追加(Additive)

罫線の種類

 四面全てに線:.border

●一面に線

 上部に線:.border-top

 行末側に線:.border-end v5.0.0-beta1クラス名変更

 下部に線:.border-bottom

 行頭側に線:.border-start v5.0.0-beta1クラス名変更

●二面に線(複数設定)

 行末と下に線:.border-end.border-bottom

 行頭と下に線:.border-start.border-bottom

 行末と上に線:.border-end.border-top

 行頭と上に線:.border-start.border-top

 左右に線:.border-start.border-end

 上下に線:.border-top.border-bottom

設定例
<span class="border-top">...</span>
【設定】
  • 罫線を入れたい部分がある場合は、その要素に .border(-{side}) を入れる(.border(-{side}) は上記「罫線の種類」から選択)
【注意】
  • .border, .border-{side} には、あらかじめ罫線の太さ(1px)、種類(solid)、色($gray-300)の設定が組み込まれている
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
      • 行頭側に線:.border-left.border-start
      • 行末側に線:.border-right.border-end

罫線を消す(Subtractive)

罫線の種類

 線なし:.border.border-0

●三面に線

 上部の線なし:.border.border-top-0

 行末側の線なし:.border.border-end-0 v5.0.0-beta1クラス名変更

 下部の線なし:.border.border-bottom-0

 行頭側の線なし:.border.border-start-0 v5.0.0-beta1クラス名変更

設定例
<span class="border border-top-0">...</span>
【設定】
  • 罫線を削除したい部分がある場合は、その要素に .border(-{side})-0 を入れる(.border(-{side})-0 は上記「罫線の種類」から選択)
  • .border(-{side})-0 単独で使用可能(.border と組み合わせても可)
【注意】
  • .border-{side}-0 は、すでに罫線が入っている要素から部分的に罫線を削除する設定(テーブルの線を部分的に消すときなどに便利)
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
      • 行頭側の線なし:.border-left-0.border-start-0
      • 行末側の線なし:.border-right-0.border-end-0

 

罫線の色(Border color)

テーマカラーで構築されたユーティリティを使用して罫線の色を変更。

枠の色の種類

 .border-primary

 .border-secondary

 .border-success

 .border-info

 .border-warning

 .border-danger

 .border-light ※色が見やすいように背景色と空白をつけています

 .border-dark

 .border-white ※色が見やすいように背景色と空白をつけています

設定例
<span class="border border-primary">...</span>
【設定】
  • 罫線を色付けしたい要素に .border-{themecolor} を入れる(.border-{themecolor} は上記「色の種類」から選択)
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark, white のいずれかを選択
  • .border-{themecolor} 単独で使用可能(.border と組み合わせても可)
【注意】
  • .border-{themecolor} は、すでに罫線の設定(border)が入っている要素に色を付ける設定(テーブル、カードリストグループなどの枠線に色を付けるときなどに利用)

 

罫線の太さ(Border-width)v5.0.0-alpha2新設

罫線の種類

 .border.border-1border-width: 1px

 .border.border-2border-width: 2px

 .border.border-3border-width: 3px

 .border.border-4border-width: 4px

 .border.border-5border-width: 5px

設定例
<span class="border border-1">...</span>
【設定】
  • 罫線を設定したい部分の要素に .border.border-{size} を入れる(.border-{size} は上記「罫線の種類」から選択)

 

境界の角丸(Border-radius)v5.0.0-beta1一部クラス名変更

要素にクラスを追加すると、簡単に角を丸くできる。

角丸の種類

●画像に設定

プレースホルダ75x75 すべて角丸:.rounded

●二面に角丸

プレースホルダ75x75 上部が角丸:.rounded-top

プレースホルダ75x75 行末側が角丸:.rounded-end v5.0.0-beta1クラス名変更

プレースホルダ75x75 下部が角丸:.rounded-bottom

プレースホルダ75x75 行頭側が角丸:.rounded-start v5.0.0-beta1クラス名変更

プレースホルダ75x75 円:.rounded-circle

プレースホルダ150x75 長丸:.rounded-pill

●三面に角丸(複数設定)

プレースホルダ75x75 行末下以外角丸:.rounded-top.rounded-start

プレースホルダ75x75 行頭下以外角丸:.rounded-top.rounded-end

プレースホルダ75x75 行末上以外角丸:.rounded-bottom.rounded-start

プレースホルダ75x75 行頭上以外角丸:.rounded-bottom.rounded-end

●背景色に設定

画像だけでなく、背景色にも設定することができます。
すべて角丸だとカードに背景色を設定したものと変わらないように見えますが、カードには枠線の色も設定が入っています。

円の場合はそのまま設定すると、このようになります。

長丸の場合は、このようになります。

正円の設定

Bootstrap5.xの設定例 緑背景が変更箇所
画像に設定<img src="..." alt="..." class="rounded-top">
背景色に設定<p class="bg-warning text-white rounded p-3">画像だけでなく、背景色にも設定することができます。....</p>
<p class="bg-danger text-white rounded-circle p-3">円の場合はそのまま設定すると、このようになります。</p>
<p class="bg-success text-white rounded-pill p-3">長丸の場合は、このようになります。</p>
<p class="bg-info text-dark rounded-circle position-relative" style="width:6rem;height:6rem;"><span class="position-absolute top-50 start-50 translate-middle text-nowrap">正円の設定</span></p>
【設定】
  • 設定したい要素に .rounded(-{side}) を入れる(.rounded(-{side}) は上記「角丸の種類」から選択)
  • 正円の設定をする場合は、同じ大きさの幅(width)と高さ(height)のスタイルを同じ設定にしないと楕円になる。
【注意】
  • 一面だけ角丸の設定は不可の模様(検証していない)
【変更履歴】
  • 【v5.0.0-alpha3】
    • 正円の設定を調整(変換ユーティリティクラス等を使用)
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
      • 行頭側が角丸:.rounded-left.rounded-start
      • 行末側が角丸:.rounded-right.rounded-end

角丸の大きさ(Sizes)v5.0.0-alpha3クラス名変更

大きなまたは小さな丸角にはスケーリングクラスを使用。サイズの範囲は 0 から 3 で、ユーティリティAPIを変更することで構成できる。

大きさの種類

プレースホルダ75x75 角丸なし:.rounded-0border-radius: 0

小さめの角丸の画像75x75 小さめの角丸:.rounded-1border-radius: .2remv5.0.0-alpha3クラス名変更

標準の角丸の画像75x75 標準の角丸:.rounded-2border-radius: .25rem、デフォルトでは .rounded と同じ)

大きめの角丸の画像75x75 大きめの角丸:.rounded-3border-radius: .3remv5.0.0-alpha3クラス名変更

設定例
<img src="..." alt="..." class="rounded-0">
<img src="..." alt="..." class="rounded-1">
<img src="..." alt="..." class="rounded-2">
<img src="..." alt="..." class="rounded-3">
【設定】
  • 設定したい要素に .rounded-{size} を入れる(.rounded-{size} は上記「大きさの種類」から選択)
【注意】
  • .rounded-{size}.rounded と組み合わせる必要はない
【変更履歴】
  • 【v5.0.0-alpha3】
    • .rounded-sm.rounded-1
    • .rounded-lg.rounded-3

 

Sass v5.0.0-beta3追加

変数(Variables)

デフォルトの設定
scss/_variables.scss 内 border-variables の設定$border-width:                1px;
$border-widths: (
	1: 1px,
	2: 2px,
	3: 3px,
	4: 4px,
	5: 5px
);

$border-color:                $gray-300;
scss/_variables.scss 内 border-radius-variables の設定$border-radius:               .25rem;
$border-radius-sm:            .2rem;
$border-radius-lg:            .3rem;
$border-radius-pill:          50rem;

mixin(Mixins)

デフォルトの設定
scss/mixins/_border-radius.scss 内 border-radius-mixins の設定@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
	@if $enable-rounded {
		border-radius: valid-radius($radius);
	}
	@else if $fallback-border-radius != false {
		border-radius: $fallback-border-radius;
	}
}

@mixin border-top-radius($radius: $border-radius) {
	@if $enable-rounded {
		border-top-left-radius: valid-radius($radius);
		border-top-right-radius: valid-radius($radius);
	}
}

@mixin border-end-radius($radius: $border-radius) {
	@if $enable-rounded {
		border-top-right-radius: valid-radius($radius);
		border-bottom-right-radius: valid-radius($radius);
	}
}

@mixin border-bottom-radius($radius: $border-radius) {
	@if $enable-rounded {
		border-bottom-right-radius: valid-radius($radius);
		border-bottom-left-radius: valid-radius($radius);
	}
}

@mixin border-start-radius($radius: $border-radius) {
	@if $enable-rounded {
		border-top-left-radius: valid-radius($radius);
		border-bottom-left-radius: valid-radius($radius);
	}
}

@mixin border-top-start-radius($radius: $border-radius) {
	@if $enable-rounded {
		border-top-left-radius: valid-radius($radius);
	}
}

@mixin border-top-end-radius($radius: $border-radius) {
	@if $enable-rounded {
		border-top-right-radius: valid-radius($radius);
	}
}

@mixin border-bottom-end-radius($radius: $border-radius) {
	@if $enable-rounded {
		border-bottom-right-radius: valid-radius($radius);
	}
}

@mixin border-bottom-start-radius($radius: $border-radius) {
	@if $enable-rounded {
		border-bottom-left-radius: valid-radius($radius);
	}
}

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

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

デフォルトの設定
scss/_utilities.scss 内 border-variables の設定		"border": (
			property: border,
			values: (
				null: $border-width solid $border-color,
				0: 0,
			)
		),
		"border-top": (
			property: border-top,
			values: (
				null: $border-width solid $border-color,
				0: 0,
			)
		),
		"border-end": (
			property: border-right,
			class: border-end,
			values: (
				null: $border-width solid $border-color,
				0: 0,
			)
		),
		"border-bottom": (
			property: border-bottom,
			values: (
				null: $border-width solid $border-color,
				0: 0,
			)
		),
		"border-start": (
			property: border-left,
			class: border-start,
			values: (
				null: $border-width solid $border-color,
				0: 0,
			)
		),
		"border-color": (
			property: border-color,
			class: border,
			values: map-merge($theme-colors, ("white": $white))
		),
		"border-width": (
			property: border-width,
			class: border,
			values: $border-widths
		),
scss/_utilities.scss 内 border-variables の設定		"rounded": (
			property: border-radius,
			class: rounded,
			values: (
				null: $border-radius,
				0: 0,
				1: $border-radius-sm,
				2: $border-radius,
				3: $border-radius-lg,
				circle: 50%,
				pill: $border-radius-pill
			)
		),
		"rounded-top": (
			property: border-top-left-radius border-top-right-radius,
			class: rounded-top,
			values: (null: $border-radius)
		),
		"rounded-end": (
			property: border-top-right-radius border-bottom-right-radius,
			class: rounded-end,
			values: (null: $border-radius)
		),
		"rounded-bottom": (
			property: border-bottom-right-radius border-bottom-left-radius,
			class: rounded-bottom,
			values: (null: $border-radius)
		),
		"rounded-start": (
			property: border-bottom-left-radius border-top-left-radius,
			class: rounded-start,
			values: (null: $border-radius)
		),