Bootstrap 辅助类

このチュートリアルでは、Bootstrap が提供するすべての補助クラスについて説明します。これらのクラスを使用すると、カスタムの CSS クラスを作成することなく、ページ要素のスタイルをすばやく設定できます。

1. 閉じるアイコン (×)

.close クラスを使用して、モーダルやアラートなどのコンポーネントを閉じるための閉じるボタンを作成する方法について説明します。

<button type="button" class="close" aria-label="閉じる">
  <span aria-hidden="true">×</span>
</button>

aria-label 属性は、スクリーンリーダーのユーザーのためにボタンの目的を説明します。 aria-hidden="true" 属性は、視覚的には表示されますが、スクリーンリーダーには読み上げられないように × 印を非表示にします。

2. 三角形

.caret クラスは、ドロップダウンメニューなどのコンポーネントに三角形の矢印を作成するために使用されます。

<span class="caret"></span>

このクラスは、要素に適切な幅、高さ、ボーダーを設定して、下向きの三角形を作成します。ドロップダウンメニューのトグルボタンなどに使用されます。

3. クリアフロート

.clearfix クラスは、フロートした要素が原因で発生する親要素の高さの崩壊を解決するために使用されます。

<div class="clearfix">
  <div class="float-left">フロートした要素</div>
  <div class="float-right">フロートした要素</div>
</div>

このクラスは、親要素に clearfix を適用することで、フロートした子要素を含むように高さを拡張します。

4. 表示と非表示

Bootstrap は、要素の表示と非表示を切り替えるためのさまざまな補助クラスを提供しています。これらのクラスは、さまざまな画面サイズやデバイスに合わせてコンテンツを調整するために使用できます。

5. 画像置換

.sr-only クラスは、視覚的には非表示にしますが、スクリーンリーダーでは読み取ることができるテキストコンテンツを作成するために使用されます。このクラスは、画像の代替テキストを提供する場合などに役立ちます。

<img src="image.jpg" alt="<span class="sr-only">代替テキスト</span>">

この例では、.sr-only クラスを使用して、スクリーンリーダーのユーザーにのみ読み取られる代替テキストを提供しています。視覚ユーザーには、画像は通常どおり表示されます。

6. スクリーンリーダー

.sr-only クラスは、スクリーンリーダーのユーザーにのみアクセス可能なコンテンツを作成するためにも使用できます。これは、視覚的なユーザーインターフェースに影響を与えずに、追加のコンテキストや情報を提供する場合に役立ちます。

<p>
  このテキストは、すべてのユーザーに表示されます。
  <span class="sr-only">このテキストは、スクリーンリーダーのユーザーにのみ表示されます。</span>
</p>

7. ユーティリティクラス

Bootstrap は、テキストの色、背景色、テキストの配置、ボーダー、角丸、フロート、位置合わせなどをすばやく設定するためのさまざまなユーティリティクラスも提供しています。これらのクラスの詳細については、公式ドキュメントを参照してください。

8. レスポンシブユーティリティクラス

Bootstrap は、さまざまな画面サイズ、デバイス、印刷状態に基づいて要素の表示と非表示を切り替えるためのレスポンシブユーティリティクラスも提供しています。これらのクラスの詳細については、公式ドキュメントを参照してください。

よくある質問

1. 補助クラスはどのように使用しますか?

補助クラスは、要素の既存のクラス属性に追加するだけです。複数の補助クラスを使用する場合は、スペースで区切ります。

2. 独自の補助クラスを作成できますか?

はい、独自の補助クラスを作成して、Bootstrap のデフォルトのスタイルをオーバーライドまたは拡張できます。カスタム補助クラスは、独自の CSS ファイルまたは <style> タグ内に定義する必要があります。

3. 補助クラスを使用する利点は何ですか?

補助クラスを使用すると、カスタム CSS を記述することなく、一般的なスタイルをすばやく適用できます。これにより、コードを簡潔かつ保守しやすくすることができます。