はじめに
HTML の<span>タグは、スタイリングの目的で要素をグループ化するために使用されます。フレージングコンテンツの汎用コンテナと考えることができます。<span>タグは<div>タグに似ていますが、<div>がブロックレベル要素であるのに対し、<span>はインライン要素です。<span>タグ自体は何も表していません。この実験では、<span>タグを使ってスタイリングの目的で要素をグループ化する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080タブを更新してウェブページをプレビューできます。
HTML コードの追加
index.htmlファイルで、<body>タグの中に次のコードを追加します。
<p>This is a <span>simple</span> example of using the span tag.</p>
ここでは、<span>タグの中に「simple」という単語が含まれた段落を作成しました。これにより、このタグの使い方を実際に理解するのに役立ちます。
要素にスタイルを付ける
では、<span>タグの中に含まれるコンテンツにスタイルを付ける方法を見てみましょう。たとえば、「simple」という単語に色を付けたい場合、CSS のcolorプロパティを使うことができます。
<head>タグの中に次の CSS コードを追加します。
<style>
span {
color: red;
}
</style>
この CSS コードは、<span>タグの中に含まれるすべてのコンテンツの色を赤色に変更します。「simple」という単語を<span>タグの中に含めているので、赤色で表示されます。
他の HTML タグとの併用でのの使用
<span>タグは、他の HTML 要素とも併用できます。<a>タグと併用する方法を見てみましょう。
<body>タグの中に次の HTML コードを追加します。
<p>
This is a <span><a href="#">link</a></span> example.
</p>
これにより、「link」という単語が<span>タグの中に含まれ、URL # にリンクされた段落が作成されます。
リンク付きのテキストにスタイルを付ける
では、リンクされたテキストにスタイルを付ける方法を見てみましょう。<head>タグの中に次の CSS コードを追加します。
<style>
span a {
color: green;
text-decoration: none;
}
</style>
この CSS コードは、<a>タグの中のテキストの色を緑色に設定し、下線を付けないようにします。
イベント属性の追加
<span>タグはグローバル属性とイベント属性の両方をサポートしています。グローバル属性のclassを使ってスタイルを適用する方法を見てみましょう。
次のように、「simple」という単語を囲む<span>タグにclass属性を追加します。
<p>
This is a <span class="example"><a href="#">link</a></span> example.
</p>
<head>タグの中に次の CSS コードを追加します。
<style>
.example {
font-size: 20px;
}
</style>
この CSS コードは、classがexampleである<span>タグの中のコンテンツのフォントサイズを大きくします。
意味論的な目的でタグを使用する
<span>タグ自体には固有の意味はありませんが、その中に含まれるテキストの意味を伝えるために使用できます。たとえば、日付やパーセンテージを囲むことで、その中のテキストが特別な意味を持つことを示すことができます。
たとえば、index.htmlファイルに次のコードを追加します。
<p>My final score is <span class="score" aria-label="90 percent">90</span>.</p>
この例では、90が<span>タグの中に囲まれ、scoreというクラス名が付けられています。これにより、<span>タグの中のテキストが特別な意味を持つことが伝えられます。また、画面リーダーにアクセシビリティ情報を提供するために、aria-label属性が追加されています。
まとめ
この実験では、HTML の<span>タグを使って要素をグループ化してスタイリングする方法を学びました。また、<span>タグの中に囲まれたコンテンツにスタイルを付ける方法、他の HTML タグと併用する方法、グローバル属性とイベント属性の使い方、および意味論を伝えるための<span>タグの使い方についても学びました。
