【ホームページ作成】HTMLソースを見やすくしたい！

見やすいソースにしたい

次の2つのHTMLソースを比べてみて下さい。どちらも書かれていることは同じで、果物と野菜の名称を書いた表を作っています。
ソースを見ただけで、どのような表になるのか把握し易いのはどちらでしょうか？

どちらのソースが、より内容を把握しやすいか（見やすいか）は言うまでもないでしょう。
どちらも表示すると次のように見えます。（※スタイルシートで表に枠線を付加しています。）

単純な表ですね。しかし、ソースAを見ただけでこの表を思い浮かべるのは難しいでしょう。 一方、ソースBなら、容易にこの表を思い浮かべることができます。

ちなみに、この表を実現するスタイルシートはこちら。HTMLで作成した表組みに枠線を引いて、表らしく見えるようにしています。

階層構造に合わせてインデントや改行をする

ソースAとソースBでは何が異なるのでしょうか？

• ソースAは、改行位置が適切でなく、階層構造に合わせたインデントがされていません。
  ※インデントとは、行頭に空白を挿入して「字下げ」を行うことです。
• ソースBは、HTMLの構造上キリの良い位置で改行し、HTMLの階層に合わせてインデントしています。 そうすると、ソースがすっきりして見やすくなる上、HTMLの構造が把握しやすくなります。

見やすくて構造が把握しやすいということは、後から修正する必要が出てきた場合でも、「何が書かれているのか？」を深く考えることなく楽に修正できるようになるということです。

改行とインデントで見やすくしてみる

それでは、先ほどのソースAに改行とインデントを加えて、見やすいソースにしてみましょう。

それでは、次のページへ！ →