HTMLとCSSの関係 | idとclassについて解説

HTMLの基本的なお作法は理解していただけたと思いますが、本記事ではHTMLとCSSを関連づけるためのid属性とclass属性について解説していきます。
ここを理解すれば、あとはCSSで思いのままデザインしていくだけですので、もう少しお付き合いくださいね。

もう一度、HTMLについておさらいした方はこちら

それではさっそくいきましょう。

id、classを追加する
コメントアウト
まとめ

id、classを追加する
コメントアウト
まとめ

id、classを追加する

実際にcssを記述していきます。

HTMLファイル（index.html）内で、スタイルを適用したいタグに対して、idやclassと呼ばれる属性を付与することでstyle.cssと紐付けることができます。

【idとclassの使い分け】
id属性：ページ内で一つしか存在しないデザインパーツに対して付与する。
※ページ内でid属性は一意である必要がある。
class属性：ページ内で繰り返し利用されるデザインパーツに対して付与する。
ページ内でclass属性は重複してもOKで、HTML全てのタグに付与することが可能。

idとclassを付与したイメージがこちらです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="Description" content="コンテンツ">
    <title>ページのタイトル</title>
  </head>
  <body>
    <header id="header">
      <h1>Webサイトの作り方</h1>
      <nav id="header-nav">
        <ul>
          <li>
            <a href="index.html">Home</a>
          </li>
          <li>
            <a href="about.html">About</a>
          </li>
          <li>
            <a href="contact.html">Contact</a>
          </li>
        </ul>
      </nav>
      <img src="img/sea.jpg" alt="海の画像">
    </header>
    <main id="main">
      <div id="main-content">
        <h2>Introduce</h2>
        <p class="int-item int-item-light">Webサイトを作ってみたいけど、何から始めればいいのかわからない、どのくらい費用がかかるのかなどの疑問対して順を追ってわかりやすく解説していきます。</p>
        <p class="int-item">途中つまずくこともあるとは思いますが、本ブログで紹介している知識が身についていると、エンジニアとしても十分通用すること間違いなしですw</p>
        <p class="int-item">百聞は一見にしかず。まずは始めることが大切です。</p>
        <p class="int-item">さっそくこれから一緒にWebサイトを作っていきましょうー</p>
      </div>
    </main>
    <footer id="footer">
      <span>Copyright How to create a website , 2019 All Rights Reserved.</span>
    </footer>
  </body>
</html>

上の例をみていただくとわかると思いますが、headerやmain、footer要素はページの中で基本的に一つだけ定義すれば良いため、それぞれの要素にid属性を付与しています。
class属性については、ページ内で複数使われているコンテンツのp要素に付与してみました。

必ずしもこうすべきということはありませんが、大体の目安として参考にしてみてください。

【class属性を付与するときのルール】
基本的にどんな名前をつけても良いのですが、半角スペースは使用できません。
一般的には、半角英小文字、半角数字、アンダースコア、ハイフンが使用されます。

◾️class属性の書式

<p class="クラス名">Webサイトを作ってみたいけど、・・・順を追ってわかりやすく解説していきます。</p>

◾️class属性は複数のタグに設定できる

<p class="int-item">Webサイトを作ってみたいけど、・・・順を追ってわかりやすく解説していきます。</p>
<p class="int-item">途中つまずくこともあるとは思いますが、・・・</p>

◾️一つのclass属性に複数設定できる（半角スペースを使う）

<p class="int-item int-item-light">Webサイトを作ってみたいけど、・・・順を追ってわかりやすく解説していきます。</p>

【class属性を付与するときのコツ】
命名ルールにしたがっていれば特になんでも良いのですが、自身でcssを作成していく上ではやはりなるべくわかりやすいものにした方が良いです。
例えば、ヘッダーには「header」、ヘッダーのナビゲーションには「header-nav」、メインのコンテンツには「main-content」など、何に対する属性なのかが、付与した値を見るだけで判別できるようにしておきましょう。

コメントアウト

htmlの中でコメントを記述することは意外と重要です。
例えば、編集中に一部だけ表示させたくないなと思った時に、該当箇所をコメントアウトすることで画面に表示させないようにできます。
また、タグの終わりが一目でわかるようにコメントを追加することが多いです。

◾️コメント文を追加する

<nav id="header-nav">
  <ul>
    <li>
      <a href="index.html">Home</a>
    </li>
    <li>
      <a href="about.html">About</a>
    </li>
    <li>
      <a href="contact.html">Contact</a>
    </li>
  </ul>
</nav>
<!--header-nav end-->

の部分がコメントアウトされているところです。

◾️タグをコメントアウトする

<!--
<nav id="header-nav">
  <ul>
    <li>
      <a href="index.html">Home</a>
    </li>
    <li>
      <a href="about.html">About</a>
    </li>
    <li>
      <a href="contact.html">Contact</a>
    </li>
  </ul>
</nav>
-->

このようにタグ自体をで囲むとすべてがコメントアウトされます。

【コメントアウトするときの注意点】
コメントアウトされているものをさらにコメントアウトすることはできないので覚えておきましょう。
具体的には、 -->はNGです。
また、コメントアウトしたとしてもソースコードを確認すれば残っているので注意が必要です。