HTML文書は、テキスト内容を"見出し要素" "段落要素" "リスト要素" "リンク要素（ハイパーリンク）"などの"要素"とする考え方を基に、それぞれの要素をタグで囲む（マークアップにより書き表す）文書構造になっています。
■ブロックレベル要素とは・・・？
ひとつのブロック（まとまり）から構成される要素の名称です。
ブロックレベル要素の前後は、要素特性により、段落または改行されます。
■ブロックレベル要素群（abc順）
<address> <blockquote> <center> <div> <dl>
<fieldset> <form> <h1〜h6> <hr> <noframes> <noscript>
<ol> <p> <pre> <table> <ul>
▼
★ テキスト等の段落は p要素 <p>タグ
★ p は 「Paragraph」＝段落の略
テキスト等の段落は、テキストを<p>〜<p>タグで挟むみます。
<p>〜<p>タグで挟まれた前後は、要素特性により段落します。
pタグの終了タグ</p>は、元々省略可能なタグですが、HTML文書の記述が増えてくると、どこからどこまでが文節なのか迷うこともしばしば。
文節の区切りを明確にする意味でも、終了タグは付けるべきではと思います。
例えば・・・テキストを段落要素<p>〜</p>タグで挟むと、次のようになります。（段落したテキストの位置指定は後述）
ブロックレベル要素が発生する前のテキスト行・・・テキスト行・・・
未知の苦HTML解道
未知の苦HTML解道
未知の苦HTML解道
ブロックレベル要素が終了した後のテキスト行・・・テキスト行・・・
▼
段落したテキストの位置指定は[p要素]の中に[align属性]とその値を指定します。
p要素における[align属性]の既定値は、（左揃え[align="left"]のため、そのままでよければ記述不要。
既定値以外の値は、センタリング指定が、[align="center"]、右揃え指定は、[align="right"]と記述します。
要素名と属性の間に半角スペース必須
| |←←←←←←←← 要 素 →→→→→→→→| |
| ↓要素名 P |
↓要素内容 | |
| <p align="center">未知の苦HTML解道</P> |
| |←←属 性→→| | | |
| |←値→| | | |
▼
当サイトの「サイト名の由来」を例に、段落の変化を検証してみます。
サイト名の由来？
スクリプトエラー警告雨嵐、テーブル迷路で右往左往、
手探り書き分けその先はスタイルシートで難所越え・・・? 未知の苦HTML解道 つまず紀行!
◇ソース表示
<h4>サイト名の由来？</h4>
<p>
スクリプトエラー警告雨嵐、テーブル迷路で右往左往、
手探り書き分けその先はスタイルシートで難所越え・・・? 未知の苦HTML解道 つまず紀行!
</p>
▼
内容は伝わるでしょうが"イマイチ"体裁が・・・。そこで見た目の調整をします。
見出しの"サイト名の由来？"をセンターレイアウト。
pタグ内のテキスト全体も改行を加えセンタリング。
サイト名の由来？
スクリプトエラー警告雨嵐、テーブル迷路で右往左往、
手探り書き分けその先はスタイルシートで難所越え・・・?
未知の苦HTML解道 つまず紀行!
◇ソース表示
<h4 align="center">サイト名の由来？<h4>
<p align="center">
スクリプトエラー警告雨嵐、テーブル迷路で右往左往、<br>
手探り書き分けその先はスタイルシートで難所越え・・・?<br>
未知の苦HTML解道 つまず紀行!
</p>
テキストの位置指定をする場合、[align属性]とその値の記述は、HTML定義「HTML4.01 Transitional」では、非推奨属性のため、スタイルシートの設定を推奨しています。
▼
■p要素に挟まれたテキストの位置指定 [text-align属性]
p要素＋スタイルシートを直接記述（インラインスタイル）の場合
左揃え style="text-align:left;"
センタリング style="text-align:center;"
右揃え style="text-align:right;"
▼
左揃えの例
▼
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
センタリングの例
▼
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
右揃えの例
▼
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
▼
※注：要素名と[styleE属性]の間に半角スペース必須
| |←←←←←←←←←←
要 素
→→→→→→→→→| |
| ↓要素名 p |
↓要素内容 | |
| <p style="text-align:center;">未知の苦HTML解道</p> |
| |←←←←属 性→→→→| | | |
| |←←← 値 →→→| | | |
■ブロックレベル要素とインライン要素
The Web KANZAKI様 TOP | やや詳しい目次 |
インターネットやコンピュータの話 | HTMLの説明 >>
簡単なHTMLの説明 | ２文書の骨格となる基本要素 >>
文書の骨格をかたちづくる基本要素 | ブロックとインライン
>> ブロックレベル要素とインライン要素
|
