Webページにタグやjsコードを表示する方法

更新日：2023/02/17

Webページにタグを表示しようと思ったが、表示されない。
scriptタグを表示しようと思ったが、src属性のjsファイルが実行されてしまう。
空白や改行が無視される。

などで困った時の対象法をお伝えします。

htmlエンティティのエスケープ

htmlでは < > で囲まれた文字をタグとみなすので、ページ上に表示されません。
表示させるには、< >をhtmlエンティティと呼ばれる & から始まり ; で終わる文字列に置き換える必要があります。

■例

次のようなタグをWebページに表示します。

<div><p><span style="color:red">こんにちは</span></p></div>

<script src="https://note.affi-sapo-sv.com/test.js"></script>

htmlには次のような文字列を記述します。

<div><p><span style="color:red">こんにちは</span></p></div>

<script src="https://note.affi-sapo-sv.com/test.js"></script>

スペースやタブ・改行をそのまま表示したい

html上の改行コードは、通常はWebページに反映されません。

また、行頭と行末（改行は無視）の空白文字は無視されます。
そして文字列間の空白は、一つだけ有効になります。

もし、html上での記述通りにWebページで表示したいときは、次のようにpreタグを使用します。

<pre>
    <div>
        <p>
            <span style="red">こんにちは</style>
        </p>
    </div>
</pre>

スペースや改行が反映されないときは、preに次のスタイルを適用してください。

pre{
    white-space: pre;
}

white-space: pre は次のように要素の右端からはみだすとき折り返しません。

<pre>
    <div>
        <p>
            <span style="red">こんにちは</style>
        </p>
    </div>
</pre>

右端で折り返したいときは、white-space: pre-wrap に変更してください。

pre{
    white-space: pre-wrap;
}

<pre>
    <div>
        <p>
            <span style="red">こんにちは</style>
        </p>
    </div>
</pre>

または、overflow: auto でスクロールバーを表示することも可能です。

pre{
    white-space: pre;
    overflow: auto;
}

<pre>
    <div>
        <p>
            <span style="red">こんにちは</style>
        </p>
    </div>
</pre>

ツールでエンティティ変換する

手作業で文字をエンティティに書き換えるのは、手間がかかるだけでなく間違える可能性が非常に大きいのでおススメできません。

そこで、『HTMLエンティティ変換ツール』を作成しました。

リンク先は次のような画面になっています。

右側のボックスに変換したい文字列を貼り付けると、その内容がHTMLエンティティに変換されて左側に表示されます。

クリップボードにコピーして、preタグ内に貼り付けてください。

これだけでＯｋです。
便利ですよ。

以上、ツールの宣伝記事でした。

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。