HTML文書をそのまま文章として表示する

2016/12/26 ブログ カスタマイズ 0

preコードの装飾

ブログを始めた頃は、HTML文書の編集方法を説明する際に、HTML文書をそのまま画面表示できなくて困りました。文書中のHTMLタグの機能が働いてしまうのです。 この記事はHTML文書を、そのタグ機能を無効にして文章としてそのままブラウザに表示させる方法についてです。

【追記】<pre>と<code>の併用や、cssで背景等を変えて見やすく表示する方法を追記しました。(2015.2.18)

HTML文書がそのまま表示できない

例えば、HTML文書中に『 <br />』があるとタグ機能が働いて改行し、『<br />』という文字は表示されません。『<br />』は文字ではなくマークアップ記号としてブラウザに認識されるからです。
それでは、タグ記号を含む文書(プログラムソースなど）を全て文字としてそのままブラウザに表示させるにはどうすればよいのでしょうか。

HTML文書をそのまま表示する方法

そのまま表示するために加工する

そのまま表示するためには、次の①②の加工をすればよいのです。

①マークアップ記号を実態参照文字に置き換える

実態参照文字とは、『<br />』等のタグ文字をマークアップ記号として解釈されずに本来の文字として表すためのものといえます。

表示したいHTML文書内において、通常以下のタグ記号の変換（置き換え）を行うと、文字として表示されます。

<　 → 　&lt;
> 　→ 　&gt;
&　 → 　&amp;

あと、プログラム言語により必要な場合や半角スペースをそのまま表示したいときは

“　 → 　&quot;
‘　 → 　&apos;
半角スペース　 → 　&nbsp;

先に例にあげた『<br />』タグの場合、文字として表示するには
『&lt; br &nbsp; / &gt;』
とすれば良いのです。

②<pre>タグを追加する

字下げや改行などをそのまま表示にするためには、 <pre>タグを追加します。

<pre>
文字として表示したいHTML文書
</pre>

とすると、<pre>タグに囲まれたHTML文書は、改行や空白等がそのまま表示されます。

タグ記号文字の変換を自動化で簡単に

上記①の変換を一個ずつ行うのは面倒です。自動化できる手段を紹介します。

①サイト

変換を自動的に行う機能を提供してくれているサイトがあります。

②ソフトウエア

変換機能を持ったソフトウエアがあります。
私は「HTML Project2」というフリーソフトを使わせてもらってます。 HTML Project2は非常に優秀で評判の良いHTML用エディタです。詳細はVector　HTML Project2を参照ください。

HTML Project2でタグ記号を変換する

変換したい文書をコピーし、HTML Project2の編集エリアにペーストします。

下図のように、変換したい部分を選択して、[右クリック] （またはメニューの[編集]） -[選択部分の変換]-[&,<,>,”を参照表記に変換]とすれば、選択範囲が変換されます。

HTML_Project2による変換

下図のように変換されますので、これを必要なところにコピー＆ペーストします。

変換後

あと、逆の変換もできますし、[編集]-[元に戻す]で変換前に戻すこともできます。

codeタグや背景色をつけで見やすく【2015.2.18追記】

<code>タグはプログラムなどのコードであることを示し、ブラウザでは等幅フォントで表示されます。インライン要素だけならタグの実態参照文字への変換も必要はありません.。

<pre>タグと<code>タグを併用

この<code>タグと字下げや改行などをそのまま表示にする<pre>タグとを併用する訳です。

<pre>
  <code>
　　　　　文字として表示したいHTML文書
  </code> 
</pre>

とすると、改行や空白等がそのまま表示され、等幅フォントで表示されます。 codeがインライン要素であるため、インライン要素だけならタグの実態参照文字への変換も必要ないのですが、少し複雑な構文でブロック要素タグを使うと変換が必要です。

背景を付けて見やすくする

更にソースを表示している部分の背景を変えて、通常の文章エリアと区別することにより見やすくしたいと思います。 まずdivタグで背景をつけてみました。

<div style="padding:5px5px5px20px;border:none;background-color:#eeeeee;width:500;">
  <pre> 
    <code>
      文字として表示したいHTML文書
     </code>
  </pre>
</div>

すると、このように左右に背景が飛び出てしまいます。
私の使っているFC2のテンプレートではpreタグはcssで90%幅に指定してあるからです。
（現在の環境-WordPress+Simplicity-では症状は出ません）

また、幅を固定値で設定するとスライドバーが出ます。

これらを解決するために、divタブをやめて、直接preタグの表示の仕方をcssで指定することにより、下のように変えることができました。

<pre class="s"> 
  <code>
    文字として表示したいHTML文書
  </code>
</pre>

preタグのディフォールト設定は変えずに、classを
class=”s”　　（ｓは任意の文字列）
と指定して、その設定を下記のように記述します。

/* Preタグ装飾 */
pre.s{
font-family: sans-serif;
width:auto;  /* 幅を自動に */
font-size: 1em;
color: #303030;  /* 文字の色 */
background-color: #f0f0f0;  /* 背景色 */
border: solid 1px #cccccc;  /*境界線の色 */
line-height: 150%;　/*一行の高さ */
margin:0.5em 1em ;  /*上下左右にマージン */
padding: 0.5em;  /*　余白 */
overflow-x: auto;  /*横幅不足時スライドカーソル*/
overflow-y: auto;  /*縦長さ不足時スライドカーソル*/
}

widthとoverflowをautoにすることにより、必要なときだけスライドバーが現れるようになります。
この記述をスタイルシート（css）に追加するのですが、場所はどこでもよく、私は一番下に追加しました。

以上で、ちょっとしたHTMLやスクリプトなら十分になったでしょう。 長いソースプログラムをもっと見やすくするスクリプトもありますが、次の機会にトライしてみます。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。

トップへ戻る