home > HTMLリファレンス > spanタグについて

spanタグとは?その使い方と意味について。divとの違いも解説

spanタグとはなんだろう、使い方が幅広くて使うタイミングがわからない。 似ている動きでdivもあるけどどう使い分けるのか? そんな方のためにわかりやすく説明しておりますので最後までご覧ください。

spanタグとは?意味についてもご紹介

spanタグとは、特に何も意味を持ちません。 <span>〜</span>タグで囲んだ箇所に対してCSSやJSを指定するために用いられます。
spanタグのよくある使い方としてspanはインライン要素なので一部の文字色を変えたい、改行をさせたくないけど区分にしたいなどの際に 便利に使用できます。

spanタグのソース形式
<span>〜</span>
タグの要素
インライン要素

spanタグの使い方について

spanタグの使い方と使用例を紹介します。

spanタグの使い方のHTML例
    一部の要素を<span style="color: #ffff00";>spanタグを使用してcssを当てたりする</span>際に使われやすいです
結果
一部の要素をspanタグを使用してcssを当てたりする際に使われやすいです

spanタグとdivタグの違いについて解説

spanタグとdivタグの使い分けについて簡単に説明すると改行をするかどうかです。 spanタグはインライン要素となるので幅を持たず改行も行われません。
divタグはブロック要素なのでコンテンツ幅100%で前後に改行が行われます。

divタグの挙動。

サンプルサンプルサンプル<div>タグで挟まれると改行される</div>サンプルサンプルサンプルサンプル

結果

サンプルサンプルサンプル
タグで挟まれると改行される
サンプルサンプルサンプルサンプル

spanタグの挙動。

サンプルサンプルサンプル<span>タグで挟まれても改行されない</span>サンプルサンプルサンプルサンプル

結果

サンプルサンプルサンプルタグで挟まれても改行されないサンプルサンプルサンプルサンプル
spanタグまとめ

spanタグとは、その使い方と意味についてを説明してきました。
複雑な要素もなく一般的なタグですので、<div>タグとの違いを理解してうまく使いこなしていきましょう。

関連タグ

<div>

その他タグ一覧