コードの要所に登場することの多い、spanタグですが、その意味や使い方について正確に把握しているでしょうか。
spanタグについて、曖昧にしか分からない人や全く分からない人に向けて、今回はspanタグの持つ意味、詳しい使い方を丁寧に解説していきます。
結論：spanタグは一部のデザインを変更するために存在する
主にspanタグとは一部のフォントサイズや文字色を変えるなどの元のデザインの中で一部分だけを強調させるためのタグになります。
class属性などと組み合わせて、CSSでその部分のデザインを変えるためのタグとして働くspanタグについてこれから詳しく解説していきます。
1：デザインを変更したい部分をspanタグで囲う
spanタグを使う時のタグの書き方は特殊なものではなく、基本的なタグの書き方で記述します。
タグの書き方については開始タグ？終了タグ？HTMLの『タグ』を完全解説で詳しく解説していますので、参考にしてみてください。
ここからはspanタグの使い方を具体例とともに紹介していきます。
下記のコードを見てください。
<p>
このブログは<span class="red">PG集会所</span>です。
</p>
pタグで『このブログはPG集会所です。』というテキストを用意し、『PG集会所』という部分を『red』というclass属性を付与したspanタグで囲っています。
spanタグはCSSでデザインを強調するために使用するため、HTMLで記述しただけでは普通のテキストと変わりありません。
また、先述したようにタグの書き方については基本的なタグの書き方に沿って書くことでspanタグを機能させることが出来ます。
今回はこの『PG集会所』という部分のみを赤色に変えていきたいと思います。
現在はHTMLで記述しているだけなので画像を見て分かる通り、他の部分との差が感じられないかもしれませんが、この後にCSSでデザインを変更していきます。
2：CSSでセレクタとしてspanタグを指定し、任意のデザインを指定する
spanタグでデザインを変更したい部分を決定したら、次にCSSでデザインを変更していきます。
下記のコードを見てください。
.red {
color: red;
}
CSSでclass属性『red』をセレクタとして、『color: red;』を指定しました。
『color: red;』のようにプロパティ、値を基本的なCSSの書き方通りに記述することで、spanタグで囲まれている部分のデザインを変更することが出来ます。
この部分はCSSの使い方さえ分かっていればできることですので、自分がしたいようなデザインを反映させましょう。
今回はspanタグとはどのようなものか、その使い方について解説をしていきました。
spanタグはサイトをよりユーザーに伝わりやすいものにするために必須のタグですが、その使い方は極めて単純で難しいことではありません。
使い方が分からなくなったらこの記事に戻って使い方を再度理解して、コードを書きながら覚えていきましょう。
