visibilityの設定サンプル

花 PNG形式で書いた花
PNGは、GIFのように圧縮率が高く、JPEGのように非可逆圧縮ではありません。しかもフルカラー（48ビットまで)を扱えるため、イメージを高画質で扱うことが可能です。

本来は左側に「花」のPNG画像があるのですが、visibility:hidden属性によって表示できない設定になっています。この場合、画像のスペースだけが確保されます。

BackPage
スタイルシート
img { float: left; visibility: hidden }
.pink { color: #f3f; font-weight: bold }


HTMLコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<title>Sample</title>
</head>

<body>
<img src="hana.png" width=200 height=175 alt="花">
<span>PNG形式で書いた花</span><br>
PNGは、GIFのように圧縮率が高く、JPEGのように非可逆圧縮ではありません。〜中略〜

</body>
</html>
BackPage