お問い合わせ
お問い合わせ
ホーム > HTML > HTMLのspanタグの使い方｜テキスト装飾の基本を解説

HTMLのspanタグの使い方｜テキスト装飾の基本を解説

HTML
HTMLのspanタグでテキストを装飾するイメージ｜赤文字や下線を付けたテキスト例
HTMLのspanタグを使えば、文中の一部だけを色付けや強調表示などで装飾できます。

HTMLの<span>タグは、テキストの一部を装飾したり、CSSを適用したりするための基本タグです。
この記事では、<span>タグの意味・書き方・使い方・注意点を、初心者でも完璧に理解できるように解説します。
また、関連するHTMLタグの記事への内部リンクも掲載しています。

spanタグとは？

<span>タグは、インライン要素の1つで、「テキストの一部分だけを装飾する」ために使われます。
文章の中で特定の単語や文字を強調したり、色を変えたいときなどに最適です。

<p>この文の<span>一部だけ</span>を装飾します。</p>

上記の例では、「一部だけ」の箇所にだけCSSを適用できます。

spanタグの基本構文

<span>タグの基本的な書き方は以下の通りです。

<span>テキスト</span>

主な属性一覧

属性名説明
classCSSクラス名を指定。複数の要素に同じスタイルを適用できる
id特定の1つの要素を識別。JavaScriptなどで操作可能
styleインラインで直接スタイルを記述

spanタグの使い方例

例1：文字の色を変える

<p>この<span style="color:red;">部分</span>だけ赤く表示します。</p>

例2：クラスで装飾を管理

HTML
<p>この<span class="highlight">キーワード</span>を強調します。</p>
CSS
.highlight {
  background-color: yellow;
  font-weight: bold;
}

例3：JavaScriptで動きをつける

<span id="clickText">クリックしてね！</span>

<script>
  document.getElementById("clickText").onclick = function() {
    alert("クリックされました！");
  };
</script>

divタグとの違い

比較項目spanタグdivタグ
種類インライン要素ブロック要素
主な用途テキストの一部を装飾コンテンツ全体の区切り
改行の有無改行されない改行される
使い方例<span>強調</span><div>セクション</div>

👉 より詳しい違いは
HTMLのdivタグの使い方｜レイアウトの基本を理解しよう
で詳しく解説しています。

CSSでテキストを装飾する例

下線を引く

<span style="text-decoration: underline;">下線付きテキスト</span>

太字＋色付き

<span style="font-weight: bold; color: blue;">強調テキスト</span>

クラスでまとめて装飾

<style>
.accent {
  color: #e63946;
  font-weight: bold;
  background-color: #ffe5e5;
  padding: 2px 4px;
  border-radius: 3px;
}
</style>

<p>この<span class="accent">部分</span>を目立たせます。</p>

よくある間違いと注意点

  • 構造の意味づけには使わない
    <span>は「意味を持たない汎用タグ」です。
    例えば見出しには<h2>、強調には<strong>を使うのが正しい使い方です。
  • スタイルはCSSで定義する
    style属性を使うとHTMLが煩雑になります。
    可能な限りCSSファイルで統一管理しましょう。

まとめ

要点内容
タグの種類インライン要素
主な用途テキストの一部に装飾を加える
使用例強調・色変更・下線など
注意点意味付けには使わず、CSS管理を推奨

関連記事

HTML・CSSの基礎を体系的に学ぶなら、以下の記事もおすすめです👇

💡ポイント

<span>タグは「装飾のための最小単位」。
テキストの一部を目立たせるための基本技術なので、初心者のうちにしっかり理解しておくと、CSSデザインの自由度が格段に上がります。