dl dt ddを利用したインラインフレーム状の「お知らせ」風ウインドウの作り方

dt要素とdd要素にデフォルトで改行が入ることを利用して、インラインフレーム状の「お知らせ」風ウインドウを作ってみます。

tag04.png
tag05.png

[CSS]

dl {
	    width: 450px ;
	    height: 10em ;
	    padding: 0px 1em ;
	    text-align: center ;
	    overflow: auto ;
}

dt {
	    width: 450px ;
	    height: 1.6em ;
	    padding: 0px 1em ;
	    background-color: #8F82F8 ;
}

dd {
	    margin-left: 0px ;
	    width: 450px ;
	    padding: 0px 1em ;
	    font-size: 0.9em ;
	    text-align: left ;
	    background-color: #FDF6DF ;
}

dl要素はデフォルトCSSでは display: block; ですので、サイズを指定して内包するdt要素とdd要素の余剰エリアをスクロールさせます（overflow: auto）。
内容は、用語(dt)とその説明(dd)となりますので、HTML5の定義とフィットします。

[HTML]

<dl>
<dt>平家物語</dt>
<dd>祇園精舎の鐘の声、諸行無常の響きあり、沙羅双樹の花の色、盛者必衰（じょうしゃひっすい）の理（ことわり）をあらはす。驕れる者久しからず、ただ春の夜の夢の如し。猛き人もつひには滅びぬ、ひとへに風の前の塵に同じ。 <br>

遠く異朝（いちょう）をとぶらふに、秦の趙高（ちょうこう）、漢の王莽（おうもう）、梁（りょう）の朱い（しゅい）、唐の禄山（ろくざん）、これらは皆旧主先皇（きゅうしゅせんこう）の政（まつりごと）にも従はず、楽しみを極め、諌め（いさめ）をも思ひ入れず、天下の乱れん事をも悟らずして、民間の憂ふる所を知らざりしかば、久しからずして亡じにし者どもなり。

祇園精舎の鐘の声、諸行無常の響きあり、沙羅双樹の花の色、盛者必衰（じょうしゃひっすい）の理（ことわり）をあらはす。驕れる者久しからず、ただ春の夜の夢の如し。猛き人もつひには滅びぬ、ひとへに風の前の塵に同じ。  </dd>
</dl>

「平家物語」出典：
http://www5f.biglobe.ne.jp/~mind/knowledge/japan3/heike001.html