タグとは

2024年6月23日

<span>タグは、HTMLで特定のテキストや他のHTML要素をインラインレベルで囲むために使用されるタグです。ブロックレベルのタグ（例えば、<div>タグ）が内容全体をブロック単位で囲むのに対し、<span>タグはインライン要素を囲むため、通常はテキストや他のインライン要素に対してスタイルやスクリプトを適用するために使用されます。

主な特徴と使用例

  1. インライン要素:
    • spanタグはインライン要素であり、他のインライン要素やテキストの中に置くことができます。これに対して、<div>タグはブロックレベル要素であり、ブロックの中にのみ置くことができます。
  2. スタイリング:
    • spanタグはスタイルシート（CSS）を適用するためによく使用されます。特定の部分のテキストに色、フォント、サイズなどのスタイルを適用したい場合に便利です。
  3. スクリプトのターゲット:
    • JavaScriptなどのスクリプトから特定の要素を操作するために使われることも多いです。id属性やclass属性を用いて、特定のspan要素をターゲットにすることができます。

例

基本例

html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spanタグの例</title>
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>これは通常のテキストです。しかし、<span class="highlight">この部分は強調されています。</span></p>
</body>
</html>

この例では、<span>タグを使って特定のテキストを強調表示しています。スタイルシートで.highlightクラスに対して赤色と太字を指定しています。

スクリプトの例

html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpanタグとJavaScriptの例</title>
    <style>
        .highlight {
            color: blue;
        }
    </style>
</head>
<body>
    <p id="text">このテキストは<span id="changeMe">クリックで変わる</span>部分があります。</p>
    <script>
        document.getElementById("changeMe").onclick = function() {
            this.classList.toggle("highlight");
        }
    </script>
</body>
</html>

この例では、<span>タグにid属性を付けて、JavaScriptでクリックしたときにその部分のクラスを切り替えています。これにより、クリックするたびに色が変更されます。

spanタグの属性

  • id: 要素を一意に識別するために使用します。
  • class: スタイルシートやスクリプトで同じスタイルや動作を適用するために使用します。
  • style: インラインスタイルを直接指定するために使用します。

<span>タグは非常に柔軟で、特定のテキストやインライン要素に対してスタイルやスクリプトを適用したい場合にとても便利です。

未分類

Posted by ぼっち