HTML文を見やすく表記するには。

質問

HTML文を見やすく表記するには。
こんにちは。
Javascript等を挿入しHTML文を修正していますが、HTML文が見にくくなって困っています。
--------------------------------
【現在】
<div
style="Z-INDEX: 5; POSITION: absolute; WIDTH: 250px; HEIGHT: 80px; VISIBILITY: hidden; TOP: 360px; LEFT: 90px"
id="MapExplrtn"><font color="#000088" size="4"><b>Australia NorthEast
Area</b></font></div><map id="Prtmap" name="Prtmap"><area shape="rect" alt="Australia"
coords="20,50,150,100"><area shape="rect" alt="ここだよ。Byともよ"
coords="250,80,350,130"></map>

【下記のように変えたい】
<div
style="Z-INDEX: 5; POSITION: absolute; WIDTH: 250px; HEIGHT: 80px; VISIBILITY: hidden; TOP: 360px; LEFT: 90px" id="MapExplrtn"><font color="#000088" size="4"><b>Australia NorthEast
Area</b></font></div>
<map id="Prtmap" name="Prtmap">
<area shape="rect" alt="Australia" coords="20,50,150,100">
<area shape="rect" alt="ここだよ。Byともよ" coords="250,80,350,130"></map>
--------------------------------
このように表記できないと、修正作業が大変なんです。

実際のsourceは、
http://ktskn.web.fc2.com/JavaSample_Englsh_04.htm
ここの８８行目となっております。

回答No.3

fujillin

No1様同様に、意味が把握できてませんが…

ソースに限って言うならば、CSSが使用可能みたいなのでうまく利用すれば、

<div id="MapExplrtn">Australia NorthEast Area</div>
<map id="Prtmap" name="Prtmap">
　　<area shape="rect" alt="Australia" coords="20,50,150,100">
　　<area shape="rect" alt="ここだよ。Byともよ" coords="250,80,350,130">
</map>
くらいにはなりそうですけど？
（他の部分も同様。ただし全体に修正が必要。）
でも、これはあくまでもソースの話なので、ソースをいかに作成するかということになります。

＞Javascript等を挿入しHTML文を修正していますが、
＞HTML文が見にくくなって困っています。
スクリプトでソースを（というかDOMを）修正しても、ソースには反映されないはずですけれど？
それとも、JScriptなどで書き直してから、ファイルに吐き出しているとかなのかなぁ？

回答No.2

ORUKA1951

なんか変なソフトを使って作ってませんか？
きちんとソースを書けば済む話だと思うけど。
<div style="Z-INDEX: 5; POSITION: absolute; WIDTH: 250px;
　　　　HEIGHT: 80px; VISIBILITY: hidden; TOP: 360px; LEFT: 90px"
　　　　id="MapExplrtn">
　　<span style="color:#000088;font-size:large;font-weight:bold">
　　　　Australia NorthEast Area
　　</span>
</div>
<map id="Prtmap" name="Prtmap">
　　<area shape="rect" alt="Australia"
　　　　　coords="20,50,150,100">
　　<area shape="rect" alt="ここだよ。Byともよ"
　　　　　coords="250,80,350,130">
</map>

と・・・HTMLの仕様上、連続する空白文字はマークアップ間では無視されるし、内部では一文字に置き換えられる。
【上記はこの掲示板の仕様上タブは全角空白で置き換えてある。】

回答No.1

nekohigex

> Javascript等を挿入しHTML文を修正していますが、HTML文が見にくくなって困っています。

「JavaScriptを挿入する」という部分と「HTMLを修正する」という部分がよくわかりません。
これは、

『HTMLの一部をJavaScriptで生成している。JavaScriptで生成した部分をブラウザの「ソースを表示」で表示させたところ、改行が入っていないため読みにくい。このままでは修正作業が大変なので、適度に改行を入れる方法を教えてほしい。』

という意味でしょうか？それとも

『HTMLの中にJavaScriptを挿入し、HTMLとJavaScriptが混在するドキュメントを作成した。JavaScriptは文章を連結する際に+記号を使ったり、文字を扱う場合に""で括るなどの文法規則が多い。このため、HTMLだけで記述したドキュメントと比べてドキュメント全体が読みにくい。HTMLとJavaScriptを分けて記載する方法があれば教えてほしい』

という意味でしょうか？それとも

『HTMLで作成されているドキュメントがある。このドキュメントの一部をJavaScriptのDOMアクセスを使って動的に修正（置換・削除）している。DOMアクセスで修正した部分は元のドキュメントの属性を書き換えることがあるため読みにくい。属性の衝突を避ける方法があれば教えてほしい』

という意味でしょうか？

お礼

３名の方、ご回答をいただきありがとうございます。
------------------------------------
<div id="MapExplrtn">Australia NorthEast Area</div>

<map id="Prtmap" name="Prtmap">
　　<area shape="rect" alt="Australia" coords="20,50,150,100">
　　<area shape="rect" alt="ここだよ。Byともよ" coords="250,80,350,130">
</map>
------------------------------------
まさに、こんな風にいつもEditor上で表示されたら－とてもうれしいです。
現在はαeditというFreeのEditorを使用してＨＴＭＬ文を修正したり、Javaを記述したりしています。
ところが、Tabキーや空白スペースキーで上記のように文を整頓しても
このＨＴＭＬファイルを上書き保存したりすると、
------------------------------------
<div
id="MapExplrtn">Australia NorthEast Area</div><map id="Prtmap"
name="Prtmap"><area shape="rect" alt="Australia" coords="20,50,150,100"><area
shape="rect" alt="ここだよ。Byともよ" coords="250,80,350,130"></map>
------------------------------------
と、こんな風に崩れてしまいます。
　なお、JavaでＨＴＭＬを生成できるレベルには僕はまだ達していません。

補足

http://ktskn.web.fc2.com/JavaSample_Englsh_04.htm
のソース３５行目
------------------------
<div
style="Z-INDEX: 5; POSITION: absolute; WIDTH: 250px; HEIGHT: 80px; VISIBILITY: hidden; TOP: 270px; LEFT: 14px"
id="plane"><font color="#004000" size="4">Japan Air Lines flight-214</font></div><a
onmouseout="Lay_View('reception','hidden');"
onclick="Lay_View('reception','visible');"><img border="0" name="5_s.jpg" hspace="20"
src="image/immigration_s.jpg" width="120" height="108"> </a>
------------------------
についても、
------------------------
<div style="Z-INDEX: 5; POSITION: absolute; WIDTH: 250px; HEIGHT: 80px;
VISIBILITY: hidden;TOP: 270px; LEFT: 14px" id="plane">
<font color="#004000" size="4">Japan Air Lines flight-214</font></div>

<a onmouseout="Lay_View('reception','hidden');"
onclick="Lay_View('reception','visible');">
<img border="0" name="5_s.jpg" hspace="20" src="image/immigration_s.jpg"
width="120" height="108"> </a>
------------------------
常にこのようにEditorに表示できないでしょうか？