Bootstrap - 視覚的に非表示

こんにちは、未来のウェブ開発者たち！今日は、Bootstrapの非常に便利で興味深い機能、視覚的に非表示クラスについて深く掘り下げます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのがとても楽しみです。あなたのお気に入りの飲み物を用意して、リラックスして、一緒にこの冒険に乗り出しましょう！

Bootstrap - Visually Hidden

視覚的に非表示とは？

本題に入る前に、基本から始めましょう。Bootstrapの視覚的に非表示クラスは、ウェブページのための魔法師のトリックのようです。視覚的にコンテンツを隠しながら、スクリーンリーダーにはアクセス可能にします。すごくないですか？

例えば、魔法の学校（ホグワーツと呼びましょうか？）のウェブサイトを設計しているとします。視覚障害のある生徒向けの重要な情報を含めたいけれども、他の生徒の視覚的なレイアウトを邪魔しないようにしたいです。ここで、視覚的に非表示クラスが助け舟を貸してくれます！

どのように動作する？

視覚的に非表示クラスは、CSSを使用して視認ユーザーからコンテンツを隠しながら、スクリーンリーダーには利用可能にします。まるでHTML要素のための透明なマントのようです！

簡単な例を見てみましょう：

<h1>ようこそホグワーツへ</h1>
<p class="visually-hidden">このコンテンツはスクリーンリーダー専用です。</p>

この例では、視認ユーザーは「ようこそホグワーツへ」だけを見ますが、スクリーンリーダーのユーザーは「このコンテンツはスクリーンリーダー専用です。」も聞きます。

Bootstrapに視覚的に非表示を導入する

概念を理解したので、それを実装する方法を見てみましょう。Bootstrapは、.visually-hiddenという готовなクラスを提供しています。

以下のように使用します：

<div class="visually-hidden">このコンテンツは視覚的に隠されていますが、スクリーンリーダーにはアクセス可能です。</div>

簡単ですね？そのクラスを隠したい要素に追加するだけです。

実用的な例

視覚的に非表示クラスの実用的な例を見てみましょう：

ナビゲーションリンクのスキップ：

<a href="#main-content" class="visually-hidden">メインコンテンツへスキップ</a>
<nav>
<!-- ナビゲーションメニューアイテム -->
</nav>
<main id="main-content">
<!-- メインコンテンツ -->
</main>

これにより、スクリーンリーダーのユーザーは直接メインコンテンツにスキップすることができ、ナビゲーション体験が向上します。

フォームラベル：

<label for="search" class="visually-hidden">検索</label>
<input type="text" id="search" placeholder="検索">

ここでは、スクリーンリーダー向けのラベルを提供しながら、視覚的なデザインに影響を与えません。

追加のコンテキスト：

<button>
削除
<span class="visually-hidden">このアイテムをカートから削除</span>
</button>

これにより、視認ユーザーにはボタンのテキストがクラッターにならないように、スクリーンリーダーのユーザーには追加のコンテキストを提供します。

視覚的に非表示の魔法の背後

今、カーテンの背後に潜り込み、この魔法のクラスがどのように実装されているかを見てみましょう。以下はそのCSSです：

.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

このCSSが複雑に見えるかもしれませんが、簡単に説明します：

position: absolute: 要素を通常のドキュメントフローから外します。
width: 1px; height: 1px: 要素を非常に小さくします。
padding: 0; margin: -1px: 要素の周囲のスペースを除去します。
overflow: hidden: オーバーフローするコンテンツを隠します。
clip: rect(0, 0, 0, 0): コンテンツを0x0の長方形にクリップします。
white-space: nowrap: テキストの折り返しを防ぎます。
border: 0: 枠線を除去します。

!important修飾子は、他のCSSルールによって上書きされないようにします。

視覚的に非表示 vs 表示None

「なぜdisplay: noneを使わないのか？」と疑問に思うかもしれません。私の好奇心の学徒よ、重要な違いがあります：

プロパティ	視覚的に非表示	表示None
視覚的な外観	非表示	非表示
スクリーンリーダーアクセス	アクセス可能	アクセス不可
DOMの存在	存在する	存在する
レイアウトへの影響	なし	影響あり

như bạn thấy，visually-hiddenは視覚的なアクセシビリティを維持しながら視覚的にコンテンツを隠す方法です。

レスポンシブな可視性

Bootstrapは、画面サイズに基づいて可視性を切り替えるクラスも提供しています。これらのクラスは、視覚的に非表示とレスポンシブデザインの概念を組み合わせています：

.d-none: すべての画面サイズで非表示
.d-{sm,md,lg,xl,xxl}-none: 特定の画面サイズでのみ非表示
.d-{sm,md,lg,xl,xxl}-block: 特定の画面サイズでブロック要素として表示

例えば：

<div class="d-none d-md-block">
このコンテンツは小さな画面では非表示ですが、中程度以上の画面では表示されます。
</div>

結論

そして、若い魔法のウェブ開発者たち！Bootstrapの視覚的に非表示クラスの神秘を解き明かしました。力はありますが、責任もあります。これらの技術を賢く使って、視覚的に魅力的でアクセシブルなウェブサイトを作成しましょう。

私たちのレッスンを終えるにあたり、昔のウェブ開発者が私に言った言葉を思い出します。「ウェブデザインの真の魔法は、見えるものではなく、見えないものにあります。」それでは、実験を続け、すべての人にとって魔法のようなウェブ体験を作成しましょう！

次回のウェブ開発の冒険まで、コードを書き続けて、好奇心を持ち続けてください！

Credits: Image by storyset