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

閉じるボタン（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 を追加