ホームページ作成(レイアウト調整)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > レイアウト > 表示しない様にする(非表示)

表示しない様にする(非表示)

ある範囲を表示しない様にする方法です。

使い方は様々ですが、サブメニューを非表示にしておき、マウスが重なった時にメニューが出現する様な使い方などが代表的ですね。

ここでは、画像を非表示にする方法だけを解説しますが、下記の様に

  • 範囲は残して、非表示になる場合
  • 範囲自体も非表示になる場合

の方法によって違いがあります。

sample

 ↓ この画像を非表示にしていきます。 ↓ 

ホームページ作成(レイアウト)

 ↓ 範囲は残して、非表示になる場合(visibility:hidden) ↓ 

ホームページ作成(レイアウト)

 ↓ 範囲自体も非表示になる場合(visibility:hidden) ↓ 

ホームページ作成(レイアウト)
HTML 

表示しない様にする(非表示)には、スタイルシートを使用してコントロールします。

ホームページ作成TOP > レイアウト > 表示しない様にする(非表示) > このページのTOP ▲

スタイルシート display:none;

display:none;を使用すると、その対象の範囲も含め、非表示にする事ができます。

使用方法は様々ですが、これを使用する事により『マウスが重なった時に画像を切り替える』などの動作をスムーズにする事が可能になります。

特に指定しない場合、『マウスが重なった時に切り替える画像を取得しに行き、取得後に表示される』といった動作になります。

これでは、動作がスムーズに出来ませんので『マウスが重なってから画像を取得する』のではなく、『画像を読み込み済にして非表示にしておく』その後、『重なった瞬間に表示する』方法にする事でスムーズになります。

この『非表示にしておく』の部分に、display:none;を使用します。

今回のサンプルに関しては、TOP > マウスで変化 > ロールオーバー 別々の画像を切り替えるにて説明してますので、確認して下さい。

display:設定;の他の設定として代表的なものが下記になります。

ホームページ作成TOP > レイアウト > 表示しない様にする(非表示) > このページのTOP ▲

スタイルシート visibility:hidden;

visibility:hidden;を使用すると、その対象の範囲だけは残して(表示したまま)、非表示にする事ができます。

範囲は残りますので、レイアウトはそのままになります。

ホームページ作成(レイアウト)

↑ この画像を非表示↓にすると範囲は残ります。

ホームページ作成(レイアウト)

visibility:設定;には下記の様に設定する事ができます。

書き方意味
visibility:visible表示する
visibility:hidden表示しない
visibility:inherit継承する
要素に直接書く
書き方は

<img src="画像" style="visibility:hidden;">

ホームページ作成TOP > レイアウト > 表示しない様にする(非表示) > このページのTOP ▲