spanタグの意味と使い方

floatを使って画像を回り込ませてみよう

spanタグの使い方の紹介です。 ホームページを作っているとspanやdivといったタグを見かける事が多いと思います。

spanやdivって何なんだろう?と思って調べても「そのタグ自体は意味を持たない」っていう説明が多いので 「???」って最初はなっちゃいますよね。 なのでこのページでは「何でspanを使うのか」「spanの使い方」などを紹介していきます。

目次
なぜspanタグを使うのか

なぜspanタグを使うのか

なぜspanを使うかというと、spanタグ自体は意味を持ってないからです。 「は??」って感じですよね。

こういうことです、例えば下のようなテキストがあるとします。

<p>イギリスが200年にわたりインドを支配した理由は、
インド総督府に優れた行政能力があったからと言われてる。</p>

表示例

イギリスが200年にわたりインドを支配した理由は、 インド総督府に優れた行政能力があったからと言われてる。

上記のテキスト中の句読点(、)の部分で改行したいとします。 改行と聞いて思いつくのは、おそらく<BR>タグですよね。

ですが<BR>タグは、住所を記載する時などのように「改行する事でコンテンツの一部となる」ような場合にのみ使用すべきタグです。 なので<BR>タグをここで使用してしまうと、検索エンジンにはテキストの正しい意味が伝わらないわけです。

そうなると「どうやって改行すればいいの?」ってなりますよね。 こういう時に<span>を使います。 <span>タグなら何も意味を持ってませんよね。 なのでどこで使用しても変な意味になる事はないので問題ないということです。

<br>タグのようにhtmlタグにはそれぞれの意味があります。 タグを見た目のためだけに使用していると、検索エンジンにはめちゃくちゃな意味が伝わってしまいます。

「じゃあ、見た目を変えたい時はどうすれば?」ってなりますよね。 こういう時に<span>タグにスタイルシート(CSS)で色々な指定をする事で、意味を変える事なくデザインだけ自由にできるわけです。

ちなみにタグ自体に意味を持たないタグには<span>と<div>があります。 両者の違いは<span>がインライン要素、<div>がブロック要素という所。

インライン要素とブロック要素については別ページで紹介しますが、使い方を簡単にいうと下のようになります。

  • ブロック要素(divやpなど)の中にインライン要素(spanやstrong)は配置できる。
  • インライン要素の中にブロック要素を配置するのは正しくない。

難しいのはナシにして、簡単にいうと基本的にはこんな感じです。

テキストなどの見た目を変えたい!でも見た目を変える事で、伝えたい意味はない なんて時は基本的にはspanを使いましょうね!

これで意味を持たない<span>タグを使う理由がなんとなくわかったと思うので、次は使い方を紹介していきますね。

spanの使い方

色・サイズを変えたい、改行したいなど色々あると思いますが、デザインを変えたい部分を<span>~</span>で囲みます。 そしてclassやID(付けなくてもいい)を使ってスタイルシートでデザインに関する設定をしていくのが一般的です。

ここでは記述例を紹介していきますね。

文字の色を変える

<p>テキストの<span class="red">一部のみ赤色</span>にする</p>
.red{color: red;} 

表示例

テキストの一部のみ赤色にする

文字を太くする

<p>テキストの<span class="bold">一部のみ太く</span>する</p>
.bold{font-weight:bold;}

表示例

テキストの一部のみ太くする

改行する

<p>brタグを使わないで、<span class="br">ここから改行する</span></p>
.br{display:block;}

表示例

brタグを使わないで、ここから改行する

使い方はこんな感じです。 classなどについてわからない場合はcss入門!スタイルシート基礎講座を参考にして下さい。

spanについてはこんな感じになりますが、いかがでしたでしょうか? たまーにh1タグ内に<br>を入れて改行してる方を見かけますが、もしやってたらすぐに<span>で改行するようにしましょうね!

簡単ではありましたが、以上「spanについて」でしたー(^^)/