spanタグ


spanタグの概要

 spanタグは文字列のスタイルを設定するときなどに使用されます。例えば、行のある部分を強調表示したり、色を変えたりするときに使用できます。divタグと似ていますが、divが他のタグをブロック化するコンテナであるのに対し、spanは文章のある範囲を指定するタグです。

spanタグの使用例
<span style="color:red;">赤</span>, <span style="color:green;">緑, </span><span style="color:blue;">青</span>

, 緑,


spanタグの使用例

フォントサイズ

<p><span style="font-size: 30pt">font 30pt</span>, <span style="font-size: smaller;">smaller</span></p>

font 30pt, smaller


フォントの色

<p><span style="color: #8080ff;">#8080ff</span>, <span style="color: magenta;">magenta</span>, 
<span style="color: blue; background-color: #f0f0ff;">blue/cyan</span>

#8080ff, magenta, blue/cyan


下線

<p><span style="text-decoration: underline;">underline</span></p>

underline


打消し線

<p><span style="text-decoration: line-through;">line-through</span></p>

line-through


太字

<p><span style="font-weight: bold;">bold</span></p>

bold


斜字

<p><span style="font-style: italic">italic</span></p>

italic


spanタグの代わりに使える簡易タグ

 spanタグで文字列のスタイルを変更するのは柔軟性がある一方、長くなりがちです。HTMLには次のような簡易スタイルタグが用意されているので、spanタグの代わりにこれらを使うこともできます。

i (Italic)

 このタグで挟んだ文字列はitalicとして表示されます。ただし、全角文字には適用されないようです。


u (Underline)

 このタグで挟んだ文字列には下線が付きます。


b (Bold)

 このタグで挟んだ文字列は太字として表示されます。emタグやstrongタグはこのタグのシノニム(別名)です。


bigとsmall

 bigタグで挟んだ文字列は大きく表示されます。smallタグは逆に小さくなります。ただし、HTML5では廃止されました。

大きくなります。, 小さくなります。

i, u, b
iタグで挟んだ文字列は<i>italic</i>として表示されます。
uタグで挟んだ文字列には<u>下線</u>が付きます。
bタグで挟んだ文字列は<b>太字</b>として表示されます。
<big>大きくなります。</big>, <small>小さくなります。</small>

 

このページの先頭へ戻る