Latest web development tutorials

財団CSSの可視性

表示素子の画面サイズに応じて

以下のクラスは、表示素子へのデバイス（画面サイズ）に基づいて説明します。

カテゴリ 説明
.SHOW-のための小のみ 小型デバイス（40.0625em未満のスクリーン幅）でのみ表示要素
.SHOW-媒体アップに 媒体および上記のデバイス（40.0625emより大きいスクリーン幅）上の表示要素
.SHOW-のための媒体のみ 唯一の中型デバイス素子（64.0625emする40.0625em間の画面幅）に表示します
.SHOW-大アップのため 大型機器と複数の表示要素（64.0625emよりも大きな画面幅）において、
.SHOW・フォー・大のみ 唯一の大型機器要素（90.0625emする64.0625em間の画面幅）上に表示
.SHOW--XLARGEアップに より大きく、より機器の表示要素（90.0625emよりも大きな画面幅）
.SHOW・フォー・専用XLARGE 唯一のより大きく、より機器要素（120.0625emする90.0625em間の画面幅）上に表示
.SHOW--xxlargeアップに 大型機器と複数の表示要素（120.0625emよりも大きな画面幅）上

次の例では、上記のすべての実証.show-可視性クラスを。 

<p class="show-for-small-only">你在小型设备上。</p>
<p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p>
<p class="show-for-medium-only">你在中型设备上。</p>
<p class="show-for-large-up">你在大型、更大型、超大型的设备上</p>
<p class="show-for-large-only">你在大型设备上。</p>
<p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p>
<p class="show-for-xlarge-only">你在更大型设备上。</p>
<p class="show-for-xxlarge-up">你在超大型设备上。</p>

»をお試しください

画面サイズ隠し要素によれば、

以下のクラスは、要素を非表示にするデバイス（画面サイズ）に基づいて行われます。

カテゴリ 説明
.hide-のための小のみ 小型デバイス（40.0625em未満のスクリーン幅）上の要素のみを隠します
.hide-用媒体アップ 媒体および上記のデバイス（40.0625emよりも画面幅以上）の要素を非表示にします
.hide-用媒体のみ ミッドレンジデバイス（64.0625emする40.0625em間の画面幅）上の要素のみを隠します
.hide-のための大アップ 大規模な、より機器内の要素を非表示にする（64.0625emよりも大きな画面幅）
.hide-用大型専用 大型機器（64.0625emする90.0625em間の画面幅）上の要素のみを隠します
.hide-用-XLARGEアップ より大きく、より機器隠し要素（90.0625emよりも大きな画面幅）において、
.hide-用-XLARGE-のみ より大きく、より機器でのみ隠し要素（120.0625em間の画面幅90.0625em）
.hide-用-xxlargeアップ 大規模な、より設備の隠し要素（120.0625emよりも大きな画面幅） 
<p class="hide-for-small-only">你不在小型设备上。</p>
<p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p>
<p class="hide-for-medium-only">你不在中型设备上。</p>
<p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p>
<p class="hide-for-large-only">你不在大型设备上。</p>
<p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p>
<p class="hide-for-xlarge-only">你不在更大型设备上。</p>
<p class="hide-for-xxlarge-up">你不在超大型设备上。</p>

»をお試しください

画面の向きに応じて表示要素

以下のクラスは、要素を非表示にするデバイス（画面サイズ）に基づいて行われます。

我々は、表示または非表示にするかどうかを、異なる方向に要素を設定することができます。 ノートパソコンや他のデスクトップデバイス、一般的に水平ますが、携帯電話やタブレットデバイスが水平または垂直であることができ、我々は方向性を得るために、ユーザの携帯電話に応じて要素を非表示にし、表示することができます：

カテゴリ 説明
.SHOW・フォー・風景 横方向（縦非表示）で表示要素
.SHOW-のために、肖像画 縦向きで表示要素（横隠されました）

次の例では、使用の方向に応じてテキストの内容を示しています。

例

<Pクラス= "ショーのため -landscape">テキストのみ横方向に表示されます。 </ P>
<Pクラス= "ショーのため -portrait">のみ肖像内のテキスト。 </ P>

»をお試しください

タッチスクリーンディスプレイ装置及び隠し

あなたは、デバイスが隠し要素を表示するには、タッチをサポートしているかどうかに応じてすることができます。

カテゴリ 説明
.SHOW--touch用 タッチスクリーンデバイスのサポート（隠されたデバイスではサポートされません）に表示されます
.hide-用タッチ 隠されたサポートタッチデバイスでは（サポートされているデバイスには表示されません）

デバイスがテキストを表示するには、タッチをサポートしているかどうかに応じて、以下の例：

例

<Pクラス= "ショーのために -タッチ">お使いのデバイスは、タッチスクリーンをサポートしています。 </ P>
<Pクラス= "非表示のために -タッチ">お使いのデバイスは、タッチスクリーンをサポートしていません。 </ P>
»をお試しください