HTMLクイックリファレンス

トップページ HTMLタグ(ABC順) スタイルシート(ABC順) レンタルサーバー比較
優良デザイン HTMLタグ(目的別) スタイルシート(目的別) JavaScript(制作中)
WEBカラー WEB画像 特殊文字 その他..

トップページ > スタイルシートリファレンス > visibility

★スタイルシートリファレンス

visibility・・・・・ボックスの表示・非表示を指定する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7 Netscape6Netscape7 Opera6Opera7Opera8Opera9 Firefox1Firefox2

visibilityプロパティは、ボックスの表示・非表示を指定する際に使用します。 非表示にした場合にも、ボックス自体がなくなってしまうわけではなく、表示・非表示を切り替えてもページのレイアウトは変わりません。

尚、ボックス自体をなくしてしまいたい場合には、displayプロパティでnoneを指定します。

■値

visible
ボックスを表示します。
hidden
ボックスを非表示にします。
collapse
テーブル(表)の行や列にこの値を指定すると、その部分を詰めて表示します。

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

img.sample1 {visibility: hidden; }
img.sample2 {visibility: visible; }

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<img src="../images/img001.gif" class="sample1" alt="サンプル画像"><br>
<img src="../images/img001.gif" class="sample2" alt="サンプル画像">
</body>
</html>
↓↓↓

ブラウザ上の表示

サンプル画像
サンプル画像

■関連項目

overflow・・・・・・・・・・・・・・・・はみ出た内容の表示方法を指定する
overflow-x・・・・・・・・・・・・・はみ出た内容の表示方法を指定する(IE独自の仕様)
overflow-y・・・・・・・・・・・・・はみ出た内容の表示方法を指定する(IE独自の仕様)
position・・・・・・・・・・・・・・・・ボックスの配置方法(基準位置)を指定する
top・・・・・・・・・・・・・・・・・・・・上からの配置位置(距離)を指定する
bottom・・・・・・・・・・・・・・・・下からの配置位置(距離)を指定する
left・・・・・・・・・・・・・・・・・・・・左からの配置位置(距離)を指定する
right・・・・・・・・・・・・・・・・・・・右からの配置位置(距離)を指定する
display・・・・・・・・・・・・・・・・・要素の表示形式(ブロック・インライン)を指定する
float・・・・・・・・・・・・・・・・・・・左または右に寄せて配置する
clear・・・・・・・・・・・・・・・・・・・・回り込みを解除する
z-index・・・・・・・・・・・・・・・・・・重なりの順序を指定する
visibility・・・・・・・・・・・・・・・・・ボックスの表示・非表示を指定する
clip・・・・・・・・・・・・・・・・・・・・・ボックスを切り抜き表示(クリッピング)する
direction・・・・・・・・・・・・・・・・文字表記の方向(左右)を指定する
unicode-bidi・・・・・・・・・・・・・Unicodeの文字表記の方向を上書きする
writing-mode・・・・・・・・・・・・文字表記の方向(縦横)を指定する(IE独自の仕様)

▲ページ先頭へ
トップページ > スタイルシートリファレンス > visibility

HTMLクイックリファレンス

トップページ HTMLタグ(ABC順) スタイルシート(ABC順) レンタルサーバー比較
優良デザイン HTMLタグ(目的別) スタイルシート(目的別) JavaScript(制作中)
WEBカラー WEB画像 特殊文字 その他..
HTMLクイックリファレンスについて
©2008 HTMQ