Heading 1

【設定】

• div#ID.carousel.slide > div.carousel-inner >div.carousel-item > img.d-block.w-100
• div.carousel-item に .activeを入れるとそのアイテムが最初に表示される（div.carousel-item.activeは必ずどれかに設定すること）
• .carouselに data-ride="carousel"を入れると読み込み時から循環が開始

【設定】

• div#ID.carousel.slide > [div.carousel-inner・・・]《スライド画像》 + {[a.carousel-control-prev[href="#ID"][data-slide="prev"] > span.carousel-control-prev-icon]（前へ） + [a.carousel-control-next[href="#ID"][data-slide="next"] > span.icon-next]（次へ）}《スライドコントロール》

【アクセシビリティの設定】

• a.carousel-control-{prev,next}（2ヶ所）に、role="button"属性（支援技術にボタンの役割を伝える）
• span.carousel-control-{prev,next}-icon（2ヶ所）に 、aria-hidden="true" 属性（スクリーンリーダー等での読み上げをスキップさせる）
• "前へ"と"次へ"を意味するspan.sr-only（スクリーンリーダー等での読み上げをスキップさせる） をそれぞれ入れる

【設定】

• div#ID.carousel.slide > {ol.carousel-indicators" > [li.active[data-target="#ID"][data-slide-to="0"] + li[data-target="#ID"][data-slide-to="1"]・・・]}《インジケータ》 + [div.carousel-inner・・・]《スライド画像》 + {[a.carousel-control-prev ...] + [a.carousel-control-next...]}《スライドコントロール》
• li と div.carousel-itemの2ヶ所に.active を入れるとそのアイテムが最初に表示される
• data-slide-to="*" は 0 から順につける

【設定】

• コントロールがリンクの場合：a.btn[data-toggle="collapse"][href="#ID"][role="button"]《ボタン》 + div#ID.collapse《コンテンツ》
• コントロールがボタンの場合：button.btn[data-toggle="collapse"][data-target="#ID"]《ボタン》 + div#ID.collapse《コンテンツ》
• コンテンツ表示部分を div.card.card-bodyにすると表示部分がわかりやすい

【設定】

• 1つのボタンで2つの要素を同時に切り替えるようにするには、[data-target] に共通するクラスを指定

【設定】

• div.accordion[id="accordion"] > {div.card > [div.card-header > a.text-body.collapsed[data-toggle="collapse"][href="#ID1"]]《カードヘッダ》 + [div.collapse[id="ID2"][data-parent="#accordion"] > div.card-body]《カードコンテンツ》}・・・
• div.accordion[id="accordion"] に .accordion を入れると一連のカードのような表示になる カードの間に空白をあけるには、.accordion を入れずに各 div.card に 空白ユーティリティクラスを使用（例：最後のカード以外に .mb-2（下側に0.5remのマージン）を追加）
• 最初からパネルが開いた状態にする場合（上記見本の「アイテム1」で実現）は、
  • a.text-body.collapsed[data-toggle="collapse"] から
  • .collapsed を外し.collapse に .show を追加
• div.collapse に data-parent属性を設定すれば、別のパネルを開くと開いていたパネルを閉じるようになる

【設定】

• 要素を使用する場合：div.dropdown > {[button.btn.btn-{themecolor}.dropdown-toggle[data-toggle="dropdown"]]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}
• 要素を使用する場合：div.dropdown > {[a.btn.btn-{themecolor}.dropdown-toggle[data-toggle="dropdown"]]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}
• ボタングループでの設定：div.btn-group > {button.btn.btn-{themecolor}.dropdown-toggle[data-toggle="dropdown"]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}
• dropdownプラグインを使ってメニューを開くために .dropdown-toggle と同じ要素に data-toggle="dropdown" を入れる
• アンカーリンクでそのままURLを維持するには、href="#" の代わりに data-target 属性を使用
• ボタンとドロップダウンを関連付けるため、button.btn.btn-{themecolor}.dropdown-toggle にはid="ID"、div.dropdown-menu には aria-labelledby="ID" 属性を入れる
• .dropdown に .show を追加すると、メニューが開いた状態で表示される
• アクティブ化しておきたいメニューがあれば、a.dropdown-item.activeにする