ホームページ作成(画像を入れたい)
無料!発信中!メール情報誌!

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

ホームページ作成TOP > 画像 > 画像を表示しない様にする

画像を表示しない様にする

画像を表示しない様にする方法です。

使用方法は色々ですが、頻繁に使用されているのがロールオーバーで別々の画像を切り替える場合に、画像を最初から読み込み必要な時に表示させる方法です。

このページでは、サンプルにある様に2通りを説明します。

  • 表示してあるはずの場所も無くなる。
  • 表示してあるはずの場所は残り、画像だけが表示されなくなる。

sample

指定方法の違いを見るために、画像自体は、<p>〜</p>の中に入れて枠線で囲ってあります。

↓指定なし↓

ホームページ作成(画像を表示しない)

display:noneで指定↓

visibility:hiddenで指定↓

HTML 

スタイルシートにて行います。

ホームページ作成TOP > 画像 > 画像を表示しない様にする > このページのTOP ▲

スタイルシート(その1) display:none

画像を表示しない様にするには、display:noneを画像部分に対して指定します。

この方法の場合には、サンプルにある様に表示してあるはずの場所も無くなる様になります。

(サンプルでは、枠線部分だけが残ってます。)

要素に直接書く
書き方は

<img src="画像" width="サイズ" height="サイズ" alt="" style="display:none">

ホームページ作成TOP > 画像 > 画像を表示しない様にする > このページのTOP ▲

headに書く
書き方は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        img  { display:none }

 -->
 </style>
 </head>
 <body>

        <img src="画像" width="サイズ" height="サイズ" alt="">

 </body>
</html>
スタイルシート(その2) visibility:hidden

こちらの方法もvisibility:hiddenを画像部分に対して指定します。

この方法の場合には、サンプルにある様に表示してあるはずの場所は残り、画像だけが表示されなくなります。

(サンプルでは、枠線部分だけが残ってます。)

要素に直接書く
書き方は

<img src="画像" width="サイズ" height="サイズ" alt="" 
style="visibility:hidden">

ホームページ作成TOP > 画像 > 画像を表示しない様にする > このページのTOP ▲

headに書く
書き方は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        img  { visibility:hidden }

 -->
 </style>
 </head>
 <body>

        <img src="画像" width="サイズ" height="サイズ" alt="">

 </body>
</html>

ホームページ作成TOP > 画像 > 画像を表示しない様にする > このページのTOP ▲