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

HTMLソースを見やすくしたい!(2ページ目)

昔に記述したHTMLを修正しようと思ったとき、「このソースは一体どこに何が記述されているの??」と悩んだ経験はありませんか? 後から読んでもすぐに内容を把握できる、分かりやすいソースを書く方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

STEP.1改行を加える

まずは、HTMLの構造上、キリの良い位置で改行してみます。

<table>
<tr>
<th>果物</th>
<th>野菜</th>
</tr>
<tr>
<td>みかん</td>
<td>にんじん</td>
</tr>
<tr>
<td>りんご</td>
<td>なす</td>
</tr>
</table>

少しすっきりしましたね。 しかし、これではまだ階層構造がどうなっているのか、イマイチ把握できません。

STEP.2インデントを加える

そこで、階層構造に合わせてインデントをしてみましょう。

<table>
<tr>
   <th>果物</th>
   <th>野菜</th>
</tr>
<tr>
   <td>みかん</td>
   <td>にんじん</td>
</tr>
<tr>
   <td>りんご</td>
   <td>なす</td>
</tr>
</table>

これはまさに、ソースBですね。 階層構造がしっかり表現できたソースになりました。これなら、ソースを見るだけで、だいたいの表示が想像できるでしょう。

なお、もっと厳密に階層を表現するなら、次のようにも書けるでしょう。

<table>
   <tr>
      <th>果物</th>
      <th>野菜</th>
   </tr>
   <tr>
      <td>みかん</td>
      <td>にんじん</td>
   </tr>
   <tr>
      <td>りんご</td>
      <td>なす</td>
   </tr>
</table>

※table要素は、表組みの最初と最後に1度しか出てきませんので、table要素の直下の要素(tr要素)はインデントしなくても見にくくはならないと考え、ソースBではインデントしませんでした。 あまり厳密に階層をインデントで表すと、ソースがスカスカになったり縦に長くなったりして、全体が見渡しにくくなる可能性もあります。 その辺は、ソースの長さや本文の混み具合などから臨機応変に考えれば良いでしょう。

適切な改行とインデントで見やすく!

HTMLは、あとから修正する必要が出てくることもよくあります。 「このソースは一体何を記述しているのか?」と頭を悩まさなくても済むように、 普段から、読みやすくて分かりやすいソースを書くよう心がけておくと良いでしょう。

インデントは、半角スペースを数個入れても構いませんが、[TAB]キーを使ってタブを挿入する方が楽です。 また、タブの方が(半角スペースを何個も入れるより)ファイルサイズが少なくて済みます。

関連記事・リンク

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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