Latest web development tutorials
×

CSS コース

CSS コース CSS 簡単な紹介 CSS 文法 CSS Id と Class セレクタ CSS 作ります CSS 背景(background) CSS テキスト(text) CSS フォント(Fonts) CSS リンク(link) CSS リストスタイル(ul) CSS テーブル(table) CSS ボックスモデル CSS フレーム(border) CSS 輪郭(outline) CSS マージン(margin) CSS 充填(padding) CSS グループ化とネスト CSS サイズ(Dimension) CSS ディスプレイ(display) CSS 検索します(position) CSS フロート(float) CSS 整列します(align) CSS セレクタの組み合わせ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウンメニュー CSS イメージギャラリー CSS 透視画像/不透明な CSS 画像モザイク技術 CSS メディアタイプ CSS 属性セレクタ CSS サマリー CSS 例

CSS3 コース

CSS3 コース CSS3 簡単な紹介 CSS3 フレーム(border) CSS3 背景 CSS3 段階的変化 CSS3 テキストエフェクト CSS3 フォント CSS3 2D 変更 CSS3 3D 変更 CSS3 トランジション CSS3 アニメーション CSS3 マルチカラム CSS3 ユーザーインターフェース

CSS レスポンシブデザイン

Viewport グリッドビュー メディアクエリ ビデオ(video) フレーム

CSS リファレンスマニュアル

CSS リファレンスマニュアル CSS セレクタ CSS スピーチリファレンス CSS Web セーフフォント CSS アニメーション CSS ユニット CSS カラー CSS カラー値 CSS 色名 CSS 16進数の色

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;}

»をお試しください

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


例

より多くの例

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

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

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

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

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

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