TOPBack > Place

整形済み表示

◆ 文字の空白や改行をそのまま表示

整形済みテキストと言われるものでテキスト内に書いた文字・空白・改行をそのまま表示します。
<PRE>〜〜〜</PRE>の囲まれた部分が表示します。
例えば、サンプルソースやアスキーアート等を表示する場合に記述します。

<PRE>要素に挟める要素は限られるため普通に使用できません。
使える要素は、A|ABBR|ACRONYM|B|BDO|BR|CITE|CODE|DFN|EM|I|INPUT|KBD|LABEL|MAP|Q|SAMP|SCRIPT|SELECT|SPAN|STRONG|TEXTAREA|TT|U|VAR です。

<pre>
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=Shift_JIS&quot;&gt;
  &lt;title&gt;タイトル&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;&lt;!--
    body{color:#000000;background-color:#ffffff;}
--&gt;&lt;/style&gt;
&lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;
	&lt;h1&gt;見出し&lt;/h1&gt;
	  &lt;h1&gt;段落&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

表示結果:下のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title>タイトル</title>
<style type="text/css"><!--
    body{color:#000000;background-color:#ffffff;}
--></style>
</head>
  <body>
    <div>
	<h1>見出し</h1>
	  <h1>段落</h1>
    </div>
  </body>
</html>

アスキーアート

                ∧_∧   / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ 
               ( ・∀・)< もうご飯なの? もう少しやるよ!
             _φ___⊂)    \_______________ 
           /旦/三/ /| 
        | ̄ ̄ ̄ ̄ ̄| | 
        |熊本みかん|/ 

下のようにも整形できます。


矢矢
 矢矢
  
     愛       愛
    ハート     ハート
   ハート ハート ハート ハート
  ハート    ハート    ハート  
 ハート             ハート
 ハート             ハート
 ハート            ハート
  ハート          ハート
   ハート        ハート
     ハート     ート
      ハート   ハー
       ハート ハート 
        ハートです   
         ハート    矢矢矢
          心      矢矢
                  
 

縦書きも出来ます。ただし、手間暇も掛かりますし、音声ブラウザのことを考えるとお勧めできません。

     オ マ   し      子
     ム マ パ か 今  四 育
   お ツ は パ し 日  月 て
   願 じ   じ ・    一 日
   い ゃ マ ゃ ・ や  日 記
 呼 だ な ァ な ・ っ    
 ば か い マ く   と    
 れ ら の な     ▼    
 た   だ の フ   パ
 い せ ょ に ァ   パ
 ・ め ・   |   と    
 ・ て ・ な フ   呼
 ・ フ ・ ぜ ァ   ん
   ァ   か で   で
   フ   フ あ   く
   ァ   ァ る   れ
   と   | ・   た
       フ ・   !
       ァ ・    

▲up


タグ解説


PRE

整形済み表示:

HTML の文章の中に<PRE>タグを使うと記述したテキストがスペース・タブ・改行をそのまま表示します。
上記参照


 【←BACK
Copyright (c) Producer by System KS. 2001 All rights reserved.