Bootstrap - 表示：初心者向けの包括ガイド

こんにちは、Web開発者志望の方々！今日は、Bootstrapの非常に便利な機能の一つである表示ユーティリティについてお話しします。あなたの近所の親切なコンピュータ教師として、私は明確な説明と豊富な例を通じてこのトピックをガイドします。まず、コーヒー（またはあなたの好み次第で茶）を 한杯取り、始めましょう！

Bootstrapの表示とは？

本題に入る前に、「Bootstrapの表示」について理解しましょう。Web開発における「表示」は、要素がウェブページ上にどのように表示されるかを指します。Bootstrapは、要素の表示動作を簡単に制御できるクラスセットを提供しています。

これを、部屋に家具を並べることに例えるとわかりやすいでしょう。時には家具を見えるようにしたいし、時には隠したいし、部屋の大きさ（または画面のサイズ）に応じて異なる振る舞いをさせたいときがあります。

� notation

Bootstrapは、表示クラスに対してシンプルで直感的な記法を使用しています。一般的な形式は以下の通りです：

.d-{value}

ここで、{value}は以下のいずれかです：

値	説明
none	要素を隠す
inline	要素をインライン要素として表示
inline-block	要素をインラインレベルのブロックコンテナとして表示
block	要素をブロック要素として表示
table	要素をテーブルとして表示
table-cell	要素をテーブルセルとして表示
table-row	要素をテーブル行として表示
flex	要素をブロックレベルのフレックスコンテナとして表示
inline-flex	要素をインラインレベルのフレックスコンテナとして表示

いくつかの例を見てみましょう：

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

この例では、d-inlineを使用して2つのdiv要素をインライン表示にしています。これらは並んで表示され、垂直に積み重ねられません。

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

ここでは、d-blockを使用してspan要素（通常はインライン）をブロック表示にしています。これらは垂直に積み重ねられます。

レスポンシブバリエーション

ここで非常に興味深い部分に移ります！Bootstrapは、画面サイズに応じて異なる表示プロパティを適用できるようにしています。この形式は以下の通りです：

.d-{breakpoint}-{value}

ここで、{breakpoint}は以下のいずれかです：

ブレイクポイント	説明
sm	小型デバイス（≥576px）
md	中型デバイス（≥768px）
lg	大型デバイス（≥992px）
xl	エクストララージデバイス（≥1200px）

例えば：

<div class="d-none d-md-block">
  このテキストは小型画面では非表示ですが、中型及以上の画面では表示されます。
</div>

このdivはデフォルトで非表示（d-none）ですが、中型及以上の画面ではブロック表示（d-md-block）されます。

要素の非表示

レスポンシブデザインにおける一般的なタスクは、要素を非表示にすることです。Bootstrapはd-noneクラスでこれを簡単にします：

<div class="d-none">あなたには見えません！</div>

この要素は、画面サイズに関係なく完全に非表示になります。

しかし、特定の画面サイズでのみ要素を非表示にしたい場合はどうでしょうか？その場合、レスポンシブバリエーションが役立ちます：

<div class="d-lg-none">大型画面以下で表示されます。</div>
<div class="d-none d-lg-block">大型画面及以上で表示されます。</div>

プリント時の表示

Bootstrapは、ページが印刷されたときの要素の表示も制御できます！d-print-{value}クラスを使用します：

<div class="d-none d-print-block">印刷時にのみ表示されます！</div>
<div class="d-print-none">印刷時に消失します。</div>

これは、別のスタイルシートを作成することなく、印刷対応のウェブページを作成するのに非常に便利です。

すべてをまとめて

複数の表示ユーティリティを使用した小さな例を作成してみましょう：

<div class="container">
  <h1 class="d-none d-md-block">Welcome to My Website</h1>
  <h2 class="d-md-none">Welcome</h2>

  <p class="d-inline-block bg-light p-2">I'm always inline-block.</p>
  <p class="d-none d-lg-inline-block bg-light p-2">I appear inline on large screens.</p>

  <div class="d-flex justify-content-between">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    <div class="d-none d-xl-block">I only show on extra large screens</div>
  </div>

  <footer class="d-print-none">This footer won't appear when printed.</footer>
</div>

この例では：

• メディアム画面及以上で大型の見出し、小型画面では小さな見出しを使用しています。
• 2つのパラグラフがあり、1つは大型画面でのみ表示されます。
• フレックスボックスを使用し、エクストララージ画面でのみ表示される3番目の要素があります。
• フッターは印刷时不表示です。

結論

そして、ここまでがBootstrapの表示ユーティリティのすべてです！これらをマスターする鍵は実践です。自分自身でレイアウトを作成し、異なる画面サイズで実験し、これらのクラスを組み合わせてみてください。

あなたの古いコンピュータ教師として、これらのユーティリティが実際のWeb開発においてどれほど価値があるか強調しておきます。これらを使用することで、カスタムCSSを書いたり、レイアウトの問題をデバッグしたりする時間を大幅に節約できます。

それでは、自信を持ってレスポンシブで適応性のあるレイアウトを作成してください！そして、Web開発において、そして人生においても、最も強力なツールは、何かを消失させる时机を知ることです。ハッピーコーディング！

Credits: Image by storyset