HTML・CSS:一部のみ表現方法をまとめて変えたいときや文字の装飾などに使うspanタグ

<span>タグとは

まず<span>タグとは、インラインボックスになります。インラインボックスについて知らないという人はこちらの記事を参照してください。

<span>タグ自体には特に意味はなく、あらゆる部分(ピンポイントな、インラインな感じでね)に対して様々な装飾を施すためのタグになります。例えばCSSを使ってたくさん装飾をしたいぞ!って思うことがあるかも知れません。いちもんじもたくさん装飾していますが、こういう文字を太くして赤くして黄色いマーカーを引くみたいなことは<span>を使えばあっという間にできてしまうわけです。

<span>タグの使い方

ではそれをどうやって行うのかというところです。まず<span>自体には何の意味もありませんので、クラスを付けるところから基本的には始まると思います。

<span class="itumono">ここを太くして赤くしてマーカー引くねん</span>

<span>タグクラス「いつもの」というのを付けてみました。そいだら次はこの「いつもの」クラスに太くして赤くしてマーカーを引きなさいよ!!っていう命令文を書いていくわけですね。

.itumono{
color:crimson;
font-weight:bold;
background: linear-gradient(transparent 60%, #ffff99 0%);}

CSSでクラスの中身に色を赤くしてフォントを太くしてマーカーを引いてくれって内容を打ち込みました。すると、クラス「itumono」を指定した場所はすべて赤くて太くてマーカーにしてくれます。

<span class="itumono">ここを太くして赤くしてマーカー引くねん</span>って言ってたら<span class="itumono">ここ</span>も何ならこんなと<span class="itumono">こ</span>ろまで<span class="itumono">線</span>ひいちゃうもんね~!
ここを太くして赤くしてマーカー引くねんって言ってたらここも何ならこんなとろまでひいちゃうもんね~!

<span>タグのメリット

ここまで読んでいただいたあなたならばお分かりいただけたと思いますが、こうやって使うと<span>タグって非常に便利ではなかろうですか。だって、「あんやや~?ここは黄色いマーカーよりも青いマーカーのほうがよかったでござるよ~?」ってことだってあると思います。そうしたらCSSのマーカーの色の部分をちょちょっと青にしてあげるだけで、このitumonoクラスを付けている<span>タグで括っている部分はすべて一気に青マーカーになってくれるのですから。

タイトルとURLをコピーしました