spanタグとは？HTMLのみで文字を装飾する使い方を紹介
執筆者
マーケティングサポート「バンソウ」のメディア管理人
株式会社クリエイティブバンクのマーケティングサポート「バンソウ」のメディア管理人。得意分野は、SEO全般・サイト分析・オウンドメディア・コンテンツマーケティング。バンソウはクライアント様のBtoBマーケティングをサポートするサービスです。詳しい内容はこちらをご覧ください。
spanタグとは
spanタグとは、HTMLで使われるタグの一種で、<span>～</span>のようなかたちで記述されます。spanタグを使用することで、囲んだ範囲の文字色や文字サイズを変更するといった装飾が可能です。
spanタグはインライン要素と呼ばれ、タグで文字を囲む際に改行が入りません。そのため、HTMLを記述する際は以下のように文章内にspanタグが入り、囲んだ範囲のみに装飾を加えられます。
<span>囲んだ範囲を</span>装飾できます。
なお、spanタグと同様にHTMLで使われるタグには、pタグやdivタグなどがありますが、それぞれ役割が異なります。
pタグとの違い
HTML上で<p>～</p>のかたちで表されるpタグは、タグで囲んだ範囲が1つの段落であることを示せます。spanタグはインライン要素ですが、pタグはブロック要素と呼ばれ、pタグで囲んだ範囲の後ろには改行と空白行が入ります。
■pタグの記述例
<p>バンソウは、コンテンツSEOやWeb集客コンサルティングを得意としています。</p>
<p>バンソウについて詳しく知りたい方は、ぜひご相談ください。</p>
■表示例
バンソウは、コンテンツSEOやWeb集客コンサルティングを得意としています。
バンソウについて詳しく知りたい方は、ぜひご相談ください。
divタグとの違い
HTML上で<div>～</div>のかたちで表されるdivタグは、pタグと同様にブロック要素のひとつで、段落で分けられた文章全体を1つのグループにまとめる際に使用します。spanタグは文章の一部に、pタグは文章の段落ごとに使うのに対して、divタグは1つの章など大きなまとまりとしてグルーピングできる点が特長です。
そのため、文章全体を枠で囲んだり、文字色を変更したりするといった装飾を加えたい場合は、spanタグではなくdivタグを使用します。
■divタグの記述例
<div>
<p>バンソウは、コンテンツSEOやWeb集客コンサルティングを得意としています。</p>
<p>バンソウについて詳しく知りたい方は、ぜひご相談ください。</p>
</div>
■表示例
バンソウは、コンテンツSEOやWeb集客コンサルティングを得意としています。
バンソウについて詳しく知りたい方は、ぜひご相談ください。
spanタグの使い方
ここまでご紹介したように、spanタグでは、HTML上で指定した範囲の文字装飾が可能で、文字色や文字サイズなどの変更、背景色の追加などが行えます。
ただし、HTMLは基本的に文章を作成する際に使用する言語で、文書の見た目の装飾は主にCSSと呼ばれる言語を使って行います。そのため、文書の見た目の装飾にはCSSを使用し、特定の箇所を装飾したい場合にspanタグを使用します。。
なお、HTML上でspanタグを使って文字装飾を行う際は、<span style="〇〇">～</span>といった形式で記述します。具体的なspanタグの使い方は、次のとおりです。
文字色を変更する
文字色を変更する際は、<span style="color:#ff0000;">のように、span style="color:の後に任意のカラーコードを記述します。
■記述例
<p>指定した範囲を<span style="color:#ff0000;">赤色</span>に変更します。</p>
■表示例
指定した範囲を赤色に変更します。
なお、HTML上で<span style="color:red">など色の名称を記述した際は、名称に沿った色を反映できるようになります。
文字を太字にする
指定した範囲を太字にする際は、<span style="font-weight:bold;">～</span>と記述します。
■記述例
<p>指定した範囲を<span style="font-weight:bold;">太字</span>にします。</p>
■表示例
指定した範囲を太字にします。
文字サイズを変更する
文字サイズを変更する際は、<span style="font-size:25px;">のように、span style="font-size:の後に、任意の文字サイズをピクセル（px）で記述します。
■記述例
<p>指定した範囲を<span style="font-size:25px;">25pxの文字サイズ</span>に変更します。</p>
■表示例
指定した範囲を25pxの文字サイズに変更します。
なお、文字色と同様に、HTML上で<span style="font-size:x-large;">などの既定のフォントサイズに対して絶対的なサイズを記述した際は、記述内容に沿った文字サイズを反映できます。
文字に背景色を加える
文字に背景色を加える際は、<span style="background-color:#bce2e8;">のように、span style="background-color:の後に、任意のカラーコードを記述します。
■記述例
<p>指定した範囲に<span style="background-color:#bce2e8;">水色の背景色</span>を追加します。</p>
■表示例
指定した範囲に水色の背景色を追加します。
文字に下線を加える
文字に下線を追加する場合は、任意の範囲を<span style="text-decoration:underline;">～</span>で囲うことで反映できます。
■記述例
<p>指定した範囲に<span style="text-decoration:underline;">下線</span>を引きます。</p>
■表示例
指定した範囲に下線を引きます。
ブロック要素としてspanタグを活用する方法
ここまで、基本的なspanタグの使い方をご紹介しました。インライン要素であるspanタグでは、改行が行えないなどの制限がありますが、spanタグをブロック要素として使用することで、さらに活用の幅を広げられるようになります。
ブロック要素としてspanタグを活用する方法は、次のとおりです。
文字を改行する
文字を改行する際は、span要素にclass属性を指定し、<span class="sample（任意の文字列）">～</span>の形式で改行したい範囲を囲みます。
そのうえで、CSS上でdisplay:block;と記述することで、インライン要素であるspanタグがブロック要素に変更され、改行できるようになります。
■HTMLの記述例
<p>指定した範囲を<span class="sample">改行</span>します。</p>
■CSSの記述例
span.sample{
display: block; //インライン要素をブロック要素へ変換
}
■表示例
指定した範囲を
改行
します。
class属性は要素を分類するために使用され、任意の名前を設定できます。同じスタイルを複数箇所で指定する際に便利です。
中央ぞろえ・右ぞろえに変更する
テキストを中央ぞろえ・右ぞろえに変更する際も、span要素にclass属性を指定し、<span class="sample（任意の文字列）">～</span>の形式で文字の配置を変更したい範囲を囲みます。
そのうえで、CSS上でdisplay:block;でspanタグをブロック要素に変更し、「text-align: center」「text-align: right」のように記述することで、中央ぞろえや右ぞろえが適用されます。
■HTMLの記述例
<p>指定した範囲を</p>
<p><span class="sample">中央ぞろえに</span>変更します。</p>
■CSSの記述例
span.sample{
display: block;
text-align: center; //要素を中央ぞろえに指定
}
■表示例
指定した範囲を
中央ぞろえに変更します。
なお、右ぞろえに設定する際は、text-align:の値を「right」に指定します。
指定した範囲の幅や高さを変更する
spanタグにclass属性を指定し、display:block;でブロック要素に変換することで、spanタグで囲んだ範囲のテキストの幅（width）や高さ（height）を変更できます。
幅を指定する際は、指定した大きさのとおりに表示させたい場合は「px」、表示させる画面の大きさに合わせた比率で表示させたい場合は「％」単位で指定するのがおすすめです。
■HTMLの記述例
<p>指定した範囲の</p>
<p><span class="sample">幅や高さを</span>変更します。</p>
■CSSの記述例
span.sample{
display: block;
width: 100%; //要素の幅を指定
height: 100px; //要素の高さを指定
color: black;
background-color: skyblue;
}
■表示例
指定した範囲の
変更します。
文字の周りに余白を加える
指定した範囲に余白を加えたい場合も、spanタグにclass属性を指定し、display:block;でブロック要素に変換することで反映できるようになります。
■HTMLの記述例
<p>指定した範囲に</p>
<p><span class="sample">余白を</span>追加します。</p>
■CSSの記述例
span.sample{
display: block;
width: 100%;
height: 300px;
padding: 20%; //要素内の余白を指定
background-color: skyblue;
}
■表示例
指定した範囲に
変更します。
なお、指定した範囲の内側に余白を入れたい場合は、上記のように「padding」を使用しますが、範囲の外側に余白を入れたい場合は「margin」を使用します。
また、記述例のように「padding:20%;」と記述した場合は、指定した範囲内の上下左右に20％の余白が入ります。このとき、「padding:20% 30％;」のように記述すると、上下に20％、左右の30％の余白が入ります。
幅や高さを調整するときと同様に、余白に関しても「px」「％」といった単位で指定が可能です。
まとめ
この記事では、spanタグの概要や基本的な使い方、ブロック要素に変換する活用方法をご紹介しました。
spanタグを使用することで、特定の箇所の文字色や文字サイズの変更などができるようになります。
CSSでdisplay:block;を使うことで、インライン要素であるspanタグをブロック要素としても扱えるようになるため、ぜひ記事内でご紹介した活用方法をご参考にしてください。
