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

閉じるボタン（Close button） v5.0.0-alpha2設定変更

モーダルやアラートなどのコンテンツを非表示にする一般的な閉じるボタン。

目次

基本の設定（Example）v5.0.0-alpha2設定変更

.btn-close でコンポーネントを閉じられるオプションを提供。デフォルトでのスタイルは制限しているが、高度なカスタマイズができる。Sass変数を変更して、デフォルトの background-image を置き換える。aria-label には、必ずスクリーンリーダーのテキストを入れること。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<button type="button" class="btn-close" aria-label="閉じる"></button>
※Bootstrap4.xの設定例 赤背景が変更箇所
<button type="button" class="close" aria-label="閉じる">
  <span aria-hidden="true">&times;</span>
</button>
【設定】
  • button.btn-close[aria-label]
【注意】
  • 実際に閉じる動作をさせるには、button.btn-close[aria-label] に data-bs-dismiss="xxx" を入れる
    （xxx の部分は、アラートの場合は alert、モーダルの場合は modal、オフキャンバスの場合は offcanvas、トーストの場合は toast）
  • button.btn-close に、アイコンとなる span[aria-hidden="true"] > &times; の設定は不要（.btn-close にSVGが設定されるため）
    • アイコンボタンはSVG化されたのでRFSではなくなり、ビューポートに応じて拡大縮小しない
    • アイコンボタンを × から変更したい場合は、scss/_variables.scss 内にある $btn-close-bg に設定されているSVGの値を変更して再コンパイルする
【アクセシビリティの設定】
  • アイコンとなる button.btn-close に、aria-label 属性（アイコンボタンのラベリング）を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • RFSがデフォルトで有効となり、ビューポートが1200px未満でボタンのフォントサイズがビューポートに応じて拡大縮小（※v5.0.0-alpha2で不要に）
  • 【v5.0.0-alpha2】
    • button.close[aria-label] > span[aria-hidden="true"] > &times; ⇒ button.btn-close[aria-label]
      • .close ⇒ .btn-close
      • span[aria-hidden="true"] > &times; が不要に

 

無効化状態（Disabled state）v5.0.0-alpha1新設

無効化された閉じるボタンでは、opacity を変更。また、pointer-events: none と user-select: none を適用して、hoverとactiveな状態が切り替わらないようにした。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<button type="button" class="btn-close" disabled aria-label="閉じる"></button>
※Bootstrap4.xの設定例 赤背景が変更箇所
<button type="button" class="close" disabled aria-label="閉じる">
  <span aria-hidden="true">&times;</span>
</button>
【設定】
  • button.btn-close に [disabled] を入れる

 

ホワイト・バージョン（White variant）v5.0.0-alpha2新設

.btn-close-white クラスを使用して、デフォルトの .btn-close を白に変更。このクラスは、filter プロパティを使用して、background-image を反転。

見本 背景に .bg-dark を追加しています

●無効化の場合

※デフォルトの場合（参考）

設定例
<button type="button" class="btn-close btn-close-white" aria-label="閉じる"></button>
無効化の場合<button type="button" class="btn-close btn-close-white" disabled aria-label="閉じる"></button>
【設定】
  • button.btn-close に .btn-close-white を追加

 

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定
scss/_variables.scss 内 close-variables の設定$btn-close-width:            1em;
$btn-close-height:           $btn-close-width;
$btn-close-padding-x:        .25em;
$btn-close-padding-y:        $btn-close-padding-x;
$btn-close-color:            $black;
$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
$btn-close-focus-shadow:     $input-btn-focus-box-shadow;
$btn-close-opacity:          .5;
$btn-close-hover-opacity:    .75;
$btn-close-focus-opacity:    1;
$btn-close-disabled-opacity: .25;
$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%);