ホームページ作成/HTML・スタイルシート(CSS)の基礎

HTMLソースを見やすくしたい!

昔に記述した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に改行とインデントを加えて、見やすいソースにしてみましょう。

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

  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます