Bootstrap - 可視性: 要素の表示と非表示

こんにちは、未来のウェブ開発者さんたち！今日は、ウェブデザインの「魔法のトリック」とも呼べる興味深い話題に潜り込みます: Bootstrapの可視性クラス。魔术師が物を現したり消したりするように、あなたもウェブ要素で同じことを学びます。始めましょう！

Bootstrap - Visibility

Bootstrapの可視性とは？

Bootstrapの可視性クラスは、ウェブページ上での要素の表示時期と方法をコントロールするための強力なツールセットです。ウェブサイトのコンテンツをリモコンで操作し、さまざまな画面サイズや条件に基づいて何が可視かを決定できるように思ってください。

なぜ重要か？

デスクトップで見たときは素晴らしいウェブサイトが、携帯電話で開くとすべてが潰れて読みにくい…そんな経験はありませんか？ここで可視性クラスが救世主的な役割を果たします！これにより、さまざまなデバイスに対応したレスポンシブデザインを作成し、どこでも素晴らしいウェブサイトを実現できます。

基本可視性クラス

まず、最もシンプルな可視性クラスから始めましょう。これらは、ウェブ要素の「オン/オフ」スイッチのようなものです。

可視クラス

<div class="visible">私はいつも可視です！</div>

この要素はすべてのデバイスと画面サイズで可視です。常にライトを点けておくようなものです – だれでも見えます！

非表示クラス

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

この要素はすべてのデバイスで非表示です。見えない箱に入れるようなものです – コードにはありますが、ページ上では見えません。

レスポンシブ可視性クラス

少し進んだ話題に移りましょう。Bootstrapは、画面サイズに基づいて要素を表示または非表示にすることができます。さまざまな機会に合わせた服を着るようなものです！

特定の画面サイズで非表示

<div class="hidden-xs">私は超小型画面では非表示です</div>
<div class="hidden-sm">私は小型画面では非表示です</div>
<div class="hidden-md">私は中型画面では非表示です</div>
<div class="hidden-lg">私は大型画面では非表示です</div>

これらのクラスは、特定の画面サイズで要素を非表示にします：

hidden-xs: 超小型画面（電話）で非表示
hidden-sm: 小型画面（タブレット）で非表示
hidden-md: 中型画面（デスクトップ）で非表示
hidden-lg: 大型画面（大型デスクトップ）で非表示

特定の画面サイズで表示

<div class="visible-xs">私は超小型画面でのみ表示されます</div>
<div class="visible-sm">私は小型画面でのみ表示されます</div>
<div class="visible-md">私は中型画面でのみ表示されます</div>
<div class="visible-lg">私は大型画面でのみ表示されます</div>

これらのクラスは、特定の画面サイズで要素を表示します：

visible-xs: 超小型画面でのみ表示
visible-sm: 小型画面でのみ表示
visible-md: 中型画面でのみ表示
visible-lg: 大型画面でのみ表示

プリント可視性

プリントされたウェブページ上に何が表示されるかをコントロールできることを知っていますか？紙の特別なバージョンを持つようなものです！

<div class="visible-print">印刷すると表示されます！</div>
<div class="hidden-print">印刷すると非表示になります！</div>

visible-print: この要素はページが印刷されたときにのみ表示されます
hidden-print: この要素は印刷されたページでは非表示です

可視性クラスの組み合わせ

ここで本当に楽しい部分に移ります！これらのクラスを組み合わせて、複雑な可視性ルールを作成することができます。可視性DJのように、さまざまな状況に合わせて組み合わせてください。

<div class="visible-xs visible-md">
我は電話と中型デスクトップで表示されますが、タブレットと大型画面では非表示です！
</div>

この要素は超小型（電話）と中型（デスクトップ）画面で表示されますが、小型（タブレット）と大型画面では非表示です。

実用的な例

実際の例で新しい知識を活かしてみましょう！

レスポンシブナビゲーションメニュー

<nav>
<ul class="hidden-xs">
<li>ホーム</li>
<li>关于</li>
<li>联系方式</li>
</ul>
<div class="visible-xs">
<button>菜单</button>
</div>
</nav>

この例では、大型画面には完全なナビゲーションメニューを表示し、電話ではシンプルな「菜单」ボタンに置き換えます。格式ばしい dining room と日常的な kitchen nook があるようなものです！

自适应コンテンツ

<article>
<h1>ようこそ私のウェブサイトへ</h1>
<p class="visible-lg">これは大型画面では詳細な説明が見えます。</p>
<p class="hidden-lg">ようこそ！詳しくはクリックしてください。</p>
</article>

ここでは、大型画面では詳細な説明を表示し、小型デバイスでは短いバージョンを表示します。小説とそのクリフノート版を持っているようなものです！

ベストプラクティスとヒント

過剰使用しないでください：要素を非表示にできるからといって、必要ないコンテンツは避けてください。
モバイルファーストを考えましょう：まず小型画面向けにデザインし、大型画面向けにコンテンツを追加する方が簡単です！
テストを繰り返してください：さまざまなデバイスでウェブサイトを確認し、可視性クラスが意図した通りに動作しているか確認してください。
他のBootstrap機能と組み合わせてください：可視性クラスはグリッドシステムや他のBootstrapコンポーネントと非常にうまく連携します。
アクセシビリティに注意してください：非表示のコンテンツはスクリーンリーダーによって読まれる可能性があることを覚えて、必要に応じて aria 属性を使用してください。

結論

おめでとうございます！Bootstrapの可視性魔法使いになりました。これらのスキルを身につけることで、さまざまな画面サイズに対応した美しいウェブサイトを作成できます。素晴らしいウェブデザインはカメレオンのように、どんな環境でも完璧に見えるべきです。

さあ、練習の番です。シンプルなウェブページを作成し、これらの可視性クラスを試してみてください。失敗を恐れずに – それが学びです！そして、私さえも思いつかなかった新しい使い方を発見するかもしれません。

ハッピーコーディング、そしてあなたの要素が、思い通りに可視（または非表示）になることを祈っています！

クラス	説明
visible	全てのデバイスで要素が可視
hidden	全てのデバイスで要素が非表示
hidden-xs	超小型画面（電話）で非表示
hidden-sm	小型画面（タブレット）で非表示
hidden-md	中型画面（デスクトップ）で非表示
hidden-lg	大型画面（大型デスクトップ）で非表示
visible-xs	超小型画面でのみ要素が表示
visible-sm	小型画面でのみ要素が表示
visible-md	中型画面でのみ要素が表示
visible-lg	大型画面でのみ要素が表示
visible-print	ページが印刷されたときにのみ要素が表示
hidden-print	ページが印刷されたときに要素が非表示

Credits: Image by storyset