表示しない様にする（非表示）
ある範囲を表示しない様にする方法です。
使い方は様々ですが、サブメニューを非表示にしておき、マウスが重なった時にメニューが出現する様な使い方などが代表的ですね。
ここでは、画像を非表示にする方法だけを解説しますが、下記の様に
- 範囲は残して、非表示になる場合
- 範囲自体も非表示になる場合
の方法によって違いがあります。
↓ この画像を非表示にしていきます。 ↓
↓ 範囲は残して、非表示になる場合（visibility:hidden） ↓
↓ 範囲自体も非表示になる場合（visibility:hidden） ↓
表示しない様にする（非表示）には、スタイルシートを使用してコントロールします。
ホームページ作成ＴＯＰ > レイアウト > 表示しない様にする（非表示） > このページのＴＯＰ ▲
display:none;を使用すると、その対象の範囲も含め、非表示にする事ができます。
使用方法は様々ですが、これを使用する事により『マウスが重なった時に画像を切り替える』などの動作をスムーズにする事が可能になります。
特に指定しない場合、『マウスが重なった時に切り替える画像を取得しに行き、取得後に表示される』といった動作になります。
これでは、動作がスムーズに出来ませんので『マウスが重なってから画像を取得する』のではなく、『画像を読み込み済にして非表示にしておく』その後、『重なった瞬間に表示する』方法にする事でスムーズになります。
この『非表示にしておく』の部分に、display:none;を使用します。
今回のサンプルに関しては、ＴＯＰ > マウスで変化 > ロールオーバー 別々の画像を切り替えるにて説明してますので、確認して下さい。
display:設定;の他の設定として代表的なものが下記になります。
| 設定 | 意味 |
|---|---|
display:block; | ブロック要素に変換する |
display:inline; | インライン要素に変換する |
display:list-item; | リストアイテム要素に変換する |
ホームページ作成ＴＯＰ > レイアウト > 表示しない様にする（非表示） > このページのＴＯＰ ▲
visibility:hidden;を使用すると、その対象の範囲だけは残して（表示したまま）、非表示にする事ができます。
範囲は残りますので、レイアウトはそのままになります。
↑ この画像を非表示↓にすると範囲は残ります。
visibility:設定;には下記の様に設定する事ができます。
| 書き方 | 意味 |
|---|---|
| visibility:visible | 表示する |
| visibility:hidden | 表示しない |
| visibility:inherit | 継承する |
<img src="画像" style="visibility:hidden;">
ホームページ作成ＴＯＰ > レイアウト > 表示しない様にする（非表示） > このページのＴＯＰ ▲
