コーディング犬に聞く：「HTMLを綺麗に書くコツは？」
HTMLを書き始めたばかりの頃。
とりあえず表示できればOK。
そう思っていませんか？
実は、HTMLは
「動くこと」
だけではなく、
「読みやすいこと」
も非常に重要です。
特に仕事になると、
数か月後の自分や他のコーダーが修正することになります。
今回は、
「HTMLを綺麗に書くコツ」
をコーディング犬に聞いてみました。
Q. HTMLが綺麗ってどういうこと？
「人が見て分かりやすいことだよ！」
例えば、
<div>
<div>
<div>
<h2>タイトル</h2>
<p>説明文</p>
</div>
</div>
</div>これでも表示はできます。
でも、
何のブロックなのか分かりません。
一方で、
<section class="service">
<h2>サービス紹介</h2>
<p>説明文</p>
</section>なら、
何のエリアなのかすぐ分かります。
Q. 一番大事なことは？
「意味が伝わるHTMLを書くこと！」
HTMLには、
<header>
<nav>
<main>
<section>
<article>
<footer>など、
意味を持つタグがあります。
これを
「セマンティックタグ」
と言います。
Q. divばかりじゃダメ？
「ダメではないけど読みにくい！」
例えば、
<div class="header">より、
<header>の方が、
一目で分かります。
Q. インデントって必要？
「絶対必要！」
悪い例。
<section>
<h2>タイトル</h2>
<p>説明文</p>
</section>良い例。
<section>
<h2>タイトル</h2>
<p>説明文</p>
</section>これだけで、
見やすさが全然違います。
Q. class名はどう付ける？
「見た目じゃなく役割で考えよう！」
悪い例。
<div class="red">
<div class="big">後で色が変わったら困ります。
良い例。
<div class="service">
<div class="service_title">役割で付けると、
修正が楽になります。
Q. コメントは書いた方がいい？
「大きなブロックには書こう！」
例えば、
<!-- サービス紹介 -->
<section class="service"><!-- お問い合わせ -->
<section class="contact">こうしておくと、
後から探しやすくなります。
Q. hタグはどう使う？
「順番が大事！」
例えば、
<h1>
<h3>
<h5>みたいに飛ばすのはおすすめしません。
基本は、
<h1>
<h2>
<h3>の順番です。
本の目次と同じです。
Q. 無駄なdivを減らした方がいい？
「減らせるなら減らそう！」
例えば、
<div>
<div>
<div>
テキスト
</div>
</div>
</div>これは通称、
「div地獄」
です。
最近は、
flexやgridのおかげで、
かなりシンプルに書けます。
Q. 改行や空白は揃えるべき？
「チーム制作なら特に重要！」
例えば、
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>のように統一すると、
誰が見ても読みやすいです。
Q. 初心者がやりがちなミスは？
「とりあえず動けばOKになること。」
例えば、
- divだらけ
- class名が適当
- インデントなし
- hタグの順番がバラバラ
これは初心者あるあるです。
でも、
コードは書く時間より、
読む時間の方が長いです。
だから読みやすさが重要なんです。
Q. プロは何を意識してる？
「未来の自分が見ても分かるコード。」
例えば半年後。
自分で作ったサイトを見て、
なんだこのclass名…となることがあります。
綺麗なHTMLは、
未来の自分へのプレゼントです。
まとめ
HTMLを綺麗に書くコツは、
難しいテクニックではありません。
大切なのは、
- セマンティックタグを使う
- インデントを揃える
- class名を分かりやすくする
- hタグを正しく使う
- divを増やしすぎない
- コメントを活用する
ことです。
HTMLは、
「表示させるためのコード」
ではなく、
「人が読むコード」
でもあります。
初心者のうちから綺麗なHTMLを意識すると、
CSSもJavaScriptも理解しやすくなります。
コーディング犬との約束です。
