spanタグとは？基本的な使い方やdivタグとの違いを徹底解説

HTMLで文章の一部の装飾やグループ分けに便利なspanタグ。

しかし初心者の方はspanタグの使い方がいまいちわからず、なんとなくで使っていませんか？

こんな疑問を持つ方も多いでしょう。

今回は、spanタグの

について説明します。

spanタグとは

HTMLでよく見るspanタグはどういった役割があるのか、どんな場面で使われるのかわからない人も多いです。

なのでここでは、spanタグについて詳しく解説します。

spanタグの読み方

spanタグは、「スパン」と読みます。

「span」は「特定の範囲」という意味がありますが、spanタグ自体に意味は持ちません。

しかし、スタイルシートと組み合わせることで、指定した箇所のデザインを調整することが可能になります。

spanタグは囲んだ要素のデザインを調整するための要素

spanタグは「囲んだ要素のデザインを調整するための要素」です。

先ほども言いましたが、spanタグ自体は意味を持たないため、それ単体で使用しても意味がありません。

しかし、spanタグは特定の部分だけを装飾したり、デザインの強調をしたりするのに重要な要素です。

例えば次のようなもの。

ブログサイトやホームページでこういった文章を見かけたことがあるでしょう。

サイトの見栄えを良くするために、文字の装飾やデザイン調整は欠かせません。

そういったときに、spanタグが重要な役割を果たすのです。

spanタグで利用できる属性

spanタグでは以下の属性を使うことができます。

対応ブラウザ

対応ブラウザは以下の通りです。

spanタグの基本的な使い方

ここからはspanタグの具体的な使い方を解説していきます。

サイト制作ではspanタグをよく使うので、しっかりと理解していきましょう。

spanタグの使い方

spanタグは主に文字の装飾やデザイン調整で使用することが多いです。

実際のコードで見ていきましょう。

上記のように文字の一部を赤色にしたいとき。

装飾を加えたい部分をspanタグで囲います。

そして、cssのスタイルで「color: red;」と指定すれば、spanタグで囲った部分だけ赤色になります。

きちんと装飾されていますね。

また文字色だけでなく、文字の大きさや背景色も変えることができます。

cssでspanに「font-size」と「background-color」を指定すれば、次のようになります。

文字の大きさや背景色も変わっていますね。

このようにspanタグは、デザイン調整をするのにとても便利です。

なので、使い方を覚えておきましょう。

spanタグとdivタグとの違い

spanタグと似た要素でdivタグがあります。

divタグもspanタグと同じで、divタグ自体には意味を持っていないため、それ単体で使うことがありません。

これらは一見同じ使い方ができそうですが、実は全く違う役割を持った要素なのです。

具体的な違いは、次の通り。

この違いを理解するには、まずインライン要素とブロック要素について知っておかなくてはなりません。

インライン要素とブロック要素には、上記のような違いがあります。

インライン要素は高さや幅、余白の調整に制限がありますが、ブロック要素は自在に調整することができます。

また、インライン要素は横に並んでいくのに対して、ブロック要素は1つ1つが横いっぱいに広がるので、縦に並んでいくのです。

結果は次のように表示されます。

spanタグとdivタグをそれぞれ並べてみると、並び方に違いがあるのがわかりますね。

結果、インライン要素であるspanタグは、高さや幅を調節したり、上下に余白を持たせたりできないということです。

spanタグをブロック要素として使用する方法

spanタグはインライン要素なので、高さや幅、余白などを調節することはできないと言いました。

しかし、spanタグをブロック要素としてデザインの調節をしたいときもあると思います。

なのでここでは、spanタグをブロック要素として使用する方法を解説していきます。

改行する

まずは「spanタグで改行する方法」です。

実際のコードは次の通り。

spanタグはインライン要素なので、横に並んでしまいます。

そのspanタグを改行するには「display: block;」を指定してブロック要素に変えるのです。

表示結果は以下のようになります。

spanタグで囲ったところの前後が改行されていますね。

spanタグをブロック要素にすることで要素が横いっぱいに広がり、前後に改行が入るのです。

高さや幅を指定する

続いて「spanタグに高さや幅を指定する方法」です。

実際のコードを見ていきましょう。

spanタグに高さや幅を指定するには、ブロック要素に変える必要があります。

なので、spanタグに「display: block;」を指定します。

そして、高さ「height」と幅「width」を指定しましょう。

結果は次のように表示されます。

※高さと幅の変化が見やすいように背景色を付けています。

高さや幅が変化しているのがわかりますね。

このようにspanタグをブロック要素にすると、高さや幅を調節することができます。

余白を指定する

今度は「spanタグに余白を指定する方法」です。

実際のコードは次のようになります。

spanタグに余白を指定するには、ブロック要素に変える必要があるため「display: block;」を指定します。

そして、余白の「padding」と「margin」を指定すれば、余白が作れるようになります。

Chromeの検証で見てみると、きちんと余白ができているのがわかりますね。

このようにspanタグをブロック要素に変えると、上下左右の余白も調節することができます。

まとめ

今回はspanタグの基本的な使い方からdivタグとの違い、そして応用的な使い方まで解説しました。

spanタグは意味を持たない要素なので、使い方が難しいです。

しかし、文章の一部を装飾したりグループ分けしたりするなどの重要な役割を持っています。

spanタグを使えるようになれば、より華やかで見やすいサイトが作れるようになるので、使い方をしっかり覚えておきましょう。

この記事がspanタグの学習に役立てば幸いです。

参考文献：MDN web docs｜span