掲載日： 2005年 05月 31日
HTMLソースを見やすくしたい！
見やすいソースにしたい
次の2つのHTMLソースを比べてみて下さい。どちらも書かれていることは同じで、果物と野菜の名称を書いた表を作っています。
ソースを見ただけで、どのような表になるのか把握し易いのはどちらでしょうか？
| ソースA | ソースB |
|---|---|
|
<table> <tr><th>果物</th> <th>野菜</th></tr> <tr><td>みかん</td> <td>にんじん</td></tr><tr> <td>りんご</td> <td>なす</td></tr> </table> |
<table> <tr> <th>果物</th> <th>野菜</th> </tr> <tr> <td>みかん</td> <td>にんじん</td> </tr> <tr> <td>りんご</td> <td>なす</td> </tr> </table> |
どちらのソースが、より内容を把握しやすいか（見やすいか）は言うまでもないでしょう。
どちらも表示すると次のように見えます。
※スタイルシートで表に枠線を付加しています。
| 果物 | 野菜 |
|---|---|
| みかん | にんじん |
| りんご | なす |
単純な表ですね。しかし、ソースAを見ただけでこの表を思い浮かべるのは難しいでしょう。
一方、ソースBなら、容易にこの表を思い浮かべることができます。
※ちなみに、この表を実現するスタイルシートはこちら。HTMLで作成した表組みに枠線を引いて、表らしく見えるようにしています。
階層構造に合わせてインデントや改行をする
ソースAとソースBでは何が異なるのでしょうか？
ソースAは、改行位置が適切でなく、階層構造に合わせたインデント※がされていません。
※インデントとは、行頭に空白を挿入して「字下げ」を行うことです。
ソースBは、HTMLの構造上キリの良い位置で改行し、HTMLの階層に合わせてインデントしています。 そうすると、ソースがすっきりして見やすくなる上、HTMLの構造が把握しやすくなります。
見やすくて構造が把握しやすいということは、後から修正する必要が出てきた場合でも、「何が書かれているのか？」を深く考えることなく楽に修正できるようになるということです。
改行とインデントで見やすくしてみる
それでは、先ほどのソースAに改行とインデントを加えて、見やすいソースにしてみましょう。
| ★関連記事・リンク |
- HTML作成講座（リンク集）
