Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

id / class

『id』と『class』はほぼすべてのHTML要素に指定できるグローバル属性です。『id』は要素を一意に識別するための名前で、『class』は複数の要素をグループ化するための名前です。CSSでスタイルを当てたり、JavaScriptで要素を操作したりする際に使います。

構文

<!-- idの指定 -->
<div id="header">...</div>

<!-- classの指定 -->
<p class="text-red">...</p>

<!-- 複数のclassを指定（スペース区切り） -->
<p class="text-large text-bold">...</p>

<!-- idとclassを同時に指定 -->
<section id="about" class="section-wrapper">...</section>

属性一覧

属性	概要
id	要素を一意に識別する名前を指定します。1ページ内で同じidを複数の要素に使うことはできません。
class	要素が属するクラス名を指定します。スペース区切りで複数のクラスを指定できます。同じクラス名を複数の要素に使えます。

CSSでの使い方

セレクター	概要
#id名	『#』を先頭に付けてidを指定します。例：『#header { background: #fff; }』
.class名	『.』を先頭に付けてclassを指定します。例：『.text-red { color: red; }』

サンプルコード

<style>
  /* idセレクター（#） */
  #main-title {
    font-size: 2rem;
    color: #333;
  }

  /* classセレクター（.） */
  .highlight {
    background-color: yellow;
  }

  /* 複数のclassにまとめてスタイルを適用 */
  .btn {
    padding: 8px 16px;
    border-radius: 4px;
  }
  .btn-primary {
    background-color: blue;
    color: white;
  }
</style>

<!-- idで一意に識別 -->
<h1 id="main-title">メインタイトル</h1>

<!-- classで複数の要素にスタイルを適用 -->
<p>通常のテキストと<span class="highlight">ハイライトされたテキスト</span>。</p>

<!-- 複数のclassを組み合わせて使用 -->
<button class="btn btn-primary">送信する</button>
<button class="btn">キャンセル</button>