花

ホームページ講座

このサンプルでは、display属性を使用しています。本来ピンク色の題目はブロックレベルの<h2>で書かれていますが、値をinlineとしたため前後に改行は入りません。displya属性のマジックです。 ところが、ここではインラインレベル要素の<span>がブロックレベル要素として表現されます。色があるので分かりやすいと思います。 本来は一番上に花のPNG画像があるのですが、display属性の値がnoneになっているために、存在がまったくなく、スペースも確保されていません。
BackPage
スタイルシート
img {display:none }
h2 {color:#f3f; display: inline }
.param {display: block; font-weight: bold; background-color: #cff}


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="花">
<h2>ホームページ講座</h2>
このサンプルでは、display属性を使用しています。本来ピンク色の題目は　〜中略〜
<span class="param">ところが、ここではインラインレベル要素の　〜中略〜</span>
本来は一番上に花のPNG画像があるのですが、display属性の値が　〜中略〜

</body>
</html>
BackPage