visibilityの設定サンプル

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

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

スタイルシート
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>