spanダグ/スタイル定義

<span>タグはCSSを定義するためのタグです。

説明

 <span>タグを使っただけでは何も変わりませんが、<span>と</span>で囲まれた範囲でidやクラス指定、スタイル等を変更する時に使います。

spanの利用例

構文

 <span>タグはHTMLボディー内に記述します。構文は以下の通りです。

<span>文章</span>

利用例

 何も指定せずに使った例は以下の通りです。

<span>意味を持っていない定義のため、タグで独自定義やクラス等の指定のために使われます。主として幅や枠を指定するために使われます。</span>

 上記を表示すると以下になり、<span>タグを付けない時と見た目変わりません。

意味を持っていない定義のため、タグで独自定義やクラス等の指定のために使われます。主として幅や枠を指定するために使われます。

 このため、主として以下のように色を変えたりする場合に使われます。

ここを<span style="color:red;">赤</span>にします。次は<span style="color:blue;">青</span>にします。

 上記を表示すると以下になります。

ここをにします。次はにします。

 部分的に太字にする場合は以下のように指定します。

ここを<span style="font-weight: bold;">太字</span>にします。

 上記を表示すると以下になります。

ここを太字にします。

 色や太字だけでなく、フォントの変更や様々なスタイルの変更に使えます。

 他にもCSSで定義したidやクラスを利用してスタイルを変える事も出来ます。

ここを<span id="red">赤</span>にします。次は<span class="blue;">青</span>にします。

ディスプレイ

 <span>タグで囲むとインラインボックスを示すため、改行されません。文章の途中で一部だけスタイルを変えるという使い方が出来ます。

 <span>タグに似たタグのブロックボックス版は<div>タグです。<div>タグも使っただけでは何も変わりませんが、やはりidやクラス指定、スタイル等を変更する時に使います。

 改行する時は<div>、改行しない時は<span>という使い分けになります。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加