Cascading Style Sheets解説

div要素とspan要素の活用

HTML4には、「要素をグループ化する要素」としてdiv要素とspan要素が用意されています。これらは文書の構造的意味合いを補強するものです。div要素はブロック要素に対して、span要素はインライン要素に対して用いるのですが、表示に関する取り決めはされていません。これら2つの要素とスタイルシートを用いて見掛けの調整をすることも可能です。簡単な例を挙げてみましょう。

目次として、

<p><a href="what.html">スタイルシートとは？</a></p>
<p><a href="influence.html">HTMLでCSSを使うには</a></p>
<p><a href="write.html">書き方</a></p>

というのがあったとします。これをDIV要素で「目次」として意味付けをし、目次全体にスタイル指定をしてみます。まず、以下の様にDIV要素でブロック化します。

<div class="contents">
 <p><a href="what.html">スタイルシートとは？</a></p>
 <p><a href="influence.html">HTMLでCSSを使うには</a></p>
 <p><a href="write.html">書き方</a></p>
</div>

そしてスタイルシートで、

div.contents{
	text-align:center; /* 中央寄せ */
	font-weight:bold; /* 太字に */
	background-color:#ffc; /* 背景色指定 */
	border:ridge 3px #6c9 /* ボーダー指定 */
}

とスタイル指定すれば、

スタイルシートとは？

HTMLでCSSを使うには

書き方

となるわけです。（注：UAによって表示結果が異なることがあります。これは実装の違いであったり、そのプロパティに未対応であったりと色々な原因が考えられます。）

Back(b)