span要素とdiv要素
スタイル適用のフックとして、汎用的なインラインコンテナとブロックコンテナを使います。
「span要素とdiv要素」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
汎用コンテナ
HTMLには、セマンティックな意味を持たない汎用コンテナ要素が2つあります。
<div>— ブロックレベルのコンテナ<span>— インラインのコンテナ
これら自体には意味がなく、スタイル設定やスクリプトのフックとしてのみ機能します。
div要素
<div>はブロックレベルのコンテナで、前後に新しい行を作成します。
<div class="card">
<h2>Card Title</h2>
<p>Card content here.</p>
</div>
<div class="sidebar">
<p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->span要素
<span>はインラインのコンテナで、テキストの流れの中に配置されます。
<p>The price is <span class="price">$29.99</span> per month.</p>
<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>
<!-- span targets a part of text for styling or scripting
without adding block-level line breaks -->divとセマンティック要素の使い分け
<div>を使う前に、適切なセマンティック要素がないか確認してください。
- ページヘッダー →
<header> - ナビゲーション →
<nav> - メインコンテンツ →
<main> - ブログ記事 →
<article> - サイドバー →
<aside> - ページフッター →
<footer>
適用できるセマンティック要素がない場合にのみ、<div>を使用してください。
Divitis
Divitis — 何にでも<div>を使いすぎることです。
<!-- Divitis: meaningless nesting -->
<div class="header">
<div class="nav">
<div class="nav-item"><a href="/">Home</a></div>
</div>
</div>
<!-- Better: semantic HTML -->
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>classとidによるCSSフック
<div>と<span>は、CSSの対象を指定するためにclassまたはid属性と組み合わせて使用します。
<div class="hero-section">
<h1>Welcome</h1>
<p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>
<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->JavaScriptの対象指定
<div>と<span>は、JavaScriptの対象にもなります。
<span id="counter">0</span>
<script>
const counter = document.getElementById('counter');
let count = 0;
setInterval(() => {
count++;
counter.textContent = count;
}, 1000);
</script>ネストのルール
汎用コンテナのネストに関するルール：
<div>には<div>と<span>を含められます<span>には<span>とインラインコンテンツだけを含められます<span>の中に<div>を置かない
<span>
Inline text
<span>Nested span OK</span>
<!-- <div> inside span: INVALID -->
</span>レイアウトに使うdiv
divを使った一般的なレイアウトパターン：
<div class="layout">
<div class="sidebar"><!-- sidebar --></div>
<div class="content"><!-- main content --></div>
</div>
<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->インラインスタイルに使うspan
インラインスタイルに関する一般的なパターン：
<p>Status: <span class="badge badge-success">Active</span></p>
<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
<span style="color: green; font-weight: bold;">$30</span></p>divとspanは不可視
デフォルトでは、<div>と<span>は不可視のラッパーです。
<div>はブロック表示以外の視覚的なスタイルを追加しません<span>はスタイルをまったく追加しません- 見た目はすべて適用したCSSによって決まります
- そのため、完全に中立的なコンテナとして適しています
確認問題
段落内の1つの単語にスタイルを設定するには、どの要素を使用すべきでしょうか。
まとめ：spanとdiv
汎用コンテナの基本：
<div>— ブロックレベルで、レイアウトのために要素をグループ化する<span>— インラインで、テキストの一部をスタイル設定の対象にする- どちらもセマンティックな意味を持たず、意味を追加しない
- 適用できる場合は、セマンティックなHTML5要素を優先する
classとidを使ってCSSやJavaScriptに接続する
よくある質問
「span要素とdiv要素」レッスンは無料ですか？
はい。「span要素とdiv要素」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「span要素とdiv要素」で何を学びますか？
スタイル適用のフックとして、汎用的なインラインコンテナとブロックコンテナを使います。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「span要素とdiv要素」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。