中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

PREformatted Text

PRE要素は、要素の内容を空白/改行も含め整形されたテキストとして表示する、ブロック要素。

• 要素の内容は IMG、OBJECT、BIG、SMALL、SUB、SUP 要素を除く0個以上のインライン要素のみですが、
  <pre></pre>
  では意味がありません。1個以上のインライン要素が必要です。

W3C → XHTML 1.0 → Multi-part XHTML file → DTDs → XHTML-1.0-Strict より

<!--=================== Preformatted Text ================================-->
<!-- content is %Inline; excluding "img|object|big|small|sub|sup" -->
<!ELEMENT pre %pre.content;>
<!ATTLIST pre
  %attrs;
  xml:space (preserve) #FIXED 'preserve'  >
<!ENTITY % pre.content
   "(#PCDATA | a |%fontstyle; | %special.pre; | %misc.inline;
      | %inline.forms;)*">

xml:space (preserve) #FIXED 'preserve'

XML文書の空白の処理は、UAにまかされていますが、PRE要素はそのまま表示なければいけません。空白をそのまま保持する指定です。省略しても空白をそのまま保持します。

HTML記述

このページのDTD引用部のHTML記述をスタイルシートの修飾無しで表示します。

<pre><code><!--=================== Preformatted Text ================================--><br /><!-- content is %Inline; excluding "img|object|big|small|sub|sup" --><br /><!ELEMENT pre %pre.content;>
<!ATTLIST pre
  %attrs;
  xml:space (preserve) #FIXED 'preserve'  >
<!ENTITY % pre.content
   "(#PCDATA | a |%fontstyle; | %special.pre; | %misc.inline;
      | %)*"></code></pre>

横方向のスクロールが必要でない方は、ブラウザの表示幅を狭めれば確実に横方向のスクロールが必要になります。

私は、横方向のスクロールが必要なページはとても見辛いと思っていますので、スタイルシートでPRE/CODE要素を修飾して、必要に応じて改行するようにしています。

スタイルシート記述

pre,code

{

white-space

:

pre-wrap

;

}

が、white-spaceプロパティが反映されていないUAでは、意味がありません。表示幅を考慮して使用する事が必要だと思います。

このサイトでは、第弐章 HTMLの基本構造 − 其の参 HTML要素 ⇒ 達磨さん？ に、

名前順要素一覧の 冒頭部 に、

と、言い訳を記述しています。