HTMLコーディングの際のインデントルール

みなさまいかがお過ごしでしょうか。

続きましてHTMLコーディングの際の注意点についてちょっと学んでいきましょう。

HTMLをコーディングするときやプログラミングを書く時は必要な箇所に『インデント』を入れて読み手に見やすくしなければならないという暗黙のルールがあります。

『インデント』とは文章の行頭に空白を挿入して段をさげる『字下げ』のことを指します。以下のソースをみてみましょう。

<ul><li>猫</li><li>犬</li><li>馬</li></ul>

HTMLのリストとなりますがすべて1行で書かれています。これすごく読みづらいですよね？

どのタブが入れ子になっているのかとか閉じタグの忘れはないかなど視覚的に確認しづらい状態になってしまっています。こんなソースもインデントを入れれば読みやすくなりますので早速やってみましょう。

主なインデントの方法は二種類あり、『半角スペース』を使う場合と『タブ文字』を使用する場合があります。

まずはタブ文字でインデントを行ってみます。

みなさんのキーボードの左端に『tab』って書いてあるキーがありますよね？文字入力状態で『tabキー』を押すとタブ文字というものが入力できます。では『タブ文字』を使ってタグの構造に合わせてインデントをしていきましょう。

<ul>
	<li>猫</li>
	<li>犬</li>
	<li>馬</li>
</ul>

このように同じタグの構造に合わせて文頭を揃えていくと大分読みやすくなりますね。

スペースを使用する場合は半角スペースを2〜8個くらい連続させて視覚的に字下げを行います。連続させる数は偶数個であることが多いです。

<ul>
  <li>猫</li>
  <li>犬</li>
  <li>馬</li>
</ul>

今度は半角スペース2個でインデントを行いました。ウェブサイト上では分かりづらいですが、ソース部分をコピーしてテキストエディタに貼り付けてみてください。タブ文字でインデントされたソースとスペース文字でインデントされたソースの違いがわかるはずです。

インデントを半角スペースで行うかタブ文字で行うかは好みの問題なのでどちらでも構いません。職場の先輩に合わせたり、職場に『コーディングルール』があるならばそれに従って記述すれば大丈夫です。ちなみに私はタブ文字派です。

インデントする際の注意点として、span要素などのインラインレベル要素に改行などを加えると空白スペースが入りこみます。
※インラインレベルについてはこちらの記事にて解説しています。

実際にみてみましょう。

以下のソースをブラウザで表示してみます。

<span>これはspan要素その1だよ</span>
<span>これはspan要素その2だよ</span>

するとこうなりますね。

サンプルをみてみる。

ちょっと文と文の間に隙間があるのがわかりますでしょうか？

逆に一行で記述してみましょう。

<span>これはspan要素その1だよ</span><span>これはspan要素その2だよ</span>

サンプルをみてみる。

こうすると隙間がありません。

これはなぜかというと、HTMLでは連続した半角スペース、タブ文字、改行文字は1つの半角スペースとして表示されるからだったりします。ですので文と文の間に隙間を作りたくない場合は一行で記述するようにしましょう。

そして以下のようにp要素の中でぶら下がった形でインデントをした場合も半角スペースが入ってしまいますので要注意です。以下のサンプルを確認してみましょう。以下はタブ文字でインデントを行っています。

<p>
	これはp要素だよ！
	これはp要素だよ！
	これはp要素だよ！
</p>

サンプルをみてみる。

文と文の間に半角スペースが入っているのが確認できますでしょうか。ドラッグしてみるとわかるかと思います。最初のタブ文字は表示上はなかったことになりますが、レンダリング後のHTML構造としては半角スペースが挿入されている状態になります。HTML構造上で半角スペースがあろうとなかろうと大した問題ではないのでこのインデント方法は間違い、というわけではありません。HTMLの構成によっては上記のようなインデントをした方が読みやすい場合もあるので、そのような場合は上記のようなインデントを行ってもOKです。しかし、半角スペースが挿入されてしまうということだけ忘れないようにしましょう。

インデントについての解説は以上となります。インデントのやり方は様々な方法があり、どれが正しい、どれが間違いというものでもありません。自分一人しか触らないファイルならば自分が読みやすいようにインデントし、『コーディングルール』などが存在するならばそれに従ってインデントを行うようなイメージでOKです。

続いての記事ではタグを使う目的について解説していきます。引き続き頑張っていきましょう。ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア