インデントで読みやすいソースコードを
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
(X)HTMLのコーディングをする際、階層が深くなってくると、タグの構造がわかりづらくなってくることがあります。divタグなどのようなシンプルなタグならまだいいですが、tableタグが複数からんでくるような場合は、非常に分かりづらくなることもあります。
Webデザイナーが作成するコードは、自分一人だけが読むとは限りません。ですから、できる限り分かりやすく書くことが求められます。分かりやすく書く方法はいろいろあり、例えばグループ内のコーディング規約を遵守する、コメントを残す、インデントを加えるなどが挙げられるでしょう。
このページでは、その中の一つである、インデントについて取り上げてみたいと思います。
インデントとは！？
まず始めに、インデントの意味から説明しましょう。インデントとはずばり字下げのことです。言葉より実際に見てみた方が分かりやすいですね。下記をご覧ください。
<html> <head> <title>初めてのHTML</title> </head> <body> <h1>第一の見出し</h1> <p>ここが第一の段落です。</p> <hr> <p>ここが第二の段落です。</p> <table> <tr> <td>テーブル</td> <td>テーブル</td> </tr> </table> </body> </html>
上記コードの左はしに表示されている白の余白部分がインデントです。今回は極端にインデントを入れてみました。字下げというだけあって、HTMLの階層どおりに文字が下げられており、どのタグがどこからどこまで、というのが視覚的に分かりやすくなっています。
なお、分かりやすくするために色を変えて表現していますが、インデントの実態は、タブまたは半角スペース(スペースの個数は8つだったり4つだったり異なります)です。このどちらかで、エディタ上の文字を下げているんですね。
インデントはタブと半角スペースどっちがいい！？
タブでも半角スペースでもよいインデントですが、どちらがいいのでしょうか。タブによるスペースは、環境によって字下げの大きさが異なるので、半角スペースの方がどの環境でも同じに見えるメリットがあります。タブはその簡易さが魅力と言えるでしょう。
プログラムの世界では半角スペースが推奨されることが多いですが、HTMLにおいてはぶっちゃけどちらでもいいと思います。個人的にはHTMLではタブの方が効率的に思うので、私はタブ派です。
インデントを行う際の注意
完璧に行うと逆効果！？
インデントを覚えると、ついつい完璧に揃えたくなってくるものです。しかし、完璧を求めると、逆にコードが読みづらくなったり、手間がかかったり、微々たるものではありますが無駄にファイルサイズを増やしてしまったりすることもあります。ですから適当に手を抜くことも重要だと思います。 例えば私の場合、次のような簡単なテーブルやリストは、特に理由がない限りインデントしません。
<tr>
<td>簡単なテーブル</td>
<td>簡単なテーブル</td>
</tr>
</table>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
テーブルがネスト（入れ子-例えばタグAの中にタグAを入れること）する場合でも、こんな書き方の方が分かりやすい場合もあります。
<tr>
<td>簡単なテーブル</td>
<td>
<table>
<tr>
<td>簡単なテーブル</td>
</tr>
</table>
</td>
</tr>
</table>
また、headやbodyなど、必ず存在するようなタグにまでインデントすると、人によっては冗長に感じるでしょう。下記のようにしてしまっても、それほど読みづらくなることはありません。逆に私はこの方がスッキリして読みやすいです。
<head>
<title>初めてのHTML</title>
</head>
<body>
<div id="container">
<div id="content">
<div id="main">
<p>ここにメインコンテンツ</p>
</div>
</div>
</div>
</body>
</html>
私の場合は上記のpタグすらインデントしません。メインコンテンツ部分など、頻繁にいじるところの左側がデコボコしていると読みづらい&メンテナンスしづらいのがその理由です。その分コメントなどで読みやすくする配慮をしています。
このあたりはある程度柔軟に対応してもいいでしょう。ただし、組織や開発グループの中で規約がある場合はそれに準じる必要があります。
tableタグのtdに注意
一枚の大きな画像を表示する際、スライスして、tableタグによって分割して表示することがあります。その際、下記のようにインデントを設計すると、空白が出来てしまうことがあります。
<tr>
<td>
<img src="img/a.jpg" width="50" height="50">
</td>
</tr>
<tr>
<td>
<img src="img/a.jpg" width="50" height="50">
</td>
</tr>
</table>
正確にはtdタグ内に改行が含まれていることが原因なのですが、こういった際は、tdタグを下記のように一行で書くとすき間ができません。最近はテーブルレイアウトが少なくなったのであまり出くわすことはあまりないとは思いますが、覚えておくといいでしょう。
ファイルサイズにも影響を与える！？
微々たるものではありますが、当然ながらインデントを多くすればファイルサイズにも影響を与えます。とはいっても、画像とは比較にならないくらいの小さなものです。昨今の高速回線では体感的には全く影響しないでしょう。ですから、ファイルサイズを気にしてインデントを減らす必要はありません。
しかしながら、矛盾しているように感じるかも知れませんが、Webデザイナーたるものファイルサイズを節約する気持ちは大切です。大金持ちになっても無駄金を使わないのとおなじでしょうか（分かりづらい！？）
もちろん、時に富豪的な考え方を持つことも大切だとは思いますが、基本的な意識として、できる限りファイルサイズを減らす思考を持っているといいと思います(※1)。超低速な回線を利用している人や、iPhoneなどPCと比較するとCPUが貧弱な端末を利用している人もいますから、その考え方は無駄になることはないはずです。
※1[ ハイパフォーマンスWebサイト ]という良書を読んでから私も考え方が変わりました。
読みやすいサイトを設計することが大事
インデントをたくさん加えれば、階層構造を分かりやすく表現することが出来ます。しかし、その前に設計自体を見直した方がいい場合もあります。
極論を言えば、美しいコーディングを心がけていれば、極端に読みづらい(X)HTMLにはそうはなりません。例えば、テーブルレイアウトがはやっていた時代は、テーブルを三重くらいにネストすることはよくあったのですが、最近は二重すらあまり無いくらいです。
適切に(X)HTMLでマークアップし、CSSで見栄えを整えていけばコードの見渡しもよくなり、インデントがそこそこでも読みやすくなります。もし入れ子が多くなったり、タグの階層が深くなりすぎたときは、設計自体に誤りがないかを確認するとよいでしょう。
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
コメント
この記事へのコメントはまだありません。
Web制作Tips- デザイン
- ├フリーの写真素材を有効活用しよう
- ├デザイナーならこだわりたいカーニング（文字詰め）
- ├文字のジャンプ率で適切なサイトイメージを演出する
- ├TPOを考えてハズさないフォントを選ぶ
- └失敗しない配色の基本
- ユーザビリティ
- ├そのフォントサイズ、適切ですか？
- ├リンクテキストをわかりやすくする
- ├フォームのリセットボタンを考える
- ├リンク切れ時に適切な404ページを表示をする
- └フォームの確定ボタンは右?左?
- コーディング
- ├文法チェッカーで正しい(X)HTML/CSSを書こう
- ├インデントで読みやすいソースコードを
- ├文字化けを防ぐ&解消する方法
- └背景画像ありのボックスの文字をはみ出させない方法
- その他
- ├ディレクトリ構造は適切に
- └絶対パス?相対パス?ファイルの指定方法いろいろ
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)