◀ 8.

span要素

▶
編集

span要素の記事です。HTMLの汎用インライン要素で、それ自体は意味を持たず、CSSやJavaScriptで一部分だけを装飾・操作したい時に使います。<div>のインライン版だと考えるとわかりやすいです。

span要素の基本

項目内容
表示インライン（改行されない）
意味なし（汎用）
主な用途CSSのclass/id付与、JSの操作対象、部分的な装飾
類似要素<div>（ブロック版）

使用例

1. 一部だけ色を変える

<p>
    この<span style="color:red">赤い部分</span>だけ強調します。
</p>

2. JavaScriptで動的に内容を書き換える

<p>現在の時刻: <span id="now"></span></p>

<script>
document.getElementById('now').textContent = new Date().toLocaleString();
</script>

3. 一部だけクラスを当てる

<p>
    価格: <span class="price">1,980円</span>
</p>

<style>
.price { font-weight: bold; color: #e74c3c; }
</style>

div要素との違い

項目<span><div>
表示インラインブロック
幅内容の幅親要素の幅いっぱい
改行しない前後で改行される
主な用途文中の一部分を装飾ブロックレベルのグルーピング
内包できる要素インライン要素のみブロック・インライン両方

意味的に近い「セマンティック」要素も検討する

装飾以外の意味があるなら <span> ではなくセマンティック要素を使った方が望ましい場合があります。

使い分け要素
重要な強調<strong>
強調（イタリック）<em>
マークしたい<mark>
定義<dfn>
コード<code>
引用<q>（インライン）/ <blockquote>（ブロック）
時刻<time>
略語<abbr>
純粋な装飾／無意味<span>

注意点

  • セマンティック要素を優先。意味がある場合は span 以外を使う
  • span にブロック要素を入れない（<p>、<div>等）
  • span のネストは可能だが、深くなりすぎると保守しにくい
  • CSSで display: block にも変えられるが、その場合は最初から <div>を使う方が素直

関連

  • 親カテゴリ: 構造 （HTML要素一覧）
  • HTML要素一覧: 要素一覧
  • 類似要素 div: 同カテゴリ「構造」内
編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. html要素
  2. head要素
  3. body要素
  4. title要素
  5. base要素
  6. meta要素
  7. div要素
  8. span要素
  9. header要素
  10. footer要素
  11. main要素
  12. address要素
2026-05-13 07:30:23 atom 248

人気ページ

最近更新/作成されたページ