HTML | ZISIRU倉庫

classに複数名前を付けれる
data-“属性”
ブロック要素、インライン要素の違い
主要なブロック要素
主要なインライン要素一覧
1. <button> に入れていいタグ、ダメなタグ
class と id の使い分け方
<span> <div> の使い分け方
textContent innerText の違い

classに複数名前を付けれる

HTMLのclass属性に複数の名前（クラス名）を付けるには、
半角スペースで区切って並べて記述します。これにより、1つの要素に複数のスタイルを組み合わせることができます。

基本的な書き方

<div class="クラス1 クラス2 クラス3">...</div>

1	<div class="クラス1 クラス2 クラス3">...</div>

例：ボタンに「基本スタイル」と「色スタイル」を適用する

<button class="btn primary">ボタン</button>

1	<button class="btn primary">ボタン</button>

CSSでの指定方法

HTMLで設定した複数のクラスは、CSSではそれぞれ独立したクラスセレクタとして定義し、適用します。

/* 基本スタイル */
.btn {
  padding: 10px 20px;
  border: none;
}

/* 色スタイル */
.primary {
  background-color: blue;
  color: white;
}

/* 基本スタイル */

.btn {

padding: 10px 20px;

border: none;

}

/* 色スタイル */

.primary {

background-color: blue;

color: white;

}

注意点とポイント

スペース区切り：カンマ（,）ではなく、半角スペースで区切ります。
順序は無関係：class="btn primary" と class="primary btn" は同じ結果になります。
スタイルの競合：両方のクラスで同じプロパティ（例：color）が指定されている場合、基本的にはCSSファイルで後に記述されたクラスのスタイルが優先されます。
命名規則：半角英数字、ハイフン(-)、アンダースコア(_)を使用し、アルファベットから始めます。

複数のクラスを活用することで、CSSの再利用性を高め、効率的なコーディングが可能になります。

data-“属性”

1. JavaScriptによる動的な操作
JavaScriptを使ってこの属性の値を読み取り、クリックイベントや状態変化に応じて処理を分岐させる際に利用されます。
例: ゲームやポーカーなどのアプリで、特定の要素（カードなど）に「誰の手に（hand）あるか」という情報を保持させる。

<div class="card" data-hand="player1">...</div>

1	<div class="card" data-hand="player1">...</div>

2. CSSによるスタイリング・表示制御
CSSセレクタを用いて、属性値に基づいてスタイルを変更したり、要素を表示/非表示にしたりできます。
例: data-handの値によって要素の色を変える。

[data-hand="player1"] {
  border: 2px solid blue;
}

[data-hand="player1"] {

border: 2px solid blue;

}

3. データの隠し場所・管理
サーバーサイドからJavaScriptにデータを渡したり、HTML上にデータを一時的に保持したりする役割を果たします。

4.複数データ管理可能

<button class="attack-btn"
        data-name="${ch.defender_name}"
        data-id="${ch.id}">
  この相手に挑戦する
</button>

<button class="attack-btn"

data-name="${ch.defender_name}"

data-id="${ch.id}">

この相手に挑戦する

</button>

具体的な使用例

HTML:

<button data-hand="right" onclick="showMessage(this)">右手</button>
<button data-hand="left" onclick="showMessage(this)">左手</button>

1 2	<button data-hand="right" onclick="showMessage(this)">右手</button> <button data-hand="left" onclick="showMessage(this)">左手</button>

JavaScript:

function showMessage(element) {
  // datasetを使ってdata-handの値を取得
  const hand = element.dataset.hand; 
  alert(hand + " が選ばれました");
}

function showMessage(element) {

// datasetを使ってdata-handの値を取得

const hand = element.dataset.hand;

alert(hand + " が選ばれました");

}

標準への準拠: 独自の属性（hand="left"など）を作らず、data-*を使うことでW3Cの規格に従った正しいHTMLになります。
管理のしやすさ: class名などを長くせずに、関連するデータを要素に直接埋め込めます。

ブロック要素、インライン要素の違い

ブロック要素にブロック要素を入れ子出来ない？
ブロック要素にインライン要素は入れ子出来る。
インライン要素にブロック要素は入れ子出来ない。
<a href=””>はインライン要素だが特殊で、見出し等のブロック要素にリンクを付けれるようにするためブロック要素を入れ子する事が出来る。
※その前にブロックで囲っていないことが条件。

HTMLの要素は、ブラウザでの表示形式によって大きく「ブロック要素（ブロックレベル要素）」と「インライン要素」の2種類に分けられます。

主な違いは「改行されるか」「サイズ（幅・高さ）を指定できるか」「余白を正しく適用できるか」の3点です。

比較表

特徴	ブロック要素	インライン要素
表示のされ方	新しい行から始まり、横幅いっぱいに広がる	文章の一部として表示され、改行されない
幅 (width) / 高さ (height)	自由に指定できる	指定できない（内容の大きさに依存）
余白 (margin / padding)	上下左右すべて指定可能	左右は可能だが、上下は正しく適用されない
主な要素例	`<div>`, `<p>`, `<h1>`〜`<h6>`, `<ul>`, `<li>`	`<span>`, `<a>`, `<strong>`, `<img>`

1. ブロック要素

大きな「箱」のイメージです。積み木のように縦に並んでいきます。

配置: 親要素の幅いっぱいまで広がるため、後に続く要素は強制的に改行されます。
用途: 見出しや段落、コンテンツのグループ化など、文書の構造を作るのに使われます。

2. インライン要素

文章の中の「単語」や「飾り」のイメージです。

配置: 横に並んでいき、端まで来ると自動で折り返します。
用途: テキストの一部を強調したり、リンクを貼ったりするために使われます。

補足：インラインブロック (inline-block)

CSSで display: inline-block; と設定すると、「横に並ぶ」というインラインの性質を持ちながら、「幅や高さ、上下余白を指定できる」というブロックの性質を併せ持つ要素にできます。ボタンなどのUIパーツを作るときに株式会社itraの解説を参考に活用されます。

主要なブロック要素

構造・レイアウト:

`<div>`	コンテナ
`<header>`	ヘッダー
`<footer>`	フッター
`<main>`	主コンテンツ
`<nav>`	ナビゲーション
`<section>`	セクション
`<article>`	独立記事
`<aside>`	サイドバー

見出し・段落・文章:

`<h1>` 〜 `<h6>`	見出し
`<p>`	段落
`<hr>`	水平線
`<pre>`	整形済みテキスト
`<blockquote>`	引用

リスト:

`<ul>`	順序なし
`<ol>`	順序付き
`<li>`	リスト項目
`<dl>`	定義リスト
`<dt>`	用語
`<dd>`	説明

フォーム・テーブル:

`<form>`	フォーム
`<fieldset>`	グループ化
`<table>`	表

その他:

`<address>`	連絡先
`<noscript>`	スクリプト無効時
`<video>`/`<audio>`	マルチメディア
`<canvas>`

主要なインライン要素一覧

タグ	役割
`<a>`	他のページや場所へのハイパーリンクを作成する
`<span>`	特定の範囲をグループ化し、CSSでスタイルを適用する際に使用
`<img>`	画像を埋め込む（置換インライン要素）
`<strong>`	重要なテキストを太字で強調する
`<em>`	テキストを斜体で強調する
`<br>`	改行を挿入する
`<input>`	フォームの入力欄を作成する
`<label>`	フォーム部品のラベルを定義する
`<code>`	プログラムのコードであることを示す
`<small>`	注釈や著作権表記など、一段階小さい文字にする

その他のインライン要素

テキスト装飾: <b>, <i>, <mark>, <q>, <sub>, <sup>, <cite>
フォーム関連: <button>, <select>, <textarea>, <output>
意味の定義: <abbr> (略語), <dfn> (定義語), <time> (日時), <kbd> (キーボード入力)

インライン要素の特徴

配置: 横に並び、コンテンツの幅分だけ場所を取ります。
入れ子制限: 原則として、インライン要素の中にブロックレベル要素（<div>や<p>など）を入れることはできません。
CSS制限: width（幅）やheight（高さ）の指定が反映されません（display: inline-blockなどで変更可能）。

<button> に入れていいタグ、ダメなタグ

1. 入れて良いもの（フレージング・コンテンツ）

主にテキストや、テキストレベルの装飾、画像などが含まれます。

<span>
<img>（画像入りボタン）
<strong>, <em>, <b>, <i> などのテキスト装飾タグ
<svg>

2. 入れてはいけないもの（対話型コンテンツ・ブロック要素）

ユーザーが操作できるもの（インタラクティブ・コンテンツ）は含められません。

<a>（リンク）
<button>（ボタンの中のボタン）
<input>
<select>
<div> などのブロック要素（※実はを入れてもブラウザは表示してしまいますが、文法違反となりアクセシビリティ上の問題が発生する可能性があります）

class と id の使い分け方

HTMLのクラス（
class）とID（id）は、「1ページ内で複数回使えるか（class）」か「1回しか使えないか（id）」で使い分けます。共通スタイルはclass、固有の要素（ヘッダーやページ内リンク）はidを推奨します。基本はclassを優先し、ページ内で一意の箇所にのみidを使用するとメンテナンス性が向上します。

使い分けのポイントと特徴

class（クラス）: 同じスタイルや要素を複数箇所に適用する場合に使う。ページ内で何度でも使用可能。
id（ID）: ページ内で1回しか登場しない固有の要素（ロゴ、メインコンテンツ、フッターなど）に使う。JavaScriptの操作やアンカーリンク（ページ内リンク）にも最適。
CSSでの指定: classは.（ドット）、idは#（シャープ）を先頭に付ける。
優先順位: idはclassよりもCSSの優先順位が高い。

使い分けの具体例

属性	使用回数	用途例	CSSセレクタ
class	複数回	ボタン、リストの項目、共通の枠組み	`.button`, `.list-item`
id	1回のみ	ページヘッダー、メインコンテンツ、フッター	`#header`, `#main`, `#footer`

注意事項

同じidを1ページ内に2つ以上記述するとHTML構文エラーになる。
CSSの細かい装飾は、基本的にすべてclassで行っても問題ない。

<span> <div> の使い分け方

<div> と <span> はどちらも「それ自体は意味を持たない」汎用的なタグですが、レイアウト上の振る舞いが決定的に違います。

結論から言うと、「大きなまとまり（箱）」なら <div>、「文章の一部（線）」なら <span> を使います。

1. <div> (Block-level element)

大きなグループ分けや、レイアウトの枠組みを作るための「箱」として使います。

特徴: タグの前後で改行されます。
主な用途:
ルール: <div> の中に <span> を入れることはできますが、逆は基本NGです。

2. <span> (Inline element)

特徴: 改行されず、文章の中にそのまま埋もれます。
主な用途:
注意点: 幅（width）や高さ（height）をCSSで指定しても、デフォルトでは効きません。

比較まとめ

特徴	`<div>`	`<span>`
要素の種類	ブロック要素 (Block)	インライン要素 (Inline)
改行	入る	入らない
用途イメージ	コンテンツの「箱」	テキストの「装飾」
幅・高さ指定	可能	不可

textContent innerText の違い

textContentとinnerTextはどちらもテキストを取得・設定するプロパティですが、大きな違いがあります。textContentはCSS非表示やscriptタグを含めた「DOM上の全テキスト」を返し、innerTextはユーザーに見えている「人間が読めるテキスト」のみを返します。通常はセキュリティの観点からtextContentが推奨されます。

主な違いのまとめ

textContent: <script>や<style>タグのテキスト、CSSでdisplay: noneにされているテキストも取得する。高速。
innerText: 画面に表示されていない要素を取得せず、CSSのスタイル（改行など）を反映する。計算処理が発生するため、低速になる場合がある。

詳細な比較

特徴	textContent	innerText
表示テキストのみ	いいえ（隠れた要素も含む）	はい（見える要素のみ）
script/styleの内容	取得する	取得しない
スタイル反映	いいえ（CSSの計算をしない）	はい（CSSの計算を行う）
パフォーマンス	高速	低速（再フローが発生）
主な用途	安全なテキスト操作、高速化	ユーザーが見ているテキストを取得

具体例

<div id="demo">
    <p>こんにちは</p>
    <span style="display:none">隠れテキスト</span>
</div>
<script>
    const el = document.getElementById('demo');
    console.log(el.textContent); // "こんにちは 隠れテキスト"
    console.log(el.innerText);   // "こんにちは"
</script>

<p>こんにちは</p>

<span style="display:none">隠れテキスト</span>

</div>

const el = document.getElementById('demo');

console.log(el.textContent); // "こんにちは隠れテキスト"

console.log(el.innerText); // "こんにちは"

</script>

innerTextは画面に表示されている文字（”こんにちは”）のみ取得します。
textContentはHTMLに含まれる全ての文字（”こんにちは” + “隠れテキスト”）を取得します。

使い分け

通常は textContent を使用
画面の表示内容を正確に取得したい場合は innerText