spanタグとは？htmlでの使い方など徹底解説！

spanタグとは、テキストなどのコンテンツを際立たせてデザインの微調整したり、グループ化する際に使う汎用的なHTMLタグのことです。
このspanタグはインライン要素ですが、ブロック要素のdivタグと用途が似てます。
また、spanタグを使うことによる直接的な SEOへの影響はありません。

一方、spanタグを不適切に扱えば、デザインの崩れに繋がります。
具体的には、高さや横幅、上下の余白を調節したいコンテンツにspanタグをマークアップしたとします。
この場合、spanタグはインライン要素なので高さや横幅、上下の余白指定するCSSのプロパティ「width」や「height」「margin-top、margin-bottom」が効きません。
そうなれば、コンテンツのサイズが大きすぎたり、小さすぎたり、コンテンツ同士の距離が近すぎて詰まるなどの可能性が高まります。
結果、ユーザーが読みずらいコンテンツになるのでGoogleから評価されづらくなるというわけです。

こうした良くない状況を回避する為に、spanタグを適切に使って、わかりやすいコンテンツにしましょう。

この点踏まえて今回は、spanタグの意味やhtmlでの使い方など中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

spanタグとは？

spanタグとは、汎用的なhtmlタグで、囲んだ要素を強調するなどのデザイン微調整によく利用されるタグです。

具体的には個別にテキストのフォント調整、文字色・背景色の変更を施すのによく利用します。
特徴としては、インライン要素のため、そのまま利用すると幅や位置の調整に多少制限があります。

spanタグとdivタグの使い分け

まず、htmlのspanタグとdivタグの使い分けで悩むかと思われますが、これを正しく知るにはインライン要素とブロック要素を理解することが大切です。

spanタグは、divタグのような使い方をしますが、インライン要素のため、幅や位置、余白などの指定に多少制限があります。
そのため、spanタグはテキストの装飾を中心とした使い方が多くみられます。

一方、divタグはブロック要素のため、幅や位置、余白などの指定が柔軟にできます。
主にdivタグの段落の中にpタグでテキストを記述して、部分的にspanで装飾をするといった使い方をします。

また、spanタグのようなインライン要素を、divタグのようブロック要素として扱うには、以下のようにcssで「display:block;」を指定する方法があります。

spanタグの使い方

先ほどもご説明した通り、spanタグはインライン要素というだけあって、使用するにあたって少し特徴があります。
この特徴をよく知った上でhtmlに無駄のないすっきりとした記述を目指しましょう。

基本的な使い方

spanタグの基本的な使い方は主に2パターンです。

• HTML上で使う場合は、style属性を指定する
• CSSと連携して使う場合は、class属性やid属性を指定する

HTML上で使う場合は、style属性を指定する

HTML上で使う場合は、html上で直接cssを適用できるstyle属性を指定します。
指定したstyle属性でcssを定義してデザインします。

CSSと連携して使う場合は、class属性やid属性を指定する

CSSと連携して使う場合は、html上でclass属性やid属性を指定します。
html上で指定したclass属性やid属性をcssで定義してデザインします。
cssの記述では、「要素名.クラス名もしは#id名 {プロパティ名:値;}」という書式です。
※要素名は省略できます。

idは数種類用意していても1ページにつきそれぞれ1回の使用となる点がclass属性とは異なります。

例えば#sampleというidがあったとします。これを1ページ内に複数使用しないということです。
その中に入るclassは同じ要素名であったとしても複数使用しても問題ありません。

ただ、そうしなければ表示されないわけではなく、あらゆるコンテンツをグルーピングするといった意味を持つと言うとわかりやすいかもしれません。
ページ内リンクで指定するidがページ内に複数あれば困ってしまいますよね？そういった意味でも正しく記述しておくと良いでしょう。

文字色・背景色を指定

「color」プロパティに値を入れて、文字色が指定できます。
「background-color」プロパティに値を入れて、背景色が指定できます。

右寄せにする

spanタグがインライン要素のためこのままでは、「右寄せ」を指定しても無効となります。
spanタグにcssを適用し、「display」プロパティにblock値を入れて、ブロック要素に切り替えることで「右寄せ」が有効になります。

横幅を指定する

spanタグは“インライン要素”のため、デフォルトでは「width」を指定しても無効となります。
横幅を指定したい場合は、cssで「display」プロパティにblock値を記述してブロック要素に変更します。

このようにspanはインライン特有の表現があるため、ブロック要素にすることで、「width」が有効になります。

文字サイズを指定する

「font-size」プロパティに値を入れて、フォント（文字）サイズが指定できます。
フォントサイズはpx、em、％などの単位で指定します。

marginを指定する

spanタグのmarginは左右の指定のみが有効となります。
上下のmargin指定を有効にするには、spanタグにcssを適用し、「display」プロパティにblock値を入れて、ブロック要素に切り替えます。
ブロック要素にすることで、上下のmargin（余白）指定も有効になります。

spanの入れ子について

spanタグに入れていいのはインライン要素のみとなり、主にspanタグやaタグが入ります。
そしてspanの中にspan、そしてさらにその中にspanといった入れ子で使用しても問題ありません。

spanタグの中にブロック要素であるdivタグやhタグなどは入れることはできません。
pタグはブロック要素なため、spanタグの中に入れてもページを表示してみると外に出てしまいます。
インライン要素とブロック要素を使い分けで正しく記述しましょう。

spanタグの縦並びと横並びについて

spanタグはインライン要素のため、spanタグで括られた内容を続けて記述しても横並びに表示されてしまいます。
これを縦並びにさせるには、spanの「display」プロパティにblock値を入れて、以下のようブロック要素に切り替える必要があります。

まとめ：spanタグを適切に使って、わかりやすいコンテンツにしよう

ということで今回はspanタグについて使い方などをご説明しましたが、インライン要素とブロック要素を理解して、htmlがdivやspanだらけにならないように記述すると後々管理も楽になるかと思われます。

divとspanを要領よく使用して、なるべくすっきりとしたhtmlを目指しましょう。