Dreamweaverでソースコードをそのまま表示したい時の特殊文字を楽に置換する方法

HTMLのソースコードをそのままブラウザ上で表示したい時があります。
しかし、そのままソースコードを記入してもブラウザ上では表示されません。

タグを無効化(エスケープ)する

HTMLでそのまま表示させるには「&」「<」「>」といった文字をそれぞれ「&amp;」「&lt;」「&gt;」に変換させてタグを無効化(エスケープ)しなくてはなりません。
こういった直接記述しても表示されない文字や記号を表示させる方法を『文字実体参照』と言います。

文字をそれぞれ一括置換するのもいいですが、Dreamweaverならもっと手軽にできます。
その方法は『デザイン』画面の状態で入力すること。

『デザイン』画面で入力すると『コード』画面で自動変換される

Dreamweaverの画面を『デザイン』に切り替えて、その上からコードを入力する。
その後、『コード』画面に切り替える。
すると、入力した文字がそれぞれ自動的に切り替わります。

『デザイン』と『コード』画面を分割して左右に表示させておくと切り替える手間もかかりません。
aタグや変換したい一連のタグを『デザイン』画面にコピペすれば一括で変換されるので便利です。

画面切り替えによるこの自動変化を活用すれば、ソースコードをそのまま表示したい時にいちいち文字を置換する手間が省けます。

なんだかんだで、Dreamweaverは便利です。やり方次第でとても楽ができます。

ただ、私は完全独学で触っているので、こういった機能には少々疎いです。いや、知ってはいたものの、どういう活用をすればいいかまでは至っていなかった、といった方が正しいですね。改めて理解しておかなければと思うばかりです。

サイトを常時SSL化する前準備。アクセストレードのアフィリエイトタグの変更

Dreamweaverのショートカットが作業効率を上げる