Bootstrapで要素を非表示にするにはどうすればいいですか？

Bootstrapで要素を非表示にする方法

Bootstrapで要素を非表示にするにはどうすればいいですか？

概要

要素を非表示にするには、.d-noneまたは.d-{sm, md, lg, xl}-noneのどれかを使用します。指定した範囲の画面サイズで要素を適用する場合は.d-*-noneと.d-*-*を組み合わせることができます。

はじめに

Bootstrapは強力なCSSフレームワークであり、様々な用途に使用することができます。その中でも、特定の状況において要素を非表示にする方法は非常に便利です。Bootstrapsのユーティリティクラスを使用することで、CSSを書くことなく簡単に要素を制御できます。この機能を使いこなすことで、柔軟なレスポンシブデザインを実現することができます。

要素を完全に非表示にする

まず、任意の要素を完全に非表示にする場合には、.d-noneクラスを使用します。このクラスを適用することで、画面のいかなるサイズでも要素は表示されません。

<div class="d-none">この要素は非表示になります</div>

画面サイズに応じた非表示

特定のサイズにおいてだけ要素を非表示にしたい場合は、構文として.d-{breakpoint}-noneを使用します。例えば、ページを印刷する際に適用したり、モバイルデバイス上での表示を変更したりできます。

利用できるブレークポイントは以下の通りです：

  • sm - 576px以上
  • md - 768px以上
  • lg - 992px以上
  • xl - 1200px以上
<div class="d-lg-none">この要素は992px未満で非表示になります</div>

複雑な表示非表示の設定

また、画面サイズによる表示条件を組み合わせて柔軟なレイアウトを作成することも可能です。たとえば、ある範囲でだけ表示したい場合には.d-*-noneと.d-*-blockを組み合わせます。


<!-- デフォルトで非表示、md以上で表示 -->
<div class="d-none d-md-block">この要素は md サイズ以上で表示されます</div>

実践例

次に、実際の例でどのようにこれらのユーティリティクラスを使うのか見てみましょう。例えば、ナビゲーションメニューでスマートフォンでは非表示にするが、デスクトップでは表示するようにしたい場合:


<nav>
    <ul class="d-none d-lg-flex">
        <li>ホーム</li>
        <li>サービス</li>
        <li>お問い合わせ</li>
    </ul>
</nav>

結論

Bootstrapを利用することで、簡単に要素を表示または非表示にでき、柔軟なデザインが可能となります。レスポンシブなデザインはユーザーエクスペリエンスを向上させ、異なるデバイスに対して最適化されたインターフェースを提供します。

関連QA

質問 回答
Bootstrapのユーティリティクラス以外で要素を非表示にする方法はありますか？ はい、カスタムCSSを使用することでさらに詳細なコントロールが可能です。
特定のプロジェクトでBootstrapを使用していない場合はどうすればいいですか？ プロジェクトにBootstrapをインポートするか、CSSで同様のクラスを定義することができます。
複数のクラスを要素に適用する際の注意点はありますか？ クラスが競合することがあるため、意図した表示になっているかブラウザで確認することが重要です。

その他の参考記事:bootstrap 右寄せ