MENU
  1. ホーム
  2. HTML&CSS
  3. 【HTML】spanタグの使い方：divとの違いやCSS装飾・幅が効かない時の対策

【HTML】spanタグの使い方：divとの違いやCSS装飾・幅が効かない時の対策

HTML&CSS
html-span-tag

HTMLの<span>タグは、文章の一部をCSSで装飾したり、JavaScriptで操作したりする際に欠かせない「インライン要素」です。

本記事では、初心者が陥りやすいdivタグとの違いや幅・余白が効かない原因、実務で使えるレイアウト調整・省略表示まで解説します。

目次

HTMLのspanタグとは？意味と使い方

HTMLを書いていると頻繁に登場するのが<span>タグです。

結論から言うと、<form>や<p>のような意味を持たない、「汎用的な囲み」を作るタグです。

その意味と基本の使い方を理解することで、CSSによるデザインが可能になります。

HTMLのspanタグとは？意味と使い方
  • インライン要素の性質と役割
  • spanタグの基本構文とサンプルコード

インライン要素の性質と役割

<span>タグの定義において重要なのが「インライン要素」であるという点です。

テキストの一部を囲んでも、改行されることなく文章の「行の中（インライン）」に溶け込みます。

もし<span>タグに幅や高さを持たせたい場合は、display: inline-block;またはdisplay: block;を追加して、インライン要素の性質を上書きする必要があります。

また、<span>の中に<p>や<div>などのブロック要素を入れてしまうのはHTMLの文法違反となるため避けましょう。

❌ 悪い例（widthやmarginが効かない）
この文章のここの部分はspanで囲まれていますが、指定した幅や高さが完全に無視されています。
span {
  background-color: #f8d7da;
  width: 200px; /* 無視される */
  height: 50px; /* 無視される */
  margin-top: 20px; /* 無視される */
}
⭕️ 良い例（inline-blockを使う）
幅や高さを持たせたい場合は、ここの部分のように display プロパティを変更します。
span {
  background-color: #d1e7dd;
  display: inline-block; /* 要素変更 */
  width: 150px; /* 効くようになる！ */
  height: 30px; /* 効くようになる！ */
}
HTMLコード表示
<div class="hspan-prop1-wrapper">
  
  <div class="hspan-prop1-demo-area">
    
    <div class="hspan-prop1-box">
      <div class="hspan-prop1-label" style="color:#dc3545;">❌ 悪い例（widthやmarginが効かない）</div>
      
      <div class="hspan-prop1-visual">
        この文章の<span class="hspan-prop1-bad">ここの部分</span>はspanで囲まれていますが、指定した幅や高さが完全に無視されています。
      </div>

      <div class="hspan-prop1-code hspan-prop1-code-bad">
        span {<br>
          background-color: #f8d7da;<br>
          <span class="hspan-prop1-hl-red">width: 200px; /* 無視される */</span><br>
          <span class="hspan-prop1-hl-red">height: 50px; /* 無視される */</span><br>
          <span class="hspan-prop1-hl-red">margin-top: 20px; /* 無視される */</span><br>
        }
      </div>
    </div>

    <div class="hspan-prop1-box">
      <div class="hspan-prop1-label" style="color:#198754;">⭕️ 良い例（inline-blockを使う）</div>
      
      <div class="hspan-prop1-visual">
        幅や高さを持たせたい場合は、<span class="hspan-prop1-good">ここの部分</span>のように display プロパティを変更します。
      </div>

      <div class="hspan-prop1-code hspan-prop1-code-good">
        span {<br>
          background-color: #d1e7dd;<br>
          <span class="hspan-prop1-hl-green">display: inline-block; /* 要素変更 */</span><br>
          width: 150px;  /* 効くようになる！ */<br>
          height: 30px;  /* 効くようになる！ */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hspan-prop1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-prop1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hspan-prop1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hspan-prop1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hspan-prop1-visual {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}

/* ❌ 悪い例のspan：インラインのまま幅を指定 */
.hspan-prop1-bad {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
  /* これらはインライン要素には効かない！ */
  width: 200px;
  height: 50px;
  margin-top: 20px; 
}

/* ⭕️ 良い例のspan：inline-blockで幅を有効化 */
.hspan-prop1-good {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
  /* ★インラインブロックに変えることで幅と高さを持てるようになる */
  display: inline-block; 
  width: 120px;
  height: 28px;
  line-height: 28px; /* 文字を縦の中央に */
  text-align: center;
}

.hspan-prop1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hspan-prop1-code-bad { border-left: 4px solid #dc3545; }
.hspan-prop1-code-good { border-left: 4px solid #198754; }
.hspan-prop1-hl-red { color: #e06c75; font-weight: bold; }
.hspan-prop1-hl-green { color: #98c379; font-weight: bold; }

要素に対するdisplayプロパティの使い方を詳しく知りたい人は「【html&css】displayの種類は？flexやinline-blockの違い」を一読ください。

【html&css】displayの種類は？flexやinline-blockの違い

spanタグの基本構文とサンプルコード

<span>タグの一般的な使い方は、「文章の中の一部分だけ文字色を変えたい」「文字を太くしたい」といった場合のCSSの目印（フック）としての役割です。

通常は<span class="highlight">のようにクラス名をつけ、CSSで装飾のコードを記述します。

デザイン上の理由だけであれば<span>を使います。

しかし、SEOや音声読み上げソフトに対して「ここは重要なキーワードです」と構造的な意味を伝えたい場合は、適切な意味を持つHTMLタグ（<strong>など）を優先して使うのがよいです。

🎨 文章の一部だけをピンポイント装飾

当社のサービスは、初期費用が完全無料でご利用いただけます。

さらに今なら、初月半額キャンペーンを実施中です！

<!– HTML：装飾したい部分だけをspanで囲む –>
<p>
  初期費用が<span class=”text-red”>完全無料</span>で…
  <span class=”text-marker”>初月半額…</span>
</p>

/* CSS：spanにつけたクラスに対してデザインを指定 */
.text-red {
  color: #dc3545;
  font-weight: bold;
}
.text-marker {
  background: linear-gradient(transparent 60%, #ffff66 60%);
  font-weight: bold;
}

※spanタグ自体には何の見た目の変化もありません。クラスをつけてCSSと連携することで初めて効果を発揮します。

HTMLコード表示
<div class="hspan-base2-wrapper">
  
  <div class="hspan-base2-demo-area">
    
    <div class="hspan-base2-box">
      <div class="hspan-base2-label">🎨 文章の一部だけをピンポイント装飾</div>
      
      <div class="hspan-base2-visual">
        <p style="margin:0 0 10px 0; color:#333; font-size:14px; line-height:1.6;">
          当社のサービスは、初期費用が<span class="hspan-base2-text-red">完全無料</span>でご利用いただけます。
        </p>
        <p style="margin:0; color:#333; font-size:14px; line-height:1.6;">
          さらに今なら、<span class="hspan-base2-text-marker">初月半額キャンペーン</span>を実施中です！
        </p>
      </div>

      <div class="hspan-base2-code">
        <!-- HTML：装飾したい部分だけをspanで囲む --><br>
        <p><br>
          初期費用が<span class="hspan-base2-hl-blue"><span class="text-red"></span>完全無料<span class="hspan-base2-hl-blue"></span></span>で...<br>
          <span class="hspan-base2-hl-blue"><span class="text-marker"></span>初月半額...<span class="hspan-base2-hl-blue"></span></span><br>
        </p><br><br>
        /* CSS：spanにつけたクラスに対してデザインを指定 */<br>
        <span class="hspan-base2-hl-green">.text-red</span> {<br>
          color: #dc3545;<br>
          font-weight: bold;<br>
        }<br>
        <span class="hspan-base2-hl-green">.text-marker</span> {<br>
          background: linear-gradient(transparent 60%, #ffff66 60%);<br>
          font-weight: bold;<br>
        }
      </div>
      <p class="hspan-base2-note">※spanタグ自体には何の見た目の変化もありません。クラスをつけてCSSと連携することで初めて効果を発揮します。</p>
    </div>

  </div>
</div>
CSSコード表示
.hspan-base2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-base2-demo-area {
  display: flex;
  justify-content: center;
}
.hspan-base2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hspan-base2-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #0d6efd; }

.hspan-base2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* spanにつける装飾クラス */
.hspan-base2-text-red {
  color: #dc3545; /* 赤文字 */
  font-weight: bold;
}
.hspan-base2-text-marker {
  background: linear-gradient(transparent 60%, #ffff66 60%); /* 蛍光マーカー風 */
  font-weight: bold;
  padding: 0 4px;
}

.hspan-base2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.hspan-base2-hl-blue { color: #61afef; font-weight: bold; }
.hspan-base2-hl-green { color: #98c379; font-weight: bold; }
.hspan-base2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

spanとdivの違いや使い分け

HTMLを学び始めると、<span>と<div>の違いで疑問が生まれます。

どちらも「それ自体は特定の意味を持たない汎用的なタグ」であるため、「どっちを使っても同じじゃないの？」と混同されがちです。

しかし、この2つにはHTMLの構造上、間違えてはいけない差が存在します。

ここでは、実務でレイアウト崩れを起こさない<span>と<div>の使い分けを解説します。

spanとdivの違いや使い分け
  • インライン要素とブロック要素の挙動の差
  • spanタグの中に他のタグによる入れ子（ネスト）

インライン要素とブロック要素の挙動の差

2つの決定的な違いは、ブラウザが画面に描画する際の「挙動」にあります。

  • <div>（ブロック要素）
    画面の横幅いっぱいに広がる「箱」です。
    前後に自動で改行が入り、箱を縦に積み上げていくレイアウトの骨組みを作ります。
  • <span>（インライン要素）
    文字の長さの分だけしか幅を取らない「蛍光マーカー」のような存在です。
    改行は入らず、文章の中に溶け込みます。

「レイアウトの枠組み（ヘッダー、メイン領域、カード型の箱など）」を作りたい時は<div>を使い、「文章の中の文字装飾」をしたい時は<span>を使うといった使い分けです。

❌ 悪い例（文章中でdivを使う）
当社のサービスは
完全無料
でご利用いただけます。
当社のサービスは
<div class=”text-red”>完全無料</div>
でご利用いただけます。

※divは「画面幅いっぱいの箱」を作るため、前後に強制的な改行が入って文章が壊れてしまいます。

⭕️ 良い例（文章中はspanを使う）
当社のサービスは完全無料でご利用いただけます。
当社のサービスは
<span class=”text-red”>完全無料</span>
でご利用いただけます。

※spanは「インライン（行の中）」の性質を持つため、改行されずに綺麗に装飾だけが適用されます。

HTMLコード表示
<div class="hspan-diff1-wrapper">
  
  <div class="hspan-diff1-demo-area">
    
    <div class="hspan-diff1-box">
      <div class="hspan-diff1-label" style="color:#dc3545;">❌ 悪い例（文章中でdivを使う）</div>
      
      <div class="hspan-diff1-visual">
        当社のサービスは<div class="hspan-diff1-bad">完全無料</div>でご利用いただけます。
      </div>

      <div class="hspan-diff1-code hspan-diff1-code-bad">
        当社のサービスは<br>
        <span class="hspan-diff1-hl-red"><div class="text-red"></span>完全無料<span class="hspan-diff1-hl-red"></div></span><br>
        でご利用いただけます。
      </div>
      <p class="hspan-diff1-note">※divは「画面幅いっぱいの箱」を作るため、前後に強制的な改行が入って文章が壊れてしまいます。</p>
    </div>

    <div class="hspan-diff1-box">
      <div class="hspan-diff1-label" style="color:#198754;">⭕️ 良い例（文章中はspanを使う）</div>
      
      <div class="hspan-diff1-visual">
        当社のサービスは<span class="hspan-diff1-good">完全無料</span>でご利用いただけます。
      </div>

      <div class="hspan-diff1-code hspan-diff1-code-good">
        当社のサービスは<br>
        <span class="hspan-diff1-hl-green"><span class="text-red"></span>完全無料<span class="hspan-diff1-hl-green"></span></span><br>
        でご利用いただけます。
      </div>
      <p class="hspan-diff1-note" style="color:#198754;">※spanは「インライン（行の中）」の性質を持つため、改行されずに綺麗に装飾だけが適用されます。</p>
    </div>

  </div>
</div>
CSSコード表示
.hspan-diff1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-diff1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hspan-diff1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hspan-diff1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hspan-diff1-visual {
  font-size: 15px;
  color: #333;
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}

/* div要素の悪い挙動 */
.hspan-diff1-bad {
  color: #dc3545;
  font-weight: bold;
  background-color: #f8d7da; /* 箱が横いっぱいに広がることを視覚化 */
  border: 1px dashed #dc3545;
  padding: 5px;
  margin: 5px 0;
}

/* span要素の良い挙動 */
.hspan-diff1-good {
  color: #198754;
  font-weight: bold;
}

.hspan-diff1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hspan-diff1-code-bad { border-left: 4px solid #dc3545; }
.hspan-diff1-code-good { border-left: 4px solid #198754; }
.hspan-diff1-hl-red { color: #e06c75; font-weight: bold; }
.hspan-diff1-hl-green { color: #98c379; font-weight: bold; }
.hspan-diff1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

divタグの使い方を詳しく知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。

【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾

spanタグの中に他のタグによる入れ子（ネスト）

HTMLを記述する際、「あるタグの中に別のタグを入れること」を「入れ子（ネスト）」と呼びます。

ここで注意すべきは、<span>タグの入れ子に関する厳格な文法ルールです。

  • NG（文法違反）
    <span>の中に<p>や<div>を入れる。
  • OK（入れ子）
    <span>の中に<span>を入れる。
    一部だけ文字サイズを変えながら色も変えるような複雑な装飾時に有効です。
  • OK（正しい構造）
    複数の段落を囲みたい場合は、<span>ではなく<div class="text-gray">で囲みます。
❌ 悪い例（spanの中にpタグ）
<!– ⚠️ 重大な文法違反！ –>
<span class=”text-gray”>
  <p>段落1のテキストです。</p>
  <p>段落2のテキストです。</p>
</span>

※インライン要素のspanという「小さな袋」に、ブロック要素のpという「大きな箱」を無理やり詰め込もうとしているためエラーになります。

⭕️ 良い例（divで囲む / spanの入れ子）
<!– 💡 複数の段落を囲むならdivを使う –>
<div class=”text-gray”>
  <p>段落1のテキストです。</p>
  <p>段落2のテキストです。</p>
</div>

<!– 💡 spanの中にspanを入れるのはOK！ –>
<p>
  ここは
  <span class=”text-red”>赤文字で<span class=”text-large”>大きく</span>表示</span>
  します。
</p>

※ブロック要素をまとめたい時は必ずdivを選びます。また、文字装飾のためにspanの中でspanを細かく分けるのは全く問題ありません。

HTMLコード表示
<div class="hspan-nest2-wrapper">
  
  <div class="hspan-nest2-demo-area">
    
    <div class="hspan-nest2-box">
      <div class="hspan-nest2-label" style="color:#dc3545;">❌ 悪い例（spanの中にpタグ）</div>

      <div class="hspan-nest2-code hspan-nest2-code-bad">
        <!-- ⚠️ 重大な文法違反！ --><br>
        <span class="hspan-nest2-hl-red"><span class="text-gray"></span><br>
          <p>段落1のテキストです。</p><br>
          <p>段落2のテキストです。</p><br>
        <span class="hspan-nest2-hl-red"></span></span>
      </div>
      <p class="hspan-nest2-note">※インライン要素のspanという「小さな袋」に、ブロック要素のpという「大きな箱」を無理やり詰め込もうとしているためエラーになります。</p>
    </div>

    <div class="hspan-nest2-box">
      <div class="hspan-nest2-label" style="color:#198754;">⭕️ 良い例（divで囲む / spanの入れ子）</div>

      <div class="hspan-nest2-code hspan-nest2-code-good">
        <!-- 💡 複数の段落を囲むならdivを使う --><br>
        <span class="hspan-nest2-hl-green"><div class="text-gray"></span><br>
          <p>段落1のテキストです。</p><br>
          <p>段落2のテキストです。</p><br>
        <span class="hspan-nest2-hl-green"></div></span><br><br>
        <!-- 💡 spanの中にspanを入れるのはOK！ --><br>
        <p><br>
          ここは<br>
          <span class="text-red">赤文字で<span class="hspan-nest2-hl-blue"><span class="text-large"></span>大きく<span class="hspan-nest2-hl-blue"></span></span>表示</span><br>
          します。<br>
        </p>
      </div>
      <p class="hspan-nest2-note" style="color:#198754;">※ブロック要素をまとめたい時は必ずdivを選びます。また、文字装飾のためにspanの中でspanを細かく分けるのは全く問題ありません。</p>
    </div>

  </div>
</div>
CSSコード表示
.hspan-nest2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-nest2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hspan-nest2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hspan-nest2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hspan-nest2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hspan-nest2-code-bad { border-left: 4px solid #dc3545; }
.hspan-nest2-code-good { border-left: 4px solid #198754; }
.hspan-nest2-hl-red { color: #e06c75; font-weight: bold; }
.hspan-nest2-hl-green { color: #98c379; font-weight: bold; }
.hspan-nest2-hl-blue { color: #61afef; font-weight: bold; }
.hspan-nest2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

CSSでspanタグをおしゃれに装飾する

<span>タグそのものは、画面上に視覚的な変化をもたらしません。

しかし、CSSと組み合わせることで、文章の一部を強調したり、おしゃれなマーカー線を引いたり、ボタンのような見た目にしたりと自由なデザインが可能になります。

ここでは、文字色や太さといった装飾、背景色やマウスホバー時の動きなどを解説します。

CSSでspanタグをおしゃれに装飾する
  • 文字色・フォントサイズ・太字の設定
  • 背景色・枠線（ボーダー）・下線の装飾
  • マウスホバー時の装飾（hover）

文字色・フォントサイズ・太字の設定

基本になるのが、文章の一部だけ文字色を変える、大きさを変える、太字にするといった文字自体の装飾です。

実務では、HTMLには<span class="text-accent">のようにクラスだけを付与し、装飾は外部のCSSファイルに記述して一元管理するのがよいです。

❌ 悪い例（style属性で直書き）
この商品の価格は10,000円です。
<!– 後から色を変えるのが大変になる最悪の書き方 –>
この商品の価格は
<span style=”color:#dc3545; font-size:18px; font-weight:bold;”>
  10,000円
</span>です。
⭕️ 良い例（クラス名で外部CSS管理）
この商品の価格は10,000円です。
<!– HTML：名前（クラス）だけをつける –>
価格は<span class=”price-accent”>10,000円</span>です。

/* CSS：デザインはこっちで一元管理する */
.price-accent {
  color: #dc3545; /* 文字色 */
  font-size: 1.2em; /* 周りの文字より20%大きく */
  font-weight: bold; /* 太字 */
}

※CSSのファイル側で「#dc3545（赤）」を「blue」に変えるだけで、全ページの金額表示が一瞬で青色に変わります。

HTMLコード表示
<div class="hspan-deco1-wrapper">
  
  <div class="hspan-deco1-demo-area">
    
    <div class="hspan-deco1-box">
      <div class="hspan-deco1-label" style="color:#dc3545;">❌ 悪い例（style属性で直書き）</div>
      
      <div class="hspan-deco1-visual">
        この商品の価格は<span style="color:#dc3545; font-size:18px; font-weight:bold;">10,000円</span>です。
      </div>

      <div class="hspan-deco1-code hspan-deco1-code-bad">
        <!-- 後から色を変えるのが大変になる最悪の書き方 --><br>
        この商品の価格は<br>
        <span <span class="hspan-deco1-hl-red">style="color:#dc3545; font-size:18px; font-weight:bold;"</span>><br>
          10,000円<br>
        </span>です。
      </div>
    </div>

    <div class="hspan-deco1-box">
      <div class="hspan-deco1-label" style="color:#198754;">⭕️ 良い例（クラス名で外部CSS管理）</div>
      
      <div class="hspan-deco1-visual">
        この商品の価格は<span class="hspan-deco1-price-accent">10,000円</span>です。
      </div>

      <div class="hspan-deco1-code hspan-deco1-code-good">
        <!-- HTML：名前（クラス）だけをつける --><br>
        価格は<span <span class="hspan-deco1-hl-green">class="price-accent"</span>>10,000円</span>です。<br><br>
        /* CSS：デザインはこっちで一元管理する */<br>
        <span class="hspan-deco1-hl-green">.price-accent</span> {<br>
          color: #dc3545;      /* 文字色 */<br>
          font-size: 1.2em;    /* 周りの文字より20%大きく */<br>
          font-weight: bold;   /* 太字 */<br>
        }
      </div>
      <p class="hspan-deco1-note" style="color:#198754;">※CSSのファイル側で「#dc3545（赤）」を「blue」に変えるだけで、全ページの金額表示が一瞬で青色に変わります。</p>
    </div>

  </div>
</div>
CSSコード表示
.hspan-deco1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-deco1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hspan-deco1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hspan-deco1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hspan-deco1-visual {
  font-size: 15px;
  color: #333;
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}

/* 良い例のCSSクラス */
.hspan-deco1-price-accent {
  color: #dc3545;
  font-size: 1.2em; /* 1.2倍の大きさ */
  font-weight: bold;
}

.hspan-deco1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hspan-deco1-code-bad { border-left: 4px solid #dc3545; }
.hspan-deco1-code-good { border-left: 4px solid #198754; }
.hspan-deco1-hl-red { color: #e06c75; font-weight: bold; }
.hspan-deco1-hl-green { color: #98c379; font-weight: bold; }
.hspan-deco1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

背景色・枠線（ボーダー）・下線の装飾

文章の中で特定のキーワードを目立たせるため、背景色をつけたり、枠線で囲んだり、下線を引くこともあります。

場合によっては背景画像を使って小さなアイコンを添えることもあります。

背景色や枠線をつけた<span>にpaddingで余白を作りたい場合は、親要素のline-height（行間）を広げておくか、<span>をdisplay: inline-block;に変更して、他の行を押し退けるように設定する必要があります。

❌ 悪い例（上下の行に被る）
この文章はサンプルのテキストです。行間が狭い状態で背景色とpaddingを設定すると、このように上と下の行に色が被ってしまい非常に読みにくくなります。
.bad-badge {
  background-color: #ffd700;
  border: 1px solid #ffaa00;
  padding: 10px; /* ここが原因で上下に侵食する */
}

※インライン要素の上下のpaddingは、他の行を押し退ける力を持っていません。

⭕️ 良い例（行間を確保する）
この文章はサンプルのテキストです。親要素の行間を広げておけば、背景色とpaddingを設定しても、他の行に被ることなく美しいラベル風の装飾になります。
/* 親のpタグなどに行間を確保する */
p { line-height: 2.2; }

.good-badge {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 4px; /* 角丸 */
  padding: 4px 8px;
  text-decoration: underline; /* 下線 */
}
HTMLコード表示
<div class="hspan-deco2-wrapper">
  
  <div class="hspan-deco2-demo-area">
    
    <div class="hspan-deco2-box">
      <div class="hspan-deco2-label" style="color:#dc3545;">❌ 悪い例（上下の行に被る）</div>
      
      <div class="hspan-deco2-visual" style="line-height: 1.2;">
        この文章はサンプルのテキストです。行間が狭い状態で<span class="hspan-deco2-bad-badge">背景色とpadding</span>を設定すると、このように上と下の行に色が被ってしまい非常に読みにくくなります。
      </div>

      <div class="hspan-deco2-code hspan-deco2-code-bad">
        .bad-badge {<br>
          background-color: #ffd700;<br>
          border: 1px solid #ffaa00;<br>
          <span class="hspan-deco2-hl-red">padding: 10px; /* ここが原因で上下に侵食する */</span><br>
        }
      </div>
      <p class="hspan-deco2-note">※インライン要素の上下のpaddingは、他の行を押し退ける力を持っていません。</p>
    </div>

    <div class="hspan-deco2-box">
      <div class="hspan-deco2-label" style="color:#198754;">⭕️ 良い例（行間を確保する）</div>
      
      <div class="hspan-deco2-visual" style="line-height: 2.2;">
        この文章はサンプルのテキストです。親要素の行間を広げておけば、<span class="hspan-deco2-good-badge">背景色とpadding</span>を設定しても、他の行に被ることなく美しいラベル風の装飾になります。
      </div>

      <div class="hspan-deco2-code hspan-deco2-code-good">
        /* 親のpタグなどに行間を確保する */<br>
        p { <span class="hspan-deco2-hl-green">line-height: 2.2;</span> }<br><br>
        .good-badge {<br>
          background-color: #e9ecef;<br>
          border: 1px solid #ced4da;<br>
          border-radius: 4px; /* 角丸 */<br>
          padding: 4px 8px;<br>
          text-decoration: underline; /* 下線 */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hspan-deco2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-deco2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hspan-deco2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hspan-deco2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hspan-deco2-visual {
  font-size: 14px;
  color: #333;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}

/* ❌ 悪い例のバッジ装飾 */
.hspan-deco2-bad-badge {
  background-color: #ffe69c;
  border: 1px solid #ffc107;
  padding: 10px; /* わざと大きくして被らせる */
  font-weight: bold;
}

/* ⭕️ 良い例のバッジ装飾 */
.hspan-deco2-good-badge {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 4px 8px; /* 適度な余白 */
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #0d6efd;
  text-decoration-thickness: 2px;
}

.hspan-deco2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
}
.hspan-deco2-code-bad { border-left: 4px solid #dc3545; }
.hspan-deco2-code-good { border-left: 4px solid #198754; }
.hspan-deco2-hl-red { color: #e06c75; font-weight: bold; }
.hspan-deco2-hl-green { color: #98c379; font-weight: bold; }
.hspan-deco2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

内側の余白を作るpaddingプロパティを詳しく知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

マウスホバー時の装飾（hover）

パソコンでWebサイトを見てる際、マウスポインタを乗せた時だけ文字色や背景色が変わる装飾は、クリックできる場所をユーザーに伝える重要な方法です。

CSSの擬似クラスである:hoverを使って実装します。

ただの文章の一部をホバー装飾するのは、ユーザーを「クリックできるのかな？」と勘違いさせるため推奨されません。

また、ホバー効果を実装する際は、CSSのメディアクエリ（@media (hover: hover)）を使って「マウス操作が可能なデバイスの時だけホバーエフェクトを有効にする」という記述をするのがよいです。

🖱️ マウスホバー時のインタラクティブ装飾
詳細については、こちらの特設ページをご覧ください。
.hover-link {
  color: #0d6efd;
  border-bottom: 1px solid #0d6efd;
  cursor: pointer; /* マウスを指のマークに */
  transition: all 0.3s ease; /* フワッと変化させる魔法 */
}

/* スマホでの誤作動を防ぐ！マウスが使える端末でのみ有効化 */
@media (hover: hover) {
  .hover-link:hover {
    background-color: #e7f1ff; /* 背景色をつける */
    color: #0a58ca; /* 文字色を少し濃く */
  }
}

※ transition（トランジション）を入れることで、パッと切り替わるのではなく、0.3秒かけて滑らかに変化する高級感のある動きになります。

HTMLコード表示
<div class="hspan-deco3-wrapper">
  
  <div class="hspan-deco3-demo-area">
    
    <div class="hspan-deco3-box">
      <div class="hspan-deco3-label">🖱️ マウスホバー時のインタラクティブ装飾</div>
      
      <div class="hspan-deco3-visual">
        詳細については、<span class="hspan-deco3-hover-link">こちらの特設ページ</span>をご覧ください。
      </div>

      <div class="hspan-deco3-code">
        .hover-link {<br>
          color: #0d6efd;<br>
          border-bottom: 1px solid #0d6efd;<br>
          cursor: pointer; /* マウスを指のマークに */<br>
          <span class="hspan-deco3-hl-blue">transition: all 0.3s ease;</span> /* フワッと変化させる魔法 */<br>
        }<br><br>
        <span class="hspan-deco3-hl-pink">/* スマホでの誤作動を防ぐ！マウスが使える端末でのみ有効化 */</span><br>
        <span class="hspan-deco3-hl-pink">@media (hover: hover) {</span><br>
          .hover-link<span class="hspan-deco3-hl-green">:hover</span> {<br>
            background-color: #e7f1ff; /* 背景色をつける */<br>
            color: #0a58ca; /* 文字色を少し濃く */<br>
          }<br>
        <span class="hspan-deco3-hl-pink">}</span>
      </div>
      <p class="hspan-deco3-note">※ <code>transition</code>（トランジション）を入れることで、パッと切り替わるのではなく、0.3秒かけて滑らかに変化する高級感のある動きになります。</p>
    </div>

  </div>
</div>
CSSコード表示
.hspan-deco3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-deco3-demo-area {
  display: flex;
  justify-content: center;
}
.hspan-deco3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.hspan-deco3-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hspan-deco3-visual {
  font-size: 15px;
  color: #333;
  padding: 25px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
}

/* ホバーさせるspanの基本スタイル */
.hspan-deco3-hover-link {
  color: #0d6efd;
  font-weight: bold;
  border-bottom: 2px solid #0d6efd;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  /* ★色や背景の変化を0.3秒かけて滑らかに行う */
  transition: all 0.3s ease; 
}

/* マウスホバー時のスタイル（※スマホ等での誤タップホバーを防ぐメディアクエリ） */
@media (hover: hover) {
  .hspan-deco3-hover-link:hover {
    background-color: #0d6efd; /* 背景を青に */
    color: #ffffff; /* 文字を白に */
  }
}

.hspan-deco3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #c678dd;
}
.hspan-deco3-hl-blue { color: #61afef; font-weight: bold; }
.hspan-deco3-hl-green { color: #98c379; font-weight: bold; }
.hspan-deco3-hl-pink { color: #c678dd; font-weight: bold; }
.hspan-deco3-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

spanタグにwidthやmarginが効かない原因と対策

「見出しのように 幅100%にしたいのに広がらない」「ボタンのように幅を持たせたいのに、文字の長さまでしか広がらない」と頭を抱えることがあります。

ここでは、原因である「インライン要素の性質」と解決するCSS、そして余白を扱う際の注意点について解説します。

spanタグにwidthやmarginが効かない原因と対策
  • display: inline-blockでサイズ指定を有効にする
  • パディングとマージンの注意点

display: inline-blockでサイズ指定を有効にする

<span>タグに幅や高さが効かない理由は、「<span>がインライン要素として定義されているから」です。

ブラウザは「文章の途中にある文字（インライン要素）が、勝手に大きな幅や高さを持ったら、文章の形が崩れて読めなくなる」と考え、意図的に幅や高さの指定を無視します。

<span>タグに幅や高さを持たせたい場合は、displayプロパティの値を変更し、インライン要素を解除する必要があります。

文章の中に溶け込ませたまま幅を持たせるならdisplay: inline-block;、前後に改行を入れて横幅いっぱいの箱に変えるならdisplay: block;を指定するのがよいです。

❌ 悪い例（widthが無視される）
詳しく見る
span {
  background-color: #0d6efd;
  width: 200px; /* 全く効かない！ */
  height: 50px; /* 全く効かない！ */
}

※文字の長さ（「詳しく見る」の5文字分）しか幅が確保されません。

⭕️ 良い例（inline-blockを指定）
詳しく見る
span {
  background-color: #0d6efd;
  display: inline-block; /* 要素変更 */
  width: 200px; /* しっかり効く！ */
  height: 50px; /* しっかり効く！ */
}

※インラインブロック化することで、立派な幅200pxのボタンとして機能するようになります。

HTMLコード表示
<div class="hspan-wm1-wrapper">
  
  <div class="hspan-wm1-demo-area">
    
    <div class="hspan-wm1-box">
      <div class="hspan-wm1-label" style="color:#dc3545;">❌ 悪い例（widthが無視される）</div>
      
      <div class="hspan-wm1-visual">
        <span class="hspan-wm1-btn-bad">詳しく見る</span>
      </div>

      <div class="hspan-wm1-code hspan-wm1-code-bad">
        span {<br>
          background-color: #0d6efd;<br>
          <span class="hspan-wm1-hl-red">width: 200px; /* 全く効かない！ */</span><br>
          <span class="hspan-wm1-hl-red">height: 50px; /* 全く効かない！ */</span><br>
        }
      </div>
      <p class="hspan-wm1-note">※文字の長さ（「詳しく見る」の5文字分）しか幅が確保されません。</p>
    </div>

    <div class="hspan-wm1-box">
      <div class="hspan-wm1-label" style="color:#198754;">⭕️ 良い例（inline-blockを指定）</div>
      
      <div class="hspan-wm1-visual">
        <span class="hspan-wm1-btn-good">詳しく見る</span>
      </div>

      <div class="hspan-wm1-code hspan-wm1-code-good">
        span {<br>
          background-color: #0d6efd;<br>
          <span class="hspan-wm1-hl-green">display: inline-block; /* 要素変更 */</span><br>
          width: 200px; /* しっかり効く！ */<br>
          height: 50px; /* しっかり効く！ */<br>
        }
      </div>
      <p class="hspan-wm1-note" style="color:#198754;">※インラインブロック化することで、立派な幅200pxのボタンとして機能するようになります。</p>
    </div>

  </div>
</div>
CSSコード表示
.hspan-wm1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-wm1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hspan-wm1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hspan-wm1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hspan-wm1-visual {
  padding: 20px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
  text-align: center;
}

/* ❌ 悪い例のspanボタン */
.hspan-wm1-btn-bad {
  background-color: #0d6efd;
  color: white;
  border-radius: 4px;
  /* これらは効かない */
  width: 200px;
  height: 50px;
  line-height: 50px;
}

/* ⭕️ 良い例のspanボタン */
.hspan-wm1-btn-good {
  background-color: #0d6efd;
  color: white;
  border-radius: 4px;
  /* ★要素変更のプロパティ */
  display: inline-block; 
  width: 200px;
  height: 50px;
  line-height: 50px;
}

.hspan-wm1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hspan-wm1-code-bad { border-left: 4px solid #dc3545; }
.hspan-wm1-code-good { border-left: 4px solid #198754; }
.hspan-wm1-hl-red { color: #e06c75; font-weight: bold; }
.hspan-wm1-hl-green { color: #98c379; font-weight: bold; }
.hspan-wm1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

要素変更するdisplayプロパティの使い方を詳しく知りたい人は「【html&css】displayの種類は？flexやinline-blockの違い」を一読ください。

【html&css】displayの種類は？flexやinline-blockの違い

パディングとマージンの注意点

<span>タグ（インライン要素）は、余白の扱いについても特殊でクセのある性質を持ちます。

具体的には、内側の余白であるパディングと外側の余白であるマージンにおいて、「左右」は効くが「上下」は効かないというルールがあります。

<span>に上下の余白（margin）を持たせて他の要素を押し退けたい場合は、display: inline-block;を指定してください。

これをつけるだけで、ブロック要素と同じように上下の余白が機能します。

❌ 悪い例（上下のmarginは無視される）
上の行のテキストです。
このspanには margin-top:30px を指定していますが、全く上に隙間ができません（無視されています）。
span {
  margin-left: 20px; /* 左右は効く */
  margin-top: 30px; /* 上下は無視される */
  padding-top: 10px; /* 他の行に被る原因 */
}
⭕️ 良い例（inline-blockを指定）
上の行のテキストです。
このspanは inline-block なので、margin-top:30px がしっかり効いて、上の行を押し退けています。
span {
  display: inline-block; /* これが必須 */
  margin-top: 30px; /* しっかり効く！ */
  padding: 10px;
}
HTMLコード表示
<div class="hspan-wm2-wrapper">
  
  <div class="hspan-wm2-demo-area">
    
    <div class="hspan-wm2-box">
      <div class="hspan-wm2-label" style="color:#dc3545;">❌ 悪い例（上下のmarginは無視される）</div>
      
      <div class="hspan-wm2-visual" style="line-height:1.2;">
        上の行のテキストです。<br>
        <span class="hspan-wm2-bad">このspan</span>には margin-top:30px を指定していますが、全く上に隙間ができません（無視されています）。
      </div>

      <div class="hspan-wm2-code hspan-wm2-code-bad">
        span {<br>
          margin-left: 20px; /* 左右は効く */<br>
          <span class="hspan-wm2-hl-red">margin-top: 30px; /* 上下は無視される */</span><br>
          <span class="hspan-wm2-hl-red">padding-top: 10px; /* 他の行に被る原因 */</span><br>
        }
      </div>
    </div>

    <div class="hspan-wm2-box">
      <div class="hspan-wm2-label" style="color:#198754;">⭕️ 良い例（inline-blockを指定）</div>
      
      <div class="hspan-wm2-visual" style="line-height:1.2;">
        上の行のテキストです。<br>
        <span class="hspan-wm2-good">このspan</span>は inline-block なので、margin-top:30px がしっかり効いて、上の行を押し退けています。
      </div>

      <div class="hspan-wm2-code hspan-wm2-code-good">
        span {<br>
          <span class="hspan-wm2-hl-green">display: inline-block; /* これが必須 */</span><br>
          margin-top: 30px; /* しっかり効く！ */<br>
          padding: 10px;<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hspan-wm2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-wm2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hspan-wm2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hspan-wm2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hspan-wm2-visual {
  font-size: 14px;
  color: #333;
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}

/* ❌ 悪い例：インラインのまま余白 */
.hspan-wm2-bad {
  background-color: #ffe69c;
  color: #997404;
  border: 1px solid #ffc107;
  font-weight: bold;
  
  margin-left: 10px; /* 左右のマージンは効く */
  margin-top: 30px;  /* ★上下のマージンは完全に無視される！ */
  padding-top: 15px; /* ★上下のパディングは視覚的に広がるが、上の行に被る！ */
}

/* ⭕️ 良い例：インラインブロックで余白 */
.hspan-wm2-good {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
  font-weight: bold;
  
  display: inline-block;
  margin-top: 25px;      /* ★ちゃんと上の行を押し退けて隙間ができる！ */
  padding: 10px;         /* 上下左右すべて綺麗に効く */
}

.hspan-wm2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hspan-wm2-code-bad { border-left: 4px solid #dc3545; }
.hspan-wm2-code-good { border-left: 4px solid #198754; }
.hspan-wm2-hl-red { color: #e06c75; font-weight: bold; }
.hspan-wm2-hl-green { color: #98c379; font-weight: bold; }

内側の余白を作るpaddingと外側の余白を作るmarginを詳しく知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

テキストの配置と改行のコントロール

<span>タグを使ってテキストを装飾する際、「文字を中央に寄せたい」「長すぎる文字を改行させたくない」「枠からはみ出た文字を省略したい」といったレイアウトの要望が出てきます。

ここでは、実務で頻出するテキスト配置のコントロールとCSSが効かない時の解決策を解説します。

テキストの配置と改行のコントロール
  • 文字の配置（中央寄せ・右寄せ）と行高さ
  • 改行させない方法と改行する方法
  • はみ出た文字の処理

文字の配置（中央寄せ・右寄せ）と行高さ

文字の配置を変えるCSSとしてtext-align: center;（中央寄せ）やtext-align: right;（右寄せ）があります。

これを<span>タグに使おうとした時に、初心者がよく陥るミスがあります。

上記のCSSが効かない原因は、<span>タグがインライン要素であり、「自分の文字の長さしか幅を持っていないから」です。

<span>タグの中の文字を配置調整したい場合は、display: inline-block;かdisplay: block;を指定し、同時にwidthで十分な幅を持たせる必要があります。

❌ 悪い例（text-alignが効かない）
中央寄せしたい文字
span {
  background-color: #f8d7da;
  text-align: center; /* 効かない */
  /* widthがない＆インライン要素だから */
}
⭕️ 良い例（ブロック化して幅を持たせる）
見事に中央寄せ

見事に右寄せ
span {
  background-color: #d1e7dd;
  display: block; /* ブロック化 */
  width: 100%; /* 幅を確保 */
  text-align: center; /* これで効く！ */
}
HTMLコード表示
<div class="hspan-align1-wrapper">
  
  <div class="hspan-align1-demo-area">
    
    <div class="hspan-align1-box">
      <div class="hspan-align1-label" style="color:#dc3545;">❌ 悪い例（text-alignが効かない）</div>
      
      <div class="hspan-align1-visual">
        <span class="hspan-align1-bad">中央寄せしたい文字</span>
      </div>

      <div class="hspan-align1-code hspan-align1-code-bad">
        span {<br>
          background-color: #f8d7da;<br>
          <span class="hspan-align1-hl-red">text-align: center; /* 効かない */</span><br>
          <span class="hspan-align1-hl-red">/* widthがない＆インライン要素だから */</span><br>
        }
      </div>
    </div>

    <div class="hspan-align1-box">
      <div class="hspan-align1-label" style="color:#198754;">⭕️ 良い例（ブロック化して幅を持たせる）</div>
      
      <div class="hspan-align1-visual">
        <span class="hspan-align1-good-center">見事に中央寄せ</span><br><br>
        <span class="hspan-align1-good-right">見事に右寄せ</span>
      </div>

      <div class="hspan-align1-code hspan-align1-code-good">
        span {<br>
          background-color: #d1e7dd;<br>
          <span class="hspan-align1-hl-green">display: block; /* ブロック化 */</span><br>
          <span class="hspan-align1-hl-green">width: 100%;    /* 幅を確保 */</span><br>
          text-align: center; /* これで効く！ */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hspan-align1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-align1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hspan-align1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hspan-align1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hspan-align1-visual {
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}

/* ❌ 悪い例 */
.hspan-align1-bad {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
  text-align: center; /* 意味がない */
}

/* ⭕️ 良い例 */
.hspan-align1-good-center {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
  display: block; /* ★必須 */
  width: 100%;    /* ★必須 */
  text-align: center;
}
.hspan-align1-good-right {
  background-color: #e2e3e5;
  color: #41464b;
  border: 1px solid #ced4da;
  display: block; /* ★必須 */
  width: 100%;    /* ★必須 */
  text-align: right;
}

.hspan-align1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hspan-align1-code-bad { border-left: 4px solid #dc3545; }
.hspan-align1-code-good { border-left: 4px solid #198754; }
.hspan-align1-hl-red { color: #e06c75; font-weight: bold; }
.hspan-align1-hl-green { color: #98c379; font-weight: bold; }

改行させない方法と改行する方法

電話番号や「株式会社〇〇」といった社名が、スマホの画面の端で不自然に折り返されてしまうのを防ぎたい場面があります。

「ここで絶対に改行させない」という指定をしたい場合は、対象を<span>で囲み、white-space: nowrap;を指定します。

これで、画面からはみ出そうとも文字は一行になります。

❌ 悪い例（nowrapなし：自動改行される）
参考URL：
https://www.example.com/this-is-a-very-long-url-that-causes-problems
/* nowrapがないため、
コンテナの幅で自動的に折り返されます */
⭕️ 良い例（nowrapあり：絶対に改行しない）
参考URL：
https://www.example.com/this-is-a-very-long-url-that-causes-problems
span {
  white-space: nowrap;
  /* これで絶対に改行されない。右へ突き抜ける */
}

※枠（コンテナ）の右側へ突き抜け、はみ出した部分が隠れています（overflow-x: hidden）。

HTMLコード表示
<div class="hspan-wrap2-wrapper">
  
  <div class="hspan-wrap2-demo-area">
    
    <div class="hspan-wrap2-box">
      <div class="hspan-wrap2-label" style="color:#dc3545;">❌ 悪い例（nowrapなし：自動改行される）</div>
      
      <div class="hspan-wrap2-visual" style="width: 180px; border: 2px dashed #dc3545; overflow: visible; box-sizing: border-box;">
        参考URL：<br>
        <span class="hspan-wrap2-bad">https://www.example.com/this-is-a-very-long-url-that-causes-problems</span>
      </div>

      <div class="hspan-wrap2-code hspan-wrap2-code-bad">
        /* nowrapがないため、<br>
           コンテナの幅で自動的に折り返されます */
      </div>
    </div>

    <div class="hspan-wrap2-box">
      <div class="hspan-wrap2-label" style="color:#198754;">⭕️ 良い例（nowrapあり：絶対に改行しない）</div>
      
      <div class="hspan-wrap2-visual" style="width: 180px; border: 2px dashed #198754; overflow-x: hidden; box-sizing: border-box;">
        参考URL：<br>
        <span class="hspan-wrap2-good">https://www.example.com/this-is-a-very-long-url-that-causes-problems</span>
      </div>

      <div class="hspan-wrap2-code hspan-wrap2-code-good">
        span {<br>
          <span class="hspan-wrap2-hl-green">white-space: nowrap;</span><br>
          /* これで絶対に改行されない。右へ突き抜ける */<br>
        }
      </div>
      <p class="hspan-wrap2-note" style="color:#198754;">※枠（コンテナ）の右側へ突き抜け、はみ出した部分が隠れています（<code>overflow-x: hidden</code>）。</p>
    </div>

  </div>
</div>
CSSコード表示
.hspan-wrap2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-wrap2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.hspan-wrap2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hspan-wrap2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hspan-wrap2-visual {
  font-size: 14px;
  color: #333;
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
  line-height: 1.6;
}

/* ❌ 悪い例のspan：標準挙動 */
.hspan-wrap2-bad {
  color: #0d6efd;
  font-weight: bold;
  background-color: #e7f1ff; /* 薄い青の背景 */
  padding: 0 4px;
  /* ここは何も指定しない */
}

/* ⭕️ 良い例：nowrap */
.hspan-wrap2-good {
  color: #0d6efd;
  font-weight: bold;
  background-color: #e7f1ff; /* 薄い青の背景 */
  padding: 0 4px;
  /* ここ */
  white-space: nowrap; 
}

/* コードブロック等はそのまま */
.hspan-wrap2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hspan-wrap2-code-bad { border-left: 4px solid #dc3545; }
.hspan-wrap2-code-good { border-left: 4px solid #198754; }
.hspan-wrap2-hl-green { color: #98c379; font-weight: bold; }
.hspan-wrap2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

white-spaceプロパティの使い方を詳しく知りたい人は「【html&css】white-spaceの使い方とnowrap・pre・pre-wrapの使い分け」を一読ください。

【html&css】white-spaceの使い方とnowrap・pre・pre-wrapの使い分け

はみ出た文字の処理

ブログの記事一覧などで、長すぎるタイトルの末尾を「…」と省略して表示するテクニックは実務でよく使われます。

インライン要素である<span>にはそもそも幅が存在しないため、省略処理ができません。

<span>で末尾を「…」にしたい場合は、display: inline-block;（または block）を指定して幅を持たせた上でCSSを記述してください。

❌ 悪い例（省略されず突き抜ける）
長すぎるタイトルが枠を飛び出してレイアウトを壊してしまいます
span {
  /* ellipsisだけ書いても効かない！ */
  text-overflow: ellipsis;
}
⭕️ 良い例（「…」で美しく省略）
長すぎるタイトルが枠内で美しく省略されます
span {
  display: inline-block; /* ①幅を持たせる */
  width: 100%; /* ②幅の制限 */
  white-space: nowrap; /* ③改行させない */
  overflow: hidden; /* ④はみ出しを隠す */
  text-overflow: ellipsis; /* ⑤「…」にする */
}

※この5行は「文字省略のテンプレ」として実務で頻繁に使うので丸暗記推奨です。

HTMLコード表示
<div class="hspan-over3-wrapper">
  
  <div class="hspan-over3-demo-area">
    
    <div class="hspan-over3-box">
      <div class="hspan-over3-label" style="color:#dc3545;">❌ 悪い例（省略されず突き抜ける）</div>
      
      <div class="hspan-over3-visual" style="width: 250px;">
        <span class="hspan-over3-bad">長すぎるタイトルが枠を飛び出してレイアウトを壊してしまいます</span>
      </div>

      <div class="hspan-over3-code hspan-over3-code-bad">
        span {<br>
          /* ellipsisだけ書いても効かない！ */<br>
          <span class="hspan-over3-hl-red">text-overflow: ellipsis;</span><br>
        }
      </div>
    </div>

    <div class="hspan-over3-box">
      <div class="hspan-over3-label" style="color:#198754;">⭕️ 良い例（「...」で美しく省略）</div>
      
      <div class="hspan-over3-visual" style="width: 250px;">
        <span class="hspan-over3-good">長すぎるタイトルが枠内で美しく省略されます</span>
      </div>

      <div class="hspan-over3-code hspan-over3-code-good">
        span {<br>
          <span class="hspan-over3-hl-green">display: inline-block; /* ①幅を持たせる */</span><br>
          <span class="hspan-over3-hl-green">width: 100%;           /* ②幅の制限 */</span><br>
          <span class="hspan-over3-hl-green">white-space: nowrap;   /* ③改行させない */</span><br>
          <span class="hspan-over3-hl-green">overflow: hidden;      /* ④はみ出しを隠す */</span><br>
          <span class="hspan-over3-hl-blue">text-overflow: ellipsis; /* ⑤「...」にする */</span><br>
        }
      </div>
      <p class="hspan-over3-note" style="color:#198754;">※この5行は「文字省略のテンプレ」として実務で頻繁に使うので丸暗記推奨です。</p>
    </div>

  </div>
</div>
CSSコード表示
.hspan-over3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-over3-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hspan-over3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hspan-over3-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hspan-over3-visual {
  font-size: 14px;
  color: #333;
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #ced4da;
}

/* ❌ 悪い例：ただellipsisを指定しただけ */
.hspan-over3-bad {
  color: #0d6efd;
  font-weight: bold;
  text-overflow: ellipsis; /* これだけでは無意味 */
}

/* ⭕️ 良い例：必須プロパティを揃えた省略 */
.hspan-over3-good {
  color: #0d6efd;
  font-weight: bold;
  
  display: inline-block; /* 必須① */
  width: 100%;           /* 必須② */
  white-space: nowrap;   /* 必須③ */
  overflow: hidden;      /* 必須④ */
  text-overflow: ellipsis; /* 必須⑤ */
  vertical-align: bottom; /* ズレ防止 */
}

.hspan-over3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hspan-over3-code-bad { border-left: 4px solid #dc3545; }
.hspan-over3-code-good { border-left: 4px solid #198754; }
.hspan-over3-hl-red { color: #e06c75; font-weight: bold; }
.hspan-over3-hl-green { color: #98c379; font-weight: bold; }
.hspan-over3-hl-blue { color: #61afef; font-weight: bold; }
.hspan-over3-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

overflowプロパティの使い方を詳しく知りたい人は「【html&css】overflowの使い方とhiddenやscrollの使い分け」を一読ください。

【html&css】overflowの使い方とhiddenやscrollの使い分け

JavaScriptや属性を使った応用操作

<span>タグの用途は、単なるCSSデザインの目印にとどまりません。

フロントエンド開発の現場では、JavaScriptから特定の部分のテキストを動的に書き換えたり、様々なHTML属性を付与してWebサイトの使い勝手を向上させたりするパーツとして活躍します。

ここでは、JavaScriptとの連携方法と属性の使い方、実務で頻発するアクセシビリティ上の重大なミスについて解説します。

JavaScriptや属性を使った応用操作
  • classやidの指定とクリックイベント
  • タイトル属性でのツールチップ表示とアクセシビリティ

classやidの指定とクリックイベント

JavaScriptで文字を操作したい場合、対象の<span>タグに対して<span id="price">のようにidをつけたり、複数の要素を操作するclassをつけたりするのが基本です。

これにより、JS側から要素を特定し、中のテキスト（innerHTML）を書き換えられます。

クリックして何かアクションを起こす要素を作りたい時は、<button>タグを使用してください。

どうしてもデザインの都合で<span>にクリックイベントを付けたい場合は、role="button"を付与しtabindex="0"でフォーカス可能にし、キーボード操作にも対応させるJavaScriptを書く必要があります。

⚡ JavaScriptによる動的書き換えとボタン実装

現在のカウント：0

❌ spanボタン
(Tabキーで選べない)
<!– JSから操作するため id をつける –>
カウント：<span id=”counter”>0</span>

<!– ❌ 最悪の実装（キーボード操作不可） –>
<span onclick=”countUp()”>増やす</span>

<!– ⭕️ 推奨の実装（必ずbuttonを使う） –>
<button onclick=”countUp()”>増やす</button>

※見た目をCSSで同じように整えても、HTMLの「タグの意味」が違えば、目に見えない部分での使いやすさに大きな差が出ます。

HTMLコード表示
<div class="hspan-js1-wrapper">
  
  <div class="hspan-js1-demo-area">
    
    <div class="hspan-js1-box">
      <div class="hspan-js1-label">⚡ JavaScriptによる動的書き換えとボタン実装</div>
      
      <div class="hspan-js1-visual">
        <p style="margin: 0 0 15px 0; font-size: 14px; color: #333;">
          現在のカウント：<span id="hspan-js1-counter" style="font-weight: bold; color: #0d6efd; font-size: 18px;">0</span>
        </p>
        
        <div style="display: flex; gap: 10px;">
          <span class="hspan-js1-btn-bad" onclick="document.getElementById('hspan-js1-counter').innerHTML = parseInt(document.getElementById('hspan-js1-counter').innerHTML) + 1;">
            ❌ spanボタン<br><small>(Tabキーで選べない)</small>
          </span>
          
          <button class="hspan-js1-btn-good" onclick="document.getElementById('hspan-js1-counter').innerHTML = parseInt(document.getElementById('hspan-js1-counter').innerHTML) + 1;">
            ⭕️ 正規のボタン<br><small>(Tabキーで選べる)</small>
          </button>
        </div>
      </div>

      <div class="hspan-js1-code">
        <!-- JSから操作するため id をつける --><br>
        カウント：<span <span class="hspan-js1-hl-green">id="counter"</span>>0</span><br><br>
        <!-- ❌ 最悪の実装（キーボード操作不可） --><br>
        <span <span class="hspan-js1-hl-red">onclick="countUp()"</span>>増やす</span><br><br>
        <!-- ⭕️ 推奨の実装（必ずbuttonを使う） --><br>
        <<span class="hspan-js1-hl-green">button</span> onclick="countUp()">増やす</<span class="hspan-js1-hl-green">button</span>>
      </div>
      <p class="hspan-js1-note">※見た目をCSSで同じように整えても、HTMLの「タグの意味」が違えば、目に見えない部分での使いやすさに大きな差が出ます。</p>
    </div>

  </div>
</div>
CSSコード表示
.hspan-js1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-js1-demo-area {
  display: flex;
  justify-content: center;
}
.hspan-js1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hspan-js1-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hspan-js1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* ❌ 悪いspanボタンの装飾 */
.hspan-js1-btn-bad {
  display: inline-block;
  background-color: #dc3545;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  flex: 1;
  font-size: 14px;
  font-weight: bold;
}
.hspan-js1-btn-bad small { font-weight: normal; font-size: 10px; display: block; margin-top: 4px;}

/* ⭕️ 良いbuttonタグの装飾 */
.hspan-js1-btn-good {
  background-color: #198754;
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  flex: 1;
  font-size: 14px;
  font-weight: bold;
}
.hspan-js1-btn-good small { font-weight: normal; font-size: 10px; display: block; margin-top: 4px;}

.hspan-js1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.hspan-js1-hl-green { color: #98c379; font-weight: bold; }
.hspan-js1-hl-red { color: #e06c75; font-weight: bold; }
.hspan-js1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

buttonタグの使い方を詳しく知りたい人は「【HTML】buttonタグの使い方：リンク・CSS装飾・無効化」を一読ください。

【HTML】buttonタグの使い方：リンク・CSS装飾・無効化

タイトル属性でのツールチップ表示とアクセシビリティ

<span>タグには、補足情報を付与する便利な属性がいくつかあります。

代表的なのが、マウスを乗せた時に小さな説明文を出すtitle属性です。

また、画面上から要素を見えなくするhidden属性や要素に役割を与えるrole属性も重要です。

<span>を「押せない状態（無効化）」にしたい場合は、属性ではなくpointer-events: none;とopacity: 0.5;を組み合わせて、擬似的にクリック不可＆グレーアウト状態を表現する必要があります。

💡 title属性と無効化（disabled）の表現

専門用語の補足：
HTMLとは？（※マウスを乗せてください）

ボタン風spanの無効化：
送信できないspan

<!– 1. マウスホバーで説明を出す –>
<span title=”説明文をここに書く”>専門用語</span>

<!– 2. spanを無効化（クリック不可）にする –>
<!– ❌ <span disabled> は効かない！ –>
<span class=”is-disabled“>ボタン風</span>

/* CSSでクリックを物理的にブロックする */
.is-disabled {
  opacity: 0.5; /* 半透明にして見た目を変える */
  pointer-events: none; /* クリックさせない */
}
HTMLコード表示
<div class="hspan-js2-wrapper">
  
  <div class="hspan-js2-demo-area">
    
    <div class="hspan-js2-box">
      <div class="hspan-js2-label">💡 title属性と無効化（disabled）の表現</div>
      
      <div class="hspan-js2-visual">
        <p style="margin: 0 0 15px 0; font-size: 14px; color: #333;">
          専門用語の補足：<br>
          <span class="hspan-js2-tooltip" title="HyperText Markup Languageの略。Webページを作るための言語です。">HTMLとは？</span>（※マウスを乗せてください）
        </p>
        
        <p style="margin: 0; font-size: 14px; color: #333;">
          ボタン風spanの無効化：<br>
          <span class="hspan-js2-fake-btn hspan-js2-disabled-span" onclick="alert('クリックされました！');">送信できないspan</span>
        </p>
      </div>

      <div class="hspan-js2-code">
        <!-- 1. マウスホバーで説明を出す --><br>
        <span <span class="hspan-js2-hl-green">title="説明文をここに書く"</span>>専門用語</span><br><br>
        <!-- 2. spanを無効化（クリック不可）にする --><br>
        <!-- ❌ <span disabled> は効かない！ --><br>
        <span class="<span class="hspan-js2-hl-blue">is-disabled</span>">ボタン風</span><br><br>
        /* CSSでクリックを物理的にブロックする */<br>
        .is-disabled {<br>
          opacity: 0.5; /* 半透明にして見た目を変える */<br>
          <span class="hspan-js2-hl-blue">pointer-events: none;</span> /* クリックさせない */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hspan-js2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hspan-js2-demo-area {
  display: flex;
  justify-content: center;
}
.hspan-js2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hspan-js2-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hspan-js2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* ツールチップ付きのspan */
.hspan-js2-tooltip {
  color: #0d6efd;
  font-weight: bold;
  border-bottom: 1px dashed #0d6efd;
  cursor: help; /* マウスをハテナマークにする */
}

/* ボタン風のspan */
.hspan-js2-fake-btn {
  display: inline-block;
  background-color: #0d6efd;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  margin-top: 5px;
  cursor: pointer;
}

/* ★CSSによる疑似的なdisabled状態 */
.hspan-js2-disabled-span {
  background-color: #6c757d;
  opacity: 0.5; /* 半透明にして非アクティブ感を出す */
  pointer-events: none; /* ★クリック操作を完全に無効化する */
}

.hspan-js2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.hspan-js2-hl-green { color: #98c379; font-weight: bold; }
.hspan-js2-hl-blue { color: #61afef; font-weight: bold; }

cursorの種類やpointerの使い方を詳しく知りたい人は「【CSS】cursorの種類とpointerの使い方」を一読ください。

【CSS】cursorの種類とpointerの使い方

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 基本の性質
    特定の意味を持たない「インライン要素」。
    主に文章の一部をデザインする際やJSで操作する際の目印として使用する。
  • divタグとの違い
    divは前後に改行が入る「ブロック要素」。
    spanは改行されず文章の中に溶け込む「インライン要素」。
  • 入れ子のルール
    spanの中にspanを入れるのは問題ないが、spanの中にブロック要素（pやdiv）を入れるのは文法違反。
  • サイズ・余白の制限
    インライン要素のままではwidth、height、上下のmarginが効かない。
    上下のpaddingは他の行に被ってしまう。
  • 制限の解除方法
    CSSでdisplay: inline-block;を指定することで、インラインのまま幅や高さ、上下の余白を持たせることができる。
  • テキストの配置
    text-align（中央寄せ・右寄せ）を効かせるには、display: block;等でブロック化し、幅（width）を持たせる必要がある。
  • 改行の制御
    意図しない改行を防ぐ場合はwhite-space: nowrap;を指定する。
  • 文字の省略表示
    長すぎる文字を「…」にするには、インラインブロック化した上でwidth、nowrap、overflow: hidden;、text-overflow: ellipsis;を組み合わせる。
  • アクセシビリティ
    spanにonclickをつけてボタンの代わりにするのはNG。
  • 無効化の表現
    spanにdisabled属性は効かない。
    無効状態にする場合はpointer-events: none;とopacityで表現する。

よくある質問（FAQ）

spanタグとdivタグの違いは何ですか？

画面に配置される際の「挙動（要素の性質）」が異なります。

<div>は「ブロック要素」と呼ばれ、前後に自動で改行が入り、レイアウトの箱（枠組み）を作るために使われます。

一方、<span>は「インライン要素」と呼ばれ、改行されずに文章の一部として溶け込むため、テキストの一部だけ色を変えるといった部分的な装飾に使われます。

spanタグにwidthやmarginが効かないのはなぜですか？

<span>タグが「インライン要素（行の一部）」として定義されているためです。

ブラウザは文章の形が崩れるのを防ぐため、インライン要素に対する幅・高さ・上下の余白の指定を意図的に無視します。

<span>タグに幅や余白を持たせたい場合は、display: inline-block;を追加指定して、性質を上書きする必要があります。

spanタグ自体に何か意味（SEO効果など）はありますか？

いいえ、<span>タグ自体には特定の意味やSEO効果はありません。

単なる「デザインやプログラム用の目印（汎用コンテナ）」です。

もし検索エンジンに対して「ここは重要なキーワードである」と意味を伝えたい場合は、<span>ではなく <strong>タグや<em>タグを使用するのが正しいHTMLの書き方です。

spanタグの中に、pタグやdivタグを入れても大丈夫ですか？

いいえ、絶対に入れてはいけません。

HTMLのルールとして、「インライン要素」の中に「ブロック要素」を入れることは禁止されています。

これを破るとレイアウト崩れの原因になります。

複数の段落や箱をひとまとめにしたい場合は、<div>タグで囲んでください。

spanタグの中で意図しない改行が起きてしまいます。防ぐ方法はありますか？

スマートフォンなどの画面で、電話番号や会社名が不自然な位置で改行されてしまう場合はCSSを使用します。

改行させたくないテキストを<span>タグで囲み、white-space: nowrap;を指定してください。

これにより、画面の端に到達しても文字が折り返されず、ひとまとまりの単語として表示を保つことができます。

HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次