1. Home
  2. CSSの表示（ディスプレイ）と可視性（視認性）

CSSの表示（ディスプレイ）と可視性（視認性）2024 年の最新の入門チュートリアル。このコースでは 隠し要素 - ディスプレイ：noneまたは可視性：隠されました,例,例,CSSの表示 - ブロックとインライン要素,表示素子を変更する方法,例,例,より多くの例, について学習できます。

CSSの表示（ディスプレイ）と可視性（視認性）

要素のプロパティが表示されるように設定されている方法を表示するには、visibility属性は、要素を表示するか非表示であることを指定します。

ボックス1

ボックス2
ボックス3

隠し要素 - ディスプレイ：noneまたは可視性：隠されました

「なし」、または「非表示」にvisibilityプロパティに設定された表示属性で要素を非表示にします。 しかしながら、これらの2つの方法は、異なる結果を生成します、注意してください。

可視性：要素を非表示に隠された、隠された要素は、占領と隠されていないスペースの前と同じまま。 これは、要素が隠されているが、ですが、まだレイアウトに影響を与えます。

例

h1.hidden {visibility:hidden;}

»をお試しください

表示：なし要素を非表示にするには、隠された要素は任意のスペースを取りません。 言い換えれば、この要素は隠されず、元の要素が占める空間は、ページレイアウトから消えます。

例

h1.hidden {display:none;}

»をお試しください

CSSの表示 - ブロックとインライン要素

ブロック要素は、その前後に改行の幅全体を占有し、要素です。

ブロック要素の例：

  • <H1>
  • <P>
  • <DIV>

インライン要素は必要なだけの幅を必要とする、改行を強制するものではありません。

インライン要素の例：

  • <スパン>
  • <A>

表示素子を変更する方法

あなたは、ページの外観が特定の方法の組み合わせであることを確認し、まだWeb標準に従うことができ、ブロック要素とインライン要素、およびその逆を変更することができます。

次の例では、インライン要素としてリスト項目が表示されます。

例

li {display:inline;}

»をお試しください

ブロック要素として次の例スパン要素：

例

span {display:block;}

»をお試しください

注：要素の表示方法を参照するには、表示要素の種類を変更し、それは要素の種類です。たとえば、次のようにディスプレイに設定インライン要素：ブロックは、独自の内部ネストされたブロック要素を持つことが許可されていません。

例

より多くの例

インライン要素を表示する方法。

この例では、要素のインラインで表示する方法を示しています。

どのようにブロック要素を表示します。

この例では、要素のブロック要素を表示する方法を示します。

プロパティの崩壊にテーブルを使用する方法。

この例では、崩壊特性のテーブルを使用する方法を示します。

ホットチュートリアル

お問い合わせ

CSSの表示（ディスプレイ）と可視性（視認性）
10/30