シェアする
Indentation Rules for HTML Coding - Japanese Only
みなさまいかがお過ごしでしょうか。
続きまして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です。
続いての記事ではタグを使う目的について解説していきます。引き続き頑張っていきましょう。ではではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
