【初心者向け】span 要素について調べてみた【HTML】

2024/10/13 2024/10/22 更新 Web

span 要素のこと、
ちゃんと理解して使えてますか？！

私は、span 要素があまり好きではありませんでした。なぜなら、どうしようもなくなったときに苦し紛れで召喚する最後の手段みたいなイメージがあったからです。~~あと語呂があまり好きじゃないです……。~~というのも結局 span 要素についてあまりよく知らなかったからです。

知ってしまえば何のその！すごく便利な要素です！
（手のひら返し）

この記事でわかること

span 要素の基本的な使いどころ
span 要素を使った簡単なコード

HTML では、超重要な必須の要素！そんな span 要素のことについてまとめてみましたので、ぜひ参考にしていただき正しく恐れず使っていただけたら幸いです！

span とは

span（スパン：名詞）の意味は、主に「期間」や「範囲」です。よく日常会話で『1か月スパンで！』などと耳にすることがありますよね。

HTMLにおける span もこの“ここからここまで”という範囲のニュアンスで考えると分かりやすいです！

単語

span：【名詞】期間、短時間、全範囲（weblio）

動詞としての意味でも「～を指で測る」といった小さな範囲での span もあるので、ちょっとしたテキストや要素を囲むイメージとして理解するとよいですね。また、時間的な範囲、物理的な範囲、大小、けっこう幅広い意味で使われるようです。

ちなみに！
あのランチョンミートの「スパム（spam）」とは別物です！

span 要素は
インライン要素である！

span 要素はインライン要素で、セマンティック的な意味は持たず、汎用的なインラインコンテナとして使用されます。また、class や id といったグローバル属性と一緒に使用すると便利です。

意味合いは、div 要素に似てますね。
しかし、div 要素はブロック要素であり、span 要素はインライン要素という違いがあります。

display: inline;

span 要素の display プロパティは、初期値として
diplay: inline;
が設定されています。

つまり、
span 要素は「インライン要素」ということです。超ざっくり簡単に説明すると『文章の一部としてあつかう』、『要素を入れても改行されない』という感じですね。

具体的には、
文字の色や太さを変えたりといったスタイルを自然につけることができます。

span 要素が
内包できる要素は？

さて、
みんな大好きコンテンツモデルのお話です！

コンテンツモデルがわからない方は、下の記事をぜひご参照ください！

【HTML5】コンテンツモデルについて調べてみた

span 要素が内包することができる要素のカテゴリは、Phrasing content（フレージングコンテンツ）です。代表的な要素としては、a 要素、img 要素です。

そして、span 要素自身もフレージングコンテンツのカテゴリに含まれます。何が言いたいのかというと、span 要素の中に span 要素を入れることは問題ではありません。少なくとも W3C のページではそのことに関しては言及されてはいません。かといってむやみやたらに使うのはコードがわかりづらくなるし SEO に良い影響はないと思いますので、あくまで必要に応じて使いましょう！

span 要素の使いどころ

では、『span 要素はどんなときに使うの？』というところですが、具体例をいくつか見ていきたいと思います。べつにそんなに難しくないので、コーヒーでも飲みながらリラックスして見ていきましょう！

span 要素でテキストにスタイルを付ける！

基本中の基本ですよね！

まず、
HTML でスタイルをつけたい部分を span 要素を囲い、class 属性をつけます。

<p>ニュートンは木から<span class="red">リンゴ</span>が落ちるのを見た。</p>

次に、
任意のスタイルを CSS で設定すると、

.red{
  color: #ff0000;
  font-weight: bold;
}

スタイルが反映されます！

ニュートンは木からリンゴが落ちるのを見た。

span 要素はインライン要素なので、改行されずに文章の一部として自然にスタイルが適応されていることがわかりますね！

span 要素の中にフレージングコンテンツを入れてみる！

分かりやすそうなところで strong 要素（この要素もフレージングコンテンツ）を入れてみます。span 要素は装飾を目的とした汎用、strong 要素は強調をセマンティック的な意図です。

<p>ニュートンは木から<span class="red">リンゴが<strong>落ちるのを</strong>見て</span>、何か思った。</p>

.red{
  color: #ff0000;
}

ニュートンは木からリンゴが落ちるのを見て、何か思った。

今回は、span 要素がフレージングコンテンツの要素を内包できるという一例として用意したものなので、strong 要素で囲った方がより適切とか美しいとかというのには、目を瞑っていただけたらと思います……！

span 要素と ::before 疑似要素で、
アイコンを付ける！

さてさて、
これが私が一番説明をしたかったことです！

この span 要素、すごく便利で、文中の任意のテキストを span 要素で囲いそのテキストの前や後ろにアイコンを付けたりなんてこともできるんです！

<p>ニュートンの頭の上に<span class="apple">リンゴ</span>が、落ちた。</p>

この文の span 要素で囲ったところをレッドに、そしてその前（::before）にリンゴのアイコンを設置するスタイルを CSS に記述します。（細かな設定の説明は割愛します。）

.apple{
  color: #ff0000;
}
.apple::before{
  content:'\f5d1';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;  
  padding-left: 1em;
  padding-right: 1em;

}

ニュートンの頭の上にリンゴが、落ちた。

このように、
疑似要素と組み合わせて文中にアイコンを表示させたり、といった使い方がされています！

今回アイコンは「Font Awesome」というサービスを利用してつけました。詳しくは下のリンクからご参照ください！

【CSS】Font Awesome アイコンを疑似要素で付ける方法【before , after】

まとめ

span 要素について少し理解することができましたでしょうか？

span 要素は、セマンティック的には意味がなく汎用的に使われる要素です。主に装飾目的で使用されることが多いです。「インライン要素」のため、テキスト中で改行させずに自然に装飾を施すことができます。色を付けたり、太くしたり、さらに疑似要素と組み合わせることでアイコンを挿入したりといったスタイルを設定することが可能です。

どんどん使っていきましょう！

参考・出典

・weblio. 「spanとは意味・読み方・使い方」. https://ejje.weblio.jp/content/span, 2024年10月12日閲覧。

・W3C. 「4.5.26 The span element」. https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element, 2024年10月12日閲覧。

・MDN. 「<span>: コンテンツ区間要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/span, 2024年10月12日閲覧。

・W3C. 「4.5.3 The strong element」. https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong-element, 2024年10月12日閲覧。