visibilityはHTML要素の表示・非表示を指定するCSSプロパティです。この記事ではvisibilityの使い方を紹介します。

書式

visibility: property;
property

表示するか否かを以下の値の中から指定します。

意味
visible表示する(規定値)
hidden要素及びその子孫の要素を表示しない。要素があるスペースには余白が生じる。
inherit継承

「visibility:hidden」は要素を表示しないが、余白が生まれる。余白も無くしたい場合は、「display:none」を使用する。

visivilityの使用例と表示サンプル

スタイルシート属性visibilityを使用したHTMLの例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

Here is <span style="visibility:visible">visible</span> element.

Here is visible element.

Here is <span style="visibility:hidden">hidden</span> element.

Here is hidden element.

JavaScript

JavaScriptからCSSプロパティ「visibility」を参照・設定するには、Elementオブジェクトのstyleプロパティを使う。

document.getElementById("foo").style.visibility = "hidden";
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送