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>を使用すると、
↓ ↓ ↓
↑このように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で消すこともできるので、用途に応じて使用する。というスタイルで使うと良いでしょう。
スポンサードリンク
ヤフオクツールを自分用にカスタムして作成したいのですが、
作り方を詳しく知りたいです。
コメントありがとうございます。^^
良いですよ。