spanタグの使い方

spanタグとは？テキスト内を部分的にスタイル！

spanタグとは

spanタグは、HTMLの一部のテキストやインライン要素をグループ化するために使用されます。
ブロック要素ではなく、インライン要素として機能するため、テキスト内の特定の部分にスタイルやクラスを適用するのに便利です。

HTML の 要素は、記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではありません。スタイル付けのため (class または id 属性を使用して)、または lang のような属性値を共有したりするために要素をグループ化する用途で使用することができます。他に適切な意味的要素がない時にのみ使用してください。span は div 要素ととても似ていますが、 div がブロックレベル要素であるのに対し、 span はインライン要素 (en-US)です。

参考：mdn web docs

spanタグの基本的な役割

spanタグは、HTML内のテキストの特定の部分にスタイルを適用するためのインライン要素です。
このタグ自体は特定のスタイリングや意味を持たず、主にスタイリングやグループ化の目的で使用されます。

spanタグを使うことで、テキスト内で異なる部分に異なるスタイルを適用し、特定のテキストを強調したり、色を変えたり、他の属性を追加したりすることができます。

spanタグの書き方

spanタグの基本的な使い方

ここでは、spanタグを使用して”重要な部分”を青く表示し、太字にしてみましょう。
ここでは簡単にstyle属性を使用してスタイルを定義します。

<p>この文章は<span style="color: blue; font-weight: bold;">重要な部分</span>を含んでいます。</p>

⇓デモ

この文章は重要な部分を含んでいます。

このように、spanタグを使って文章の中に特定のテキスト部分にスタイルを適用できます。
実際にコードを書いて、色を変えてみたりフォントを変えてみたりしましょう。

spanタグの基本的な使い方-応用編

他によく使われるのが、背景色や下線などです。
一つずつ見ていきましょう。

テキストの一部の背景に色を付ける

<p>この<span style="background-color: yellow;">テキスト</span>がハイライトされています。</p>

⇓デモ

このテキストがハイライトされています。

これにより、ユーザーに読んでもらいたい重要な部分を強調することができます。
文字を太さとあわせて使うとより効果が期待できます。

特定のテキストに下線を引く

<a href="https://hogehoge.com">訪問する<span style="text-decoration: underline;">（公式サイト）</span></a>

⇓デモ

spanタグのまとめ

• スタイルやクラスの適用
• JavaScriptによる操作
• テキストの一部の識別

spanタグの使い方を解説してみました。

spanタグはウェブデザインにおいて非常に重要なツールです。ウェブページのデザインをカスタマイズし、テキストを強調するのに役立ちます。適切に使用することで、ウェブサイトの魅力を向上させ、ユーザーの使い心地を向上させることができます。

情報を正確に読み取ってもらうよう、適切にマークアップしていきましょう。