Foundation-可視性クラス

説明

Foundationは、可視性クラスを使用して、デバイスの向き（縦向きと横向き）または画面サイズ（小、中、大、またはx大画面）に基づいて要素を表示または非表示にします。
これにより、ユーザーはブラウジング環境に基づいて要素を使用できます。

次の表に、ブラウジング環境に基づいて要素を制御するFoundationの可視性クラスを示します。

シニア番号	可視性クラスと説明
1	画面サイズで表示 .showクラスを使用して、デバイスに基づいた要素を表示します。
2	画面サイズで非表示 .hideクラスを使用して、デバイスに基づいて要素を非表示にします。

財団は、あなたが使用していないコンテンツを非表示にすることができますいくつかのクラスをサポート.hideと.invisibleページ上のクラスと表示され、何も。

デバイスは、横向きと縦向きの機能を使用して、さまざまな向きを判別できます。携帯電話などのハンドヘルドデバイスは、回転させるときにさまざまな方向を指定します。デスクトップの場合、向きは常に横向きになります。

次の表に、スクリーンリーダーで読みやすくしながら、コンテンツを非表示にするスクリーンリーダーのアクセシビリティ技術を示します。

シニア番号	アクセシビリティクラスと説明
1	スクリーンリーダーに表示 show-for-srクラスを使用してコンテンツを非表示にし、スクリーンリーダーがコンテンツを読み取れないようにします。
2	スクリーンリーダーを非表示にする aria-hidden属性を使用して、テキストを表示しますが、スクリーンリーダーで読み取ることができませんでした。
3	スキップリンクの作成スクリーンリーダーは、サイトのコンテンツへのナビゲーションを取得するためのスキップリンクを作成します。

Foundationは、次のミックスインを使用してCSS出力を表示します。これにより、コンポーネントの独自のクラス構造を構築できます。

シニア番号	Mixinと説明	パラメータ	タイプ
1	show-for デフォルトでは、要素を非表示にし、特定の画面サイズより上に表示します。	$ size	キーワード
2	show-for-only デフォルトでは、要素を非表示にし、ブレークポイント内に表示します。	$ size	キーワード
3	hide-for デフォルトでは、要素を表示し、特定の画面サイズより上に非表示にします。	$ size	キーワード
4	hide-for-only デフォルトでは、要素を表示し、特定の画面サイズより上に非表示にします。	$ size	キーワード

これらすべてのミックスインのデフォルト値はnoneに設定されます。