HTML タグをそのまま表示させる HTML 出力タグ

html タグ そのまま 出力

HTMLコードをそのまま表示させるHTML出力タグに、<pre></pre>や<code></code>といったタグがあり、
<pre><code>〜</code></pre>という形で使用するのが一般的です。

しかし、これらのタグはうまく出力されない場合があります。

pre codeを使う場合

例えば、

<pre><code><strong>強調文字<strong></code></pre>

と記述したとしましょう。
 
 
結果はこうなります。↓

強調文字

HTMLタグがなくなり、強調文字が太字に変換された状態で表示されてしまいます。
(CSSでpreには外枠をつけています。)
 
 
この<pre><code> </pre></code>を使ってHTMLタグそのまま出力させるときは、preを囲う ” < > ” や、スラッシュ ” / ” を特殊文字に変換し、記述する必要があります。
 
正直手間ですよね。
 
 

xmpを使ってみる

特殊文字に変換しないでHTMLタグを出力するとなると、<xmp>があります。廃止される予定のタグですが、<xmp>を使用すると、
↓ ↓ ↓

<strong>強調文字</strong>
↑このようにHTMLタグが表示されます。
 
 
しかし、廃止ということなので、別のタグを使うとなると、<textarea>を使うのも一つの手ではあります。
 

テキスト入力用のtextarea

htmlタグ

<textarea><strong>強調文字</strong></textarea>

 
結果

textareaはテキストを入力するためのもので、ラジオボタンなどで入力された項目をPOST送信し、入力されたものをphpで条件分岐して出力する際に使います。
 
 
この機能を利用してヤフオクツールというのを作っていたので、xmpやtextareaを使用してみたりして試していました。
 
 
textareaを使ってHTMLタグを出力する際、ひとつ注意することがあります。それは、出力したHTMLタグがtextareaの枠の中で編集できてしまうということです。
 
 
上で表示された文字を消してみて下さい。
消せますよね?入力することもできます。
 
 
これを編集できないようにするには、readonly という単語を付け加えることです。

<textarea readonly><strong>強調文字</strong></textarea>

 

 
今度はどうでしょう?編集できなくなりました。
 
 
さらに、cssで枠を消して、背景も白にしてみました。

 
xmpは将来的に非推奨と言われていますが、使えるものは使用する。textareaの枠はCSSで消すこともできるので、用途に応じて使用する。というスタイルで使うと良いでしょう。
 

「HTML タグをそのまま表示させる HTML 出力タグ」への2件のフィードバック

  1. ヤフオクツールを自分用にカスタムして作成したいのですが、
    作り方を詳しく知りたいです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です