HTML文書は、テキスト内容を"見出し要素" "段落要素" "リスト要素" "リンク要素（ハイパーリンク）"などの"要素"とする考え方を基に、それぞれの要素をタグで囲む（マークアップにより書き表す）文書構造になっています。
■ブロックレベル要素とは・・・？
ひとつのブロック（まとまり）から構成される要素の名称です。
ブロックレベル要素の前後は、要素特性により、段落または改行されます。
■ブロックレベル要素群（abc順）
<address> <blockquote> <center> <div> <dl>
<fieldset> <form> <h1〜h6> <hr> <noframes> <noscript>
<ol> <p> <pre> <table> <ul>
▼
★ ドキュメントを入力どおりに表示 <pre>タグ
★ pre は 「Preformatted」＝整形済みの意
ワードなどで文書作成する時に、スペースキーで字下げやエンターキーで改行しますが、"ワープロ文書で作成する時のように、HTML文書内に表示させたい"場合は、<pre>タグで記述します。
<pre"タグで挟まれたュメントは、要素特性により"等幅フォント"で表示されます。
最大の特徴は"空白文字や改行"などを意のままに反映させることができるということです。
例えば当サイトの"PRコメント"をドラッグ ＆ コピーで"HTMLエディタ"に貼り付けると一行に整列してしまいますが、<pre"タグで挟み、空白文字の挿入やエンターキーの改行だけで、元の状態に整形することができます。
下記の作例は、行ごとに一文字分空白文字の挿入を増やし、字下げしてみました。
▼
HTMLのイロハも知らず、
ウェブ素材提供サイト様の
テンプレートをDLしては改造、破壊を繰り返し、
修復不能は日常茶飯事・・・。
心機一転!!
万年初心者脱却紀行。
「™未知の苦HTML解道」
■ソース表示 空白文字の部分を□でイメージしています。
<PRE>
HTMLのイロハも知らず、
□ウェブ素材提供サイト様の
□□テンプレートをDLしては改造、破壊を繰り返し、
□□□修復不能は日常茶飯事・・・。
（エンターキーによる空白の改行）
□□□□心機一転!!
（エンターキーによる空白の改行）
□□□□□万年初心者脱却紀行。
（エンターキーによる空白の改行）
□・・「<SPAN CLASS="aka">™未知の苦HTML解道</SPAN>」
</PRE>
◆[pre要素]は、作図に重宝？
次に、下記の作図のような場合、<table;>タグで表現しようとすると、微妙な空白の加減や調整に少々イライラすることがあるやも・・・。そのような時、<pre;>タグなら、単純に空白文字の挿入やエンターキーの改行で済むところが利点？と思われます。
↓要素名 pre ↓要素内容
<pre>HTMLのイロハも知らず・ ・・・紀行。</pre>
<pre>タグは、整形済み要素と呼ばれています。
国語辞典によると整形"とは、"形を整えること"とあり、
まさに<pre>タグは、スペースキーやエンターキーで整えた形を表現することができる要素と言えます。
■ブロックレベル要素とインラインレベル要素
The Web KANZAKI様 TOP | やや詳しい目次 |
インターネットやコンピュータの話 | HTMLの説明 >>
簡単なHTMLの説明 | ２文書の骨格となる基本要素 >>
文書の骨格をかたちづくる基本要素 | ブロックとインライン
>> ブロックレベル要素とインライン要素
|
