■ 改行と段落

コンテンツの主たる表現にテキストは欠かせません。この節では、テキストに関わる様々な手法と作法を解説します。

テキストを改行させる

テキストを強制改行させるには、br要素を用います。ただしこの要素はインラインレベル要素なので、必ずブロックレベル要素中に用いなければなりません。

<div>
テキストをこの位置で<br>
改行させます。
</div>

br要素は、強制改行させるための空要素(エンプティ要素)です。この要素を連続して用い、段落のように見せるのは、厳密には文法違反となります。

ブラウザの自動改行を禁止する

HTML3.2まで利用できた改行を禁止する nobr要素は、HTML4.01では廃棄されました。したがって現在は、HTML規格外とされています。

また、テーブルセルにおける改行禁止の nowrap属性は、非推奨扱いにされています。

<nobr>自動改行を禁止する要素</nobr>     規格外
<td nowrap>自動改行を禁止する属性</td>  非推奨

ブラウザの自動改行を禁止する設定は、スタイルシートの利用が推奨されています。

div { white-space: nowrap }   (CSS設定:推奨)

このスタイルシートで設定されたブロックレベル要素内のテキストは、改行されません。ただし、不意な横スクロールが発生する場合がありますので、コンテンツ全体のバランスに注意しましょう。

段落を設定する

テキスト・コンテンツにおける段落の設定は、p要素で行います。この要素の語源は、Paragraph(段落)から来ています。p要素は、ブロックレベル要素で、この中に他のブロックレベル要素を配置することができません。

また、段落とは異なる意味を持っていますが、汎用ブロックレベル要素の div要素 を用いて、段落の代用とする場合もあります。この要素の大きな特徴として、他のブロックレベル要素を複数配置することができます。

段落の余白を設定する

段落などのブロックレベル要素に余白を設定する方法は、スタイルシートのみ可能です。

余白には、2つの種類があり、

  1. コンテンツの外側に余白を設定する margin属性を用いる
  2. コンテンツの内側に余白を設定する padding属性を用いる

ボックスをイメージした図

margin とは、コンテンツの外側に配置され、コンテンツの持つ背景色などからは除外されます。

padding とは、コンテンツの一部であり、背景色などが含まれます。

つまり、右図のように青い枠線で囲まれた外側の余白が margin、薄い青色の部分が padding となります。

記述法

p { margin: 20px; padding: 1em }

margin、padding の値は、スタイルシートにおけるフォントの大きさの値と同じ単位を使用します。

なお、スタイルシートでは、ほとんどの要素に margin、padding の設定が可能です。



This Page is HTML4.01 Valid! 初版更新日 2003/1/4
Copyright(C) 2002-2003 banban@scollabo.com