【HTMLやCSSの字下げは何のためにするのか？】
HTMLやCSSの字下げは何のためにするのか？
HTMLとCSSの基礎からお教えしている生徒さんからこのような質問をいただきました。
字下げとは上の画像のように、プログラムコードの行頭を階層毎に揃える作法を言いますが、何のために字下げするのでしょうか？
「揃えたほうがカッコいいから」などという自己満足で行うのではありません。
本当の理由は、複雑なコードを見通しよくすることによって、多くのデメリットが解消され、多くのメリットが生まれるからです。
もし字下げをしなかったら・・・
<div class="wrapper"><span class="formats-title">貼り付け形式</span><div class="embed-formats nicovideo-formats"><label class="player selected format-left"><input type="radio" name="nicovideo-format" value="player" data-suffix="player" data-ignore-click-jacking="1" checked>動画</label></div>
例えばこのコードを見て、wrapper という class が付いた div の中にボタンを追加したい場合、どこに挿入すればよいか分かりますか？何となく一番最後の＜/div＞を見て「この直前に挿入すればいい」と早合点してしまうと、大間違いです。
このコードには、div の開始タグが2ヶ所ありますが、閉じタグは1箇所しかありません。つまり、本当は div のボックスが2重に入れ子になっていて、外側の div の終わりはこのコードよりも後の方にあるのです。このコードの最後にある＜/div＞は2ヶ所ある div のうち、内側の div の終了位置だからです。
このように、字下げをせずに書いたHTMLは、タグの入れ子構造が非常に読み取り辛くなり、勘違いの元になります。
字下げを整えたコーディングのメリット
字下げを整えるメリットは、
- コードのどこからどこまでが1つの塊なのか、構造を可視化できる
- 修正箇所や不具合の原因を正確に見つけることが可能になる
さらに、仕事としてWebデザインやコーディングを行う場合には
- 行き詰まりを自己解決できることが増え、生産性が向上する
- 自信がつき、より大きな仕事に関わるチャンスが増える
一朝一夕には成し得ませんが、基礎力の底上げは仕事の質・幅の底上げに欠かせない要素です。
何となくコーディングができる人が一番危険です
ブラウザはタグの閉じ忘れがあっても、ある程度は自動的に補ってウェブページを表示してくれます。だからこそ、厳密性を後回しにして「とりあえず見た目が想像通りになればよい」と妥協してきた方は間違いに気付くことが難しく、当てずっぽうで根拠のない箇所を修正してしまい、泥沼に陥ってしまいがちです。
例えば箇条書きを表す li タグは
<ul> <li><a href="...">●●●</a></li> <li><a href="...">●●●</a></li> <li><a href="...">●●●</a></li> </ul>
本来はこのように閉じタグできちんと囲むべきですが、閉じ忘れてこのように書いても
<ul> <li><a href="...">●●●</a> <li><a href="...">●●●</a> <li><a href="...">●●●</a> </ul>
ブラウザは li と次の li との間に閉じタグがなければ「とりあえず次の li の直前に閉じタグ」を挿入して表示してくれます。
ですから、間違った文法を使ってもページが作れてしまうわけです。
タグの省略と同様に、字下げ（インデントと言います）も極めて大切なコーディングの基礎です。字下げを整える習慣を付けておけば、ウェブサイトのように何十ページにも及ぶHTMLやCSSの海を、迷うことなく進むことができます。また、迷っても確かな手掛かりを見つけ出せるための「糸口」になります。
こんな方におすすめのマンツーマンレッスンを行っています
- ホームページの制作経験はあるけれどWordpressやレスポンシブサイトになると分からない方
- HTMLはある程度分っているつもりだけれど仕事で行き詰ってしまうことがある方
- Dreamweaverなどのホームページ制作ソフトに頼ってきたため何も見ずにHTMLを手書きできない方
無料相談だけでも受けてみたい方へ
HTMLやCSSの基礎、ホームページの制作やカスタマイズでお困りの方はお気軽にご相談ください。
↑ページの中ほどにあるオレンジ色の「先生に聞いてみる」というボタンを押すと、メッセージが入力できますので、お気軽にご相談ください。
ご相談のメッセージをいただきましたら２４時間以内にお返事を差し上げます。より詳しい状況をお聞かせいただける方には１時間ほどですがスカイプで無料相談を承りますので、ご遠慮なくお尋ねください。
