【初心者向け】CSS・HTMLの正しいタグ使ってる？理由をソースコードを使って解説します！

Web製作で必須のスキルとも言えるHTMLとCSS。

主にWebサイトはHTMLとCSSがありますが役割としては以下の通り

まずはWebの構造を司るHTMLでなぜ正しいタグを使う必要があるのかをご紹介。

正しいHTMLタグを使う重要性

HTMLは他のプログラム言語に比べ敷居が非常に低く環境構築も必要ありません。

そのため初心者でも参入しやすい一方、設計をしっかりしないと構造破綻も起きやすい意外と奥の深い言語です。

構造破綻が起きやすくなる

例えば以下のコードをご覧ください。（実話）

<div>
    <div>ここに見出しが入ります。<div>
    <div>ここに記事の内容が入ります。ここに記事の内容が入ります。ここに記事の内容が入ります。</div>
    <div>・注釈を入れる</div>
    <div>・注釈を入れる</div>
    <div>・注釈を入れる</div>
    <div>・注釈を入れる</div>
    <div>・注釈を入れる</div>
    <div>・注釈を入れる</div>
</div>

全てdivタグで製作！

現状10行ぐらいのコードなのでいいですが、コーポレートサイトレベルになると最低でも300行以上となる為、全てdivタグ作られると「可読性が非常に悪い」です。

なので正しいHTMLで書くと以下の通り

<section>
    <h2>ここに見出しが入ります。<h2>
    <p>ここに記事の内容が入ります。ここに記事の内容が入ります。ここに記事の内容が入ります。</p>
    <ul>
        <li>注釈を入れる</li>
        <li>注釈を入れる</li>
        <li>注釈を入れる</li>
        <li>注釈を入れる</li>
        <li>注釈を入れる</li>
    </ul>
</section>

見出しにはhタグ、リストにはulタグを使い「何をしたいのか」を明確にすることが出来ます。

人が見ても何をしてるかタグを見れば明確なので、メンテナンス性にも優れています。

大規模サイトになるほどタグ構造は重要です。

メンテナンスが悪くなる

パッと見で何をしているか分かりにくいコードは後々大変なことになります。

構造が分かりにくいと「タグを追加したら盛大に崩れた」「どこで記述されているか分からない」など解読に時間が掛かります。

クラス名で定義する方法もありますが、そのためには構造がしっかりしているのがベースとなりますので、可読性の高いソースコードを書く必要があります。

大事なのは保守しやすいCSS

理想のCSSとしては以下の通り

• 予測できる・・・ルールが期待通りに動作すること
• 再利用できる・・・パーツが再利用できるように作られていること
• 保守できる・・・コンポーネントを追加・更新・削除した際に壊れてはならない
• 拡張できる・・・大勢の人でコーディングをしても崩れない

<!--ダメな例-->
<div>
    <p><a href="#" class="btn-1">ボタン</a></p>
</div>


<!--正しい例-->
<div>
    <p><a href="#" class="button-red">ボタン</a></p>
</div>

例えば「class=”button-red”」とあれば赤いボタンだと分かるはずです。

可能ならbtnのように省略文字も避けるべきです「btn → button」「txt → text」と定義する方が相手は分かりやすいハズですからね。

このようにクラス名をしっかり付けることで今後の保守や他の人が触る際も安心できます。

意外と当たり前の事のようだが、マークアップエンジニアでも出来てない人がいる程なので是非意識しておくと高品質なコーディングが出来るようになりますね！

まとめ

最後までご覧いただきありがとうございました！

今回はHTMLとCSSについてのご紹介でした。Web製作は入り口は広く初心者でも作ることはできるが極めるとなると様々な知識が必要となります。

ただそこが面白いところでもありますよ！

綺麗なコードを書くには正しいタグを使いこなす必要がありますので、ぜひ基礎から学ぶことをおススメします！

以上、ありがとうございました！