このページでは、spanタグの書き方・使い方を解説します。
spanタグは、divタグと同様それ単体では意味を持たないタグであり、HTMLのいろいろな要素やテキストをグループ化する役割を持ちます。このページでは、spanタグの書き方・使い方をサンプルコード付きで解説していきます。
このページで学べる内容
- spanタグとは？
- spanタグの書き方・使い方
- spanタグとdivタグの違いは？
HTML初心者でも、知らないと恥ずかしい基本知識ばかりですので、是非最後までご覧ください。
spanタグとは？
spanタグとは、タグで囲った範囲を１つのまとまりを定義するために利用されます。タグで囲われた範囲はグループとして扱うことができるため、CSSを適用してデザインを変更したい場合を中心に用いられます。
- spanタグ・・・１つのまとまり（範囲）を定義する
spanを日本語に直すと、範囲という意味になります。divタグも同様に「まとまり」や「区分」といった意味を持つタグで、両者を混同してしまうかもしれませんが、両者の区別は難しくありません。
- spanタグ・・・inline（インライン）要素
- divタグ・・・block（ブロック）要素
です。「まとまりを定義する」という意味ではどちらも共通していますが、基本的にはタグの性質が異なりますので、両者の区別についてはここでしっかり理解しておきましょう。
インライン要素とブロック要素の違いについては、こちらの記事で詳しく解説しておりますので、合わせてご覧ください。
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タグについての解説は以上です。
HTMLを１から学びたい方は・・・
HTMLを実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがベストです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことが重要です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
