ミニマリストアローンのブログ

【ツールで簡単】HTMLソースコードをブラウザ上で表示させる方法

BLOG

HTMLのソースコードを表示させたい人「HTMLコードを搭載したいんだけど、ブラウザ上だと勝手に変換されて無理じゃん…。みんなどうやってるんだろう?」

こういった疑問に答えていきます。

本記事の内容

スポンサードサーチ

HTMLソースコードをブラウザ上で表示させる方法【エスケープツールを使う】

HTMLソースコードをブラウザ上で表示させる方法【エスケープツールを使う】
HTMLコードは、ブラウザ上だと勝手に認識し、変換されてしまいます。
例えば下記のようなソースコードを表示させたい時。
HTMLソースコード
これを、ただ直接貼ると、、、

  • 1つ目の箇条書きリスト
  • 2つ目の箇条書きリスト
  • 3つ目の箇条書きリスト

こんな感じに普通の箇条書きリストになってしまい、ソースコードは表示されません。
ソースコードの書かれた画像を搭載するという手もありますが、それだとコピペができなくて不便…。

そんな時にはWeb制作小物ツールの、HTMLエスケープツールを使います。

Web制作小物ツールを使う

Web制作小物ツールを使って、HTMLコードを変換させる方法を使います。
下記のとおり。
Web制作小物ツールの使い方
変換すると、、、
Web制作小物ツールの使い方
変換後、このように特殊文字が生成されるので、それをコピーして貼り付ければOKです。

変換前

  • 1つ目の箇条書きリスト
  • 2つ目の箇条書きリスト
  • 3つ目の箇条書きリスト

これだとそのまんまだけど、、、

変換後

<ul>
	<li>1つ目の箇条書きリスト</li>
	<li>2つ目の箇条書きリスト</li>
	<li>3つ目の箇条書きリスト</li>
</ul>

無事、ソースコードを表示させることに成功しました!
これだと、コピペもできて便利ですよね。

まとめ

以上、HTMLコードを表示させる方法でした。
このエスケープツールは、僕もよく使わせてもらっていて、とても助かっています。

簡単に使えるので、みなさんも是非、試してみてください。
» Web制作小物ツール

人気記事Amazonアソシエイトに落ちる?【もしもアフィリエイトで解決します】

人気記事【2019年】ミニマリストが買ってよかった物&手放してよかった物

スポンサードサーチ