VIDEO LESSON

HTMLのspanタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:28動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03HTMLタグ編の二十三本目は、スパンタグです。
0:07スパンは、文章の中の一部分を囲むための、とてもシンプルなタグです。
0:11前回学んだストロングと違い、スパン自体には重要といった特別な意味はありません。
0:17その代わり、意味がないからこそ使い道が広く、文の一部だけにシーエスエスを当てたり、
0:22ジャバスクリプトで書き換えたりする目印として活躍します。
0:27今回は、使いどころ、基本の書き方、記事のコード例、ディブとの違いまで、初心者向けに順番に解説します。
0:34目印を付けるという発想は、この後の学習でも何度も登場する、とても大切な考え方です。
0:40まず、どんな場面で使うかを整理しましょう。
0:43たとえば、文章の中で数字だけを目立たせたいとき、商品名の一部だけ色を変えたいとき、
0:48在庫数や価格のように後から数字が変わる部分を分けたいときです。
0:54ポイントは、意味を持つタグが合わない場合の受け皿だということです。
0:59重要な言葉ならストロング、引用なら別のタグが向いています。
1:03どれも当てはまらないけれど、範囲だけは指定したい。
1:07そんなときにスパンが役立ちます。
1:10逆に、範囲指定の目的がないのに使う必要はありません。
1:14身の回りの商品ページや申込みページを思い浮かべると、数字だけ色が違う表示に心当たりがあるはずです。
1:21基本の書き方です。
1:23スパンは開始タグと終了タグを明示し、その間に、対象にしたい文字を入れます。
1:29段落や見出しといった文章の中で、部分的に使うのが基本です。
1:33スパンで囲んでも、ブラウザーの表示は基本的に変わらず、改行もされません。
1:39これはスパンがインライン要素で、行の中に溶け込む性質だからです。
1:44コード例のように、文章の流れを崩さずに、一部分だけを囲めるのが特徴です。
1:50保存後に再読み込みし、文章が不自然に途切れていないか確認してください。
1:56タグで囲むという操作自体はシンプルなので、まずは一文だけ練習すると感覚がつかめます。
2:03記事の活用事例を見てみましょう。
2:05例は、残り三席です、という一文で、数字の三だけをスパンで囲み、リメイニングというクラスを付けています。
2:14なぜ数字だけを分けるのでしょうか。
2:17席数は申込みがあるたびに変わる情報なので、独立させておくと、シーエスエスで色を付けて目立たせたり、
2:24プログラムで数字だけを更新したりしやすくなるからです。
2:30文章全体ではなく、変化する部分だけを切り出す。
2:34この考え方が、スパンの活用事例の核心です。
2:38練習用ファイルに写して、開発者ツールで構造を確認してみましょう。
2:44席数だけでなく、割引率や残り時間など、変わりやすい数字ほど、この分け方が効果を発揮します。
2:51シーエスエスと組み合わせる使い方です。
2:54スパン自体には見た目の指定がありませんが、クラスを目印にすれば、その部分だけ色を変えたり、
2:58太字にしたり、背景色を付けたりできます。
3:02コード例では、リメイニングというクラスに、赤色と太字を指定しています。
3:07同じクラスを付ければ、ページ内の複数の場所に同じ装飾をまとめて当てられるのも便利な点です。
3:13ただし、見た目が変わっても、スパンの意味が増えるわけではありません。
3:17装飾はシーエスエス、意味はタグ、と分けて考えましょう。
3:21クラス名は、後から見ても役割が分かる名前を付けておくと、修正するときに迷いません。
3:26ジャバスクリプトとの組み合わせも紹介します。
3:30スパンにアイディーを付けておくと、プログラムからその部分だけを探して、文字を書き換えられます。
3:37コード例では、残り席数の数字を、三から二へ更新するイメージです。
3:41在庫表示やタイマーの数字など、変わる部分だけをスパンで切り出す設計は、実務でもよく使われます。
3:48なお、記事も触れているように、スパン自体に結果を通知する機能はありません。
3:54大切な変化を利用者へ知らせる場合は、アウトプットやライブ領域といった、通知向けの仕組みも併せて検討してください。
4:02更新の対象を小さく分けておくほど、プログラムもシンプルで、間違いが起きにくくなります。
4:09スパンの属性を整理します。
4:11この要素には、必須となる専用の属性はありません。
4:14必要に応じて、アイディー、クラス、ラング、データ属性といった、どの要素にも使える共通属性を利用します。
4:22アイディーは文書内で一意な目印に、クラスは複数要素をまとめて選ぶときに、
4:26ラングは内容の言語を示すときに使います。
4:30データ属性は、画面には見せない補助的な値を、プログラム用に持たせたいときに便利です。
4:36属性をたくさん付けることが目的ではないので、装飾や更新といった目的があるときだけ、
4:40必要なものを選んでください。
4:44特にクラスとアイディーの違いは、複数をまとめるか、一つだけか、という点で覚えると整理できます。
4:51間違えやすい、ディブなどとの違いを押さえましょう。
4:54ディブとスパンは、どちらも意味を持たない汎用的な要素です。
4:58違いは大きさで、ディブは段落のようなまとまり全体を囲むブロック要素、スパンは文の一部分を囲むインライン要素です。
5:05一方、ストロングやイーエム、タイムなどは、それぞれ意味を持つタグです。
5:10囲みたい内容に合う意味のあるタグがある場合は、そちらを優先し、意味のあるタグがなく範囲だけ指定したいときにスパンを使う、
5:15という順番で考えると迷いません。
5:20この優先順位を守ると、読み上げソフトや検索エンジンにも、内容の意味が正しく伝わります。
5:26注意点と、よくある間違いを確認します。
5:28一つ目は、目的もなく文章のあちこちをスパンで囲むことです。
5:33目印だらけのコードは読みにくく、後からの修正も大変になります。
5:37二つ目は、見出しや段落の代わりに使う間違いです。
5:41スパンは文の一部専用なので、文書の構造は見出しや段落で作りましょう。
5:46三つ目は、終了タグの書き忘れです。
5:49囲む範囲が意図せず広がってしまうので、開始と終了は必ず対になっているか確認してください。
5:55狭い画面で表示が崩れないか見る習慣も大切です。
5:59公開前にコードを一度読み返し、本当に必要なスパンだけが残っているか見直しましょう。
6:05ブラウザー互換性を確認します。
6:07記事が参照するエムディーエヌの記録では、スパン本体は、クロームが一以降、
6:13エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
6:18対応開始の数字がとても小さいことから分かる通り、昔からある基本の要素なので、
6:22現在の環境では安心して使えます。
6:26ただし、これは要素本体の対応開始の記録であり、シーエスエスやスクリプトの細かな動作までを保証するものではありません。
6:34大切なページでは、スマートフォンなど、利用対象の実機でも表示を確認しておきましょう。
6:40互換性を気にせず使える土台があるからこそ、まずは基本の書き方を正確に覚えることが大切です。
6:46最後に練習とまとめです。
6:48スパンは、特別な意味を持たず、文の一部を装飾や更新の対象にするためのタグでした。
6:53大切なポイントは三つです。
6:55一つ目は、意味のあるタグが合わないときに、範囲指定として使うこと。
6:59二つ目は、クラスやアイディーが、シーエスエスやジャバスクリプトへの目印になること。
7:05三つ目は、ブロック全体ならディブ、文の一部ならスパン、と使い分けることです。
7:10練習として、在庫数や残り席数のような変わる数字を一つスパンで囲み、クラスで色を付けてブラウザーで確認してみてください。
7:18お疲れさまでした。
7:19次回も、HTMLタグの解説を続けましょう。
7:22小さな練習を一つ終えるだけでも、タグの役割が頭の中ではっきり整理されていきます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

spanタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。特別な意味を持たない文字範囲。部分的なCSSやスクリプトの対象にします。

解説記事・サンプルコードを読む：HTMLのspanタグとは？属性・使い方・ブラウザー互換性と活用例 →