整形済みテキスト。

整形済みテキスト・目次。

整形済みテキストとは。

整形済みテキストとは、予めマークアップ前に整形してあるテキストの事です。

視覚系ウェブブラウザの通常の整形フォーマット。

通常、視覚系ウェブブラウザは、以下のような規則で文書を整形・表示します。

空白, 水平タブ及び改行が複数個連続した場合、それらは単一の空白に纏められる

つまり、改行を幾ら入れても、改行されて表示される事は無いと言う事です。

また、空白を幾ら並べても意味はありません。

開始タグ直後及び終了タグ直前の半角空白(水平タブ及び改行も含む)は無効にする

古いブラウザでこの実装がおかしかったものがあったようですが、正しくはこのようにタグの前後において空白が無効にされる事になっております。

いわゆる"禁則"に従って適宜折返しを行う

外国語では"禁則"と言う言い方はしませんが、欧米語では単語の途中で折返す事が禁じられているため、適宜単語の前後で折返しになるようにします。

視覚系ウェブブラウザの通常の整形フォーマットでは困る例。

しかしながら、この整形規則を適用されては困る場合もあります。

例えば、以下のような場合があります。

コンピュータ言語のソース
処理の入れ子関係を明確にするため、適宜字下げが行われますが、通常の整形規則を適用すると、字下げが効かなくなってしまいます。
定型詩(短歌, 俳句, 漢詩など)
定型詩の場合も適切な字下げや改行位置がありますが、やはり通常の整形規則ではうまく表示出来ません。

その様なケースに対応するため、HTMLには予め制作者側で整形しておいたテキストを表す要素が用意されております。

それが、<pre>要素です。

<pre>要素 - 整形済みテキスト。

<pre>要素となったテキストは、既に整形されているため、上述の整形規則を適用しない事が許されます。

例えば、視覚系ブラウザなら、<pre>要素の内容は以下のように取扱う事が許されます。

実際、多くの視覚系ブラウザのデフォルトスタイルは、<pre>要素に対してこの様な扱いをしますが、リンクスや一部の携帯端末のように、横スクロールが絶対に許されないブラウザでは横に入り切らない場合は折返しをしたりします。

<pre>要素を使ううえでの注意。

尚、<pre>要素には幾つか注意したい事があります。

<pre>要素の内容はインライン要素に限られます。

<pre>要素自身はブロックレヴェル要素です。

<pre>要素内で使ってはいけないインライン要素があります。

以下の要素は<pre>要素となるテキストの整形を崩す恐れがあるため、<pre>要素には入れられない事になっております。

画像などのマルティメディアを埋込む要素

画像などは個々の大きさがあり、それらを埋め込むとほぼ間違いなく整形が崩れてしまいます。

具体的には以下の要素が挙げられます。

通常と異なる文字の大きさとする要素

通常のフォントサイズと異なるフォントを入れれば、やはり間違いなく整形が崩れます。

具体的には以下の要素が挙げられます。

尚、<basefont>要素は内容を持ちませんが、当該要素より後で文字の大きさが変えられるため同様に禁止の対象となっております。

文字の表示位置が通常と異なる要素。

通常の表示位置と異なる文字を入れれば、やはり整形は崩れてしまいます。

具体的には以下の要素が挙げられます。

<pre>要素内で水平タブは使わないで下さい。

水平タブは多くの場合八桁単位で移動しますが、この値は多くの場合閲覧環境の利用者が変更出来るものです。

閲覧者が水平タブの設定を変更した場合、設定に依っては横方向の位置関係がおかしくなる事があり得ます。

つまり、環境や設定に依っては水平タブが入ると整形が崩れる恐れがある訳です。

< > & 等は実体参照にする事を忘れないで下さい。

< 及び > はタグに使われる記号です。

<pre>要素にも一部のインライン要素のタグが入れられますし、<pre>要素の終了タグも記述する必要があります。

つまり、<pre>要素と言えども、これらの文字を実体参照で記述しなければならない事には変わりが無いと言う訳です。

当然、実体参照が使われると言う事は、> も実体参照で記述する必要がありますね。

<pre>要素の記述例。

以下、<pre>要素の具体的な例を挙げておきます。

コンピュータ言語のソースを整形して記述する場合。
<pre><code>answer=1;</code>
<code>for (i=1;i&lt;=10;++i) {</code>
    <code>answer*=i;</code>
    <code>}</code>
<code>printf ("10! = %d\n",answer);</code></pre>
定型詩を記述する場合。
<pre>田子の浦ゆ
    うち出でて見れば
        真白にぞ
    富士の高嶺に
        雪は降りける</pre>

個人的に注意したい事。

以下は制作者の私見です。

必然性が無い場合に<pre>要素にしてはいけません。

つまり、本来なら段落には<p>要素、順不同リストには<ul>要素などと言うように、適切な論理要素がある筈です。

<pre>要素を用いるべき場合は、通常の整形規則で整形されると拙いテキストを扱う場合に限られると言う事を忘れないで下さい。

特に許されない、<pre>要素に依る縦書き文書。

<pre>要素を使う事で、多くの視覚系ブラウザでは等幅フォントで、しかも改行や空白を入力した通りに表示させます。

だからと言って、縦書き文書を無理矢理<pre>要素で実現させるのはいけません。

非視覚系のユーザエージェントでは、文字はHTML文書の頭から順に読上げていきます。

従って、その様な環境では明らかに意味不明になる筈です。

コンピュータ言語のソースを記述する場合。

コンピュータ言語のソースを<pre>要素で記述する場合、しばしば<code>要素を併用しますし、実際、<pre>要素の記述例にもしばしば<pre>要素と<code>要素を併用したものが使われます。

しかしながら、この二つの要素には特に関係はありません。

制作者はHTMLを学習し始めたときに混乱していたのですが、一応念の為に書いておきますと、

となります。

<code>要素の内部に<pre>要素を記述するのは、インライン要素内にブロックレヴェル要素を記述する文法違反となりますのでご注意を。

<pre>要素への適切なスタイル定義。(参考事項)

多くの視覚系のブラウザでは、<pre>要素の内容が横に入り切らない場合は折返しをせずに横スクロールを発生させます。

一方CSSに依るボックスは、基本的に偶発的な横幅の変更には対応しません(ブロックレヴェル式の場合)。

つまり、<pre>要素に枠線や背景を設定した場合でも、通常の横幅にしか対応せず、多くの場合テキストははみ出してしまいます。

このため、<pre>要素において横幅を決めたスタイルを適用する場合は以下のようにプロパティを適用すると良いでしょう。

pre {
        …
    overflow: auto;
    }

overflow: autoプロパティは、大きさの決まったボックスに内容が入り切らない場合にブラウザが適切な方法で対応すると言うものです。

横幅を決めているボックスの場合、横方向に入り切らない場合にブラウザが適切な措置を執る事になります。

ネットスケープ 4.x, インターネットエクスプローラ4.x及びオペラ 6.x以外のCSS対応ブラウザでは、入り切らない場合に限ってスクロールバーを出してスクロールする事で見られるようにしてくれます。

特定のブラウザに関しては以下の通りになります。

ネットスケープ 4.x

overflowプロパティそのものを認識しません。

横方向に入り切らない場合はボックス自体が押し拡げられてしまいます。

インターネットエクスプローラ 4.x

ウィンドウズ版では一部の要素にのみoverflowプロパティが有効となります。

マッキントッシュ版では一切通用しないようです。

適用されない場合、ボックスを押し拡げて表示させます。

オペラ 6.x

overflow: autoプロパティを当てた場合、入り切らない場合もスクロールバーを出さずにボックスからはみ出した状態に表示させます。

また、現行のCSS仕様に即したブラウザであれば、以下のプロパティを用いる事で、

  1. 空白や改行は有効にしつつも、
  2. 行端では折り返しに表示する

と言う都合の良い表示にする事が出来ます。

white-space: pre-wrap;

行端で折り返してくれれば、枠線からはみ出す心配もありませんね。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com