spanタグ入門｜Webサイトでの活用方法と応用テクニックを紹介

Webサイトを運営するなら知っておくべき知識の一つですが「spanタグとは聞いたことがあるけれど、何かよくわからない」「spanタグってどうやって使うの？」とお悩みのWeb担当者もいるのではないでしょうか？

そこで本記事では、spanタグの概要や使い方について解説します。divタグ・pタグとの違いも解説するので、ぜひ参考にしてください。

サイト運営の現状課題
把握できてますか？

課題がわからないまま
施策を進めていませんか？
「簡易チェックシート」で
現状の課題を整理して
今後の対策を明確にしましょう！
（初心者の方でもすぐに見直せます！）

• サイト運営の全体像を俯瞰して確認できる
• 現状の課題がどこにあるか明確になる
• 今後やるべき施策の優先順位がつけやすい
• 初心者でも分かりやすい項目設定
• PDF形式だからいつでも手元で確認可能！

まずは現状把握から始めましょう！

課題を整理することで、
施策の効果を最大化する
ことにつながります！

無料配布中

無料ダウンロードは
こちらから

spanタグとは

spanタグとは、HTMLタグの一種で、主にデザインを調整するために使われます。単体では意味を持たないため、CSS(スタイルシート)と組み合わせるのが特徴です。

spanタグで囲った部分をグループ化し、CSSの内容に沿ったデザインを適用します。例えば、段落中の一部を赤色にしたり、特定の単語を太字にしたりすることが可能です。

なお、Webページの構造を作るHTML要素には、主に「block要素」と「inline要素」の2種類があります。block要素は、レイアウトの構築や大きなかたまりとしての要素、つまり文章の枠組みを作る際に使用するものです。

例えばhタグといった見出し全体や、divタグ、pタグなどの設定に使われます。なお、block要素は、余白や幅、位置などを柔軟に変更することが可能です。

一方、inline要素は、文中や他の要素の間に自然に配置される要素です。要素の前後に改行は生じません。この要素は自動的に要素の内容の幅に合わせて表示され、縦方向の余白や幅の設定には制限があります。

spanタグはどちらの要素ですか？

spanタグはinline要素を持っています！

divタグ・pタグとの違い

spanタグと同様、グループ化を行うタグには、divタグとpタグがあります。

spanタグとの違いがいまいち理解できない方もいるでしょう。そこで次からは、divタグ・pタグとspanタグの違いを紹介します。

spanタグとdivタグの違い

spanタグとdivタグの大きな違いは、持っている要素です。

spanタグはinline要素を、divタグはblock要素を持ちます。inline要素を持つspanタグは、テキストの一部、例えば、強調したい単語や特定の色をつけたい部分などをグルーピングするために使用するのが通常です。

一方、block要素を持つdivタグは、主に複数の文章を一つのブロックとしてグルーピングするときに使われます。例えば、囲み枠を設定したいとき、ブロック全体の背景色を変えたいときなどに活用するものです。

このように、spanタグとdivタグはどちらも囲ったテキストをグルーピングする点では共通しています。しかし、まとめる範囲が異なることを覚えておきましょう。

spanタグとpタグの違い

spanタグとpタグも、持っている要素が異なります。pタグはdivタグと同様に、block要素を持つものです。

<p></p>で囲った範囲が一つの段落であることを知らせる役割があります。

そのため、一つの段落だとわかるように、</p>の次は自動で改行されます。

これまでの説明のとおり、spanタグはinline要素であり、テキストの一部をグルーピングするものです。内容やレイアウトに影響を与えない特性を持っているので、pタグのように、</span>の後に改行や空白行が入ることはありません。

spanタグの使い方

spanタグを使用する方法は、style属性を指定する方法と、CSSを利用する方法の2種類があります。

前者はHTMLのみで設定するものです。「<span style=”〇〇”></span>」といった形で使用し、「〇〇」の部分に「色」「背景色」などを意味するstyle属性を指定します。さらに「何色にしたいのか」などの具体的な記述も加える必要があるため、コードが長くなりやすいです。

一方、CSSを利用する方法では、「<span class=”〇〇”></span>」の形で使用し、「〇〇」には自身で設定した属性を記載します。さらに、CSSにclassに関する情報を指定しなければなりません。

後者の方が難易度は高めですが、前者よりも見た目がすっきりします。また、検索エンジンからすると、装飾情報を別でまとめたほうがHTMLを読み取りやすくなるため、CSSを活用する方法がおすすめです。

次からは、spanタグの使い方を具体的に解説します。HTMLとCSS、両方のやり方を紹介するので、spanタグの設定にご活用ください。

文字色・背景色を指定する

まずは、style属性を指定する方法を紹介します。

文字色を変える場合「<span style=”〇〇”></span>」の「〇〇の部分に「color」を、背景色を変える場合は「background-color」を記述してください。例えば、文字色を赤に、背景色を黄色にするには以下のようにします。

<span style="color:red; background-color:yellow;">ここにテキスト</span>

次に、CSSを使う方法です。まずCSSファイルを作成し、任意のclassを作成してください。作成したclassに対して、「color」と「background-color」を設定します。

例えば、class名が「irohenkou」で背景色を黄色、文字色を赤にする場合、CSSは以下のようになります。

.irohenkou {
　color: red;
　background-color: yellow;
}

そして、HTMLでは以下のように記述しましょう。

<span class="irohenkou">ここにテキスト</span>

これらの方法で、spanタグの文字色と背景色を設定できます。なお、色の指定には色名を英語で直接書くほかに、カラーコードを利用する方法もあります。

文字サイズを指定する

style属性を使用して指定する場合、spanタグのstyle属性に「font-size」を追加します。

例えば、文字サイズを20pxに設定するためには以下のように記述してください。

<span style="font-size:20px;">ここにテキスト</span>

一方、CSSを使用して設定する場合は、最初に任意のclassを作成します。

例えば「large-text」というclassを作成し、これを適用した要素の文字サイズを20pxにする場合は、CSSに以下のように記述してください。

.large-text {
　font-size: 20px;
}

HTMLでは以下のように記述します。

<span class="large-text">ここにテキスト</span>

幅・高さを指定する

spanタグは、inline要素であるため、本来、直接の幅や高さを指定しても無効になります。しかし、CSSで「display:inline-block;」を指定すれば、一定の幅や高さを指定することが可能です。

幅と高さを100ピクセルに指定する場合は、CSSに次のとおり記述します。

span {
　display: inline-block;
　width: 100px;
　height: 100px;
}

上記に記述されている「width」が幅、「height」が高さです。幅と高さの指定が効くようにするためには、「display」をinline-blockやblockなど、要素のボックスモデルを使用できる値にする必要があります。

上記の記述を行い、テキストを<span></span>で囲めば、CSSが適用されます。

文字を右寄せにする

spanタグはinline要素という特性上、幅や高さと同様に、「display: inline-block;」を指定しないとテキストを右寄せにできません。CSSで以下のように記述すれば、spanタグに対して右寄せを指定できます。

span {
　display: block;
　text-align: right;
}

ただし、上記の設定だとすべてのspanタグに右寄せが適用されるため、特定のテキストだけに適用したい場合は、classを使って指定するのがおすすめです。

class名を「right-align」とした場合、CSSは次のように記述します。

.right-align {
　display: block;
　text-align: right;
}

HTMLは以下のとおり記述してください。

<span class="right-align">ここにテキスト</span>

例として紹介しましたが、spanタグをblock要素として使うのは一般的ではありません！何か特別な理由があるときのみblock要素として使うようにしましょう。

余白を指定する

余白の指定にも、CSSに「display: inline-block;」を入力します。余白は「margin」もしくは「padding」で数値を指定してください。

marginは要素の外側に、paddingは要素の外側に余白ができます。

例えば、class名を「space」として、要素の内側に余白を作りたい場合、CSSの記述は以下のようになります。

.space {
　display: block;
　padding: 30px 20px 30px 20px; /*上 右 下 左*/
}

上記の内容だと、テキストの上と下に30%、右と左に20%の余白ができます。

HTMLは以下のとおり記述しましょう。

<span class="space">ここにテキスト</span>

文字に下線を引く

文字に下線を引く場合は、両方の方法で行えます。spanタグのstyle属性で下線を引く場合は、「text-decoration: underline;」を適用してください。

記述例は以下のとおりです。

<span style="text-decoration: underline;">ここにテキスト</span>

CSSで装飾する場合は、まずclass名を指定します。classを「underline」とした場合、CSSの記述は次のように設定してください。

.underline {
　text-decoration: underline;
}

HTMLでは以下のとおり記述します。

<span class="underline">ここにテキスト</span>

文字に打ち消し線を追加する

style属性を使用して打ち消し線を追加するには、spanタグの中に「text-decoration: line-through;」を指定します。

記述例は、以下のとおりです。

<span style="text-decoration: line-through;">ここのテキストに打ち消し線が追加される</span>

CSSでも、spanタグで打ち消し線を追加できます。class名を「line-through」にした場合の記述例は、以下のとおりです。

.line-through {
　text-decoration: line-through;
}

HTMLでは以下のとおり記述します。

<span class="line-through">ここのテキストに打ち消し線が追加される</span>

冒頭でもお伝えしましたが、基本的にspanタグはCSSでデザインを調整することをおすすめします。

よくある質問

まとめ

spanタグとは、デザインを調整するのに使うタグです。主にCSSと組み合わせて使用します。

inline要素を持ち、テキストの一部を装飾するのに適しています。block要素を持つdivタグやpタグとは異なり、余白や幅、位置などの調整に制限があるので、使用の際には注意が必要です。

今回はspanタグの使い方も紹介したので、ぜひ参考にしながらタグを設定してみてください。