Zenn
💻

Web担当者必見！HTML/CSS/JavaScriptの基礎を改めて正しく理解する【idとclassってどう違うの？】

2020/01/27に公開
基礎
tech

こんにちは、たつきちです。

Web業界に8年以上いますが、HTMLやCSSの本質的な意味を理解せずに何となく使っている人がとても多いように思います。

この記事では、改めてHTML/CSS/JavaScriptの基礎を丁寧に説明します。

HTML

すべてのWebページは HTML （HyperText Markup Language）という言語で記述されています。

HTMLは、 構造化された文書 を記述するための言語です。

「構造化された文書」とは、 見出し や 段落 、 引用文 など、文章の構造が書式によって明確化されている文書という意味です。

HTMLでは、文書の構造を表現するために様々な HTMLタグ が用意されています。（参考）

例として、ごく一部のHTMLタグを使って簡単なHTML文書を書いてみます。

<h1>大見出し</h1>

<h2>小見出し1</h2>
<p>段落1</p>
<p>段落2</p>
<blockquote>引用文</blockquote>

<h2>小見出し2</h2>
<p>段落1</p>
<p>詳細は<a href="リンク先のURL">こちら</a></p>
<p><img src="画像ファイルのURL" alt="画像が見つからなかった場合や、画像を表示できないブラウザで見ている人のために、何の画像かを説明する文章" /></p>

上記のようなHTMLを書くと、ブラウザでは以下のように表示されます。

<h1>大見出し</h1>

<h2>小見出し1</h2>
<p>段落1</p>
<p>段落2</p>
<blockquote>引用文</blockquote>

<h2>小見出し2</h2>
<p>段落1</p>
<p>詳細は<a href="リンク先のURL">こちら</a></p>
<p><img src="画像ファイルのURL" alt="画像が見つからなかった場合や、画像を表示できないブラウザで見ている人のために、何の画像かを説明する文章" /></p>

HTMLの内容をブラウザが解釈して、画面に表示してくれているというわけですね。

画面に表示されているページの元となっているHTMLのことを、そのページの ソースコード （あるいは略してソース）と呼びます。

多くのブラウザには、見ているページのソースコードを確認する機能があります。Google Chromeの場合は、ページ上で右クリックして「ページのソースを表示」を選択すると、ソースコードであるHTMLを見ることができます。

CSS

HTMLはあくまで文書の「構造」を記述するための言語です。

なので、例えば 「大見出しはどれぐらいの大きさの文字にするか」「段落と段落の間はどれぐらいスペースを空けるか」 といった「見た目」についての情報はHTMLには書かれていません。

HTML文書に「見た目」の情報を付加するための仕組みが、 CSS （Cascading Style Sheets）です。

CSSは、以下のようにHTMLの中で <style> タグを使って記述することができます。

<style>
    p { color: red; }
</style>

<p>段落1</p>
<p>段落2</p>

この例では、すべての <p> タグの文字の色を赤にする というCSSを定義しています。

これをブラウザで表示すると、以下のようになります。

<p style="color: red;">段落1</p>
<p style="color: red;">段落2</p>

このようにしてHTMLに付加した見た目の情報のことを「スタイル」と呼びます。

CSSを使えばHTMLに様々なスタイルを設定することが可能で、用途に応じたたくさんの設定項目が用意されています。（参考）

なお、一般的には、HTML内に <style> タグで直接CSSの定義を埋め込むのではなく、CSSの定義だけが書かれている別のファイル（ xxx.css というファイル名が付けられる）を読み込んで使うという方法がとられることが多いです。

JavaScript

JavaScript （ジャバスクリプト）というプログラミング言語を使うと、ブラウザに表示されたあとのHTMLを動的に変化させたり、表示されているページ上で発生したイベント（何かがクリックされた、何かのキーボードが押された、などの情報）を取得したりすることができます。

これについては、プログラマーでもない限りあまり詳しく理解する必要はないので、詳細は割愛しますが、 「JavaScriptというものを使うとページの内容をグニョグニョ動かしたり、ボタンがクリックされたときに何かの処理を行うようにしたり、というようなことができる」 ぐらいは理解しておくとよいかと思います。

HTMLの「要素」

HTMLは、たくさんのHTMLタグを構造的に組み上げることで作られています。

例えば以下のようなHTMLがあるとしましょう。

<body>
    <h1>大見出し</h1>
    <p>段落</p>
    <div>
        <h2>小見出し</h2>
        <p>段落</p>
    </div>
</body>

このHTMLは、下図のような階層構造（親子関係を持った構造）となっています。

body
├── h1
├── p
└── div
    ├── h2
    └── p

この図における一つひとつの塊をHTMLの 「要素」 と呼びます。

「HTMLタグ」は字面としての <p> や <div> といった書式を指す言葉ですが、「HTML要素」はHTMLという構造における一つひとつの構造体のことを指します。
用語としては、日常的に使う分には混同してもそれほど問題にはならないですし、実際よく混同されています。

例えば、上図の中で「1つ目の div 要素（この例では1つしかありませんが）」と言った場合、

div
├── h2
└── p

この塊のことを指します。

HTML要素のことを DOM（ドム）要素 と呼ぶこともあるので、用語として覚えておくとよいです。

厳密にはHTML要素とDOM要素は違うものですが、ここでは詳細は割愛します。

HTMLの要素を指定する仕組み

例えば以下のようなHTMLがあるとします。

<h1>大見出し1</h1>
<p>段落1-1</p>
<p>段落1-2</p>

<h1>大見出し2</h1>
<p>段落2-1</p>
<p>段落2-2</p>

このHTMLに対して、以下のようなCSSでスタイルを設定するとしましょう。

h1 { color: red; }
p { color: blue; }

この場合、 h1 である「大見出し1」と「大見出し2」はどちらも文字の色が赤になり、 p である「段落1-1」「段落1-2」「段落2-1」「段落2-2」はすべて文字の色が青になります。

ここでCSSに記述した h1 や p の部分を 「CSSセレクター」 と呼び、この部分が「どのHTML要素にスタイルを適用したいか」を宣言しています。

つまり、CSSの書き方は CSSセレクター { 適用したいスタイルの内容 } となっているわけですね。

さて、では次に、

  • 大見出し2だけ 赤にしたい
  • それぞれの章の 第2段落だけ 青にしたい

といった場合はどうすればよいでしょうか。

答えは以下のとおりです。

<h1>大見出し1</h1>
<p>段落1-1</p>
<p class="p-2">段落1-2</p>

<h1 id="h-2">大見出し2</h1>
<p>段落2-1</p>
<p class="p-2">段落2-2</p>

h1#h-2 { color: red; }
p.p-2 { color: blue; }

やったことは、

  • 「大見出し2」の h1 要素に、id="h-2" を追記
  • 「段落1-2」と「段落2-2」の p 要素に、class="p-2" を追記
  • CSSにおける要素の指定（CSSセレクター）を h1 から h1#h-2 に変更
    • 「すべての <h1> 」→「 id が h-2 であるような <h1> 」
  • CSSにおける要素の指定（CSSセレクター）を p から p.p-2 に変更
    • 「すべての <p> 」→「 class が p-2 であるような <p> 」

の4つです。

このように、HTML内にあらかじめ id や class を適切に設定しておくと、CSSやJavaScriptからHTML要素を効率よく指定して処理することができるのです。

なお、 id はその名のとおり 要素を一意に特定するための識別子 なので、ページのHTML全体の中に同じ id を持っている要素が複数あってはならず、また1つの要素に複数の id を付けることもできません。

class は 要素にラベルを付けることでまとまりとして操作できるようにしておくためのもの なので、同じ class が複数の要素についていても構わないですし、1つの要素に複数の class を持たせることも可能です。その場合は class="class1 class2 class3" のようにスペースで区切って複数のクラス名を並べればOKです。

ちなみに、 id="ID名" を付けた要素は、自動的に「アンカーポイント」となるため、 URL#ID名 でアンカーリンクできるようになります。
アンカーリンクについては別の記事で詳しく説明する予定です。

プログラマーやデザイナーではないWeb担当者さんだと、CSSやJavaScriptを自分で書くことは滅多にないと思いますが、例えばGoogleタグマネージャーの設定などで id や class を使ってHTML要素を指定するという概念が必要になるケースは結構あるので、理解しておくと役立つと思います。

まとめ

  • HTMLはあくまで文書の「構造」を記述するための言語
  • 構造化されたHTML文書に「見た目」の情報を付加するための仕組みがCSS
  • CSSによって記述された見た目の情報のことを「スタイル」と呼ぶ
  • スタイルを適用させたい対象のHTML要素を指定するための記法を「CSSセレクター」と呼ぶ
  • HTML要素にあらかじめ id や class を設定しておくことで、CSSセレクターを用いて簡単にHTML要素の指定ができる
  • id は1ページに同じものは1つだけ、 class はページ内に同じものがいくつあってもOK
GitHubで編集を提案

Discussion