【HTML】１分で学ぶspanタグの書き方・使い方と意味

HTML

2019.12.16

このページでは、spanタグの書き方・使い方を解説します。

spanタグは、divタグと同様それ単体では意味を持たないタグであり、HTMLのいろいろな要素やテキストをグループ化する役割を持ちます。このページでは、spanタグの書き方・使い方をサンプルコード付きで解説していきます。

このページで学べる内容

spanタグとは？
spanタグの書き方・使い方
spanタグとdivタグの違いは？

HTML初心者でも、知らないと恥ずかしい基本知識ばかりですので、是非最後までご覧ください。

spanタグとは？
spanタグの書き方
1. サンプルコード：spanタグ（span class）
HTMLを１から学びたい方は・・・

spanタグとは？

spanタグとは、タグで囲った範囲を１つのまとまりを定義するために利用されます。タグで囲われた範囲はグループとして扱うことができるため、CSSを適用してデザインを変更したい場合を中心に用いられます。

spanタグ・・・１つのまとまり（範囲）を定義する

spanを日本語に直すと、範囲という意味になります。divタグも同様に「まとまり」や「区分」といった意味を持つタグで、両者を混同してしまうかもしれませんが、両者の区別は難しくありません。

spanタグ・・・inline（インライン）要素
divタグ・・・block（ブロック）要素

です。「まとまりを定義する」という意味ではどちらも共通していますが、基本的にはタグの性質が異なりますので、両者の区別についてはここでしっかり理解しておきましょう。

インライン要素とブロック要素の違いについては、こちらの記事で詳しく解説しておりますので、合わせてご覧ください。

インライン要素とブロック要素の違い

divタグについて合わせて知りたい方はこちら。

【HTML】３分でわかる―divタグの意味と使い方

spanタグの書き方

<span>囲みたい対象</span>

HTMLの一般的な書き方と同様です。開始タグと終了タグの両方が必要です。HTMLの基本的な書き方・構文ルールについては、以下の記事をご覧ください。

早速サンプルコードを見てイメージを深めましょう。

サンプルコード：spanタグ（span class）

ここでは、class属性を利用したspanタグのサンプルコードを確認していきましょう。先ほども解説した通り、spanタグは基本的にCSSを適用するために用いられるためCSSとセットで考えるとGoodです。

<p>この段落の<span class="yellowline">この部分だけは</span>黄色のマーカーが引かれます。</p>

.yellowline {
background: linear-gradient(transparent 60%, #ffa500 0%);
}

上記サンプルコードを実際に、ブラウザで表示した結果がこちら。

spanタグで囲った「この部分だけは」のテキストに対して下線マーカーが引かれていることが分かるかと思います。

実際に、自分のパソコンで試してみたいという方はこちらのコードをコピペして、htmlファイルを作成してブラウザにドラッグアンドドロップして試してみてください。

※先ほどのCSSのコードをHTMLに埋め込んであります。

<html>
<head>
<style>
.yellowline {
background: linear-gradient(transparent 60%, #ffa500 0%);
}
</style>
</head>
<body>
<p>この段落の<span class="yellowline">この部分だけは</span>黄色のマーカーが引かれます。</p>
</body>
</html>

これで、spanタグについての解説は以上です。