<span> タグは、<div> タグと一緒で、タグで囲った箇所に、いろいろな効果を与えることができるタグです。
なお、<span> タグと <div> タグの違いは、前後に改行が入るか、入らないかの違いだけです。
たとえば、下記のように、<span>タグは文章の途中で使っても、途中で改行は入りません。
■ <span> タグの記述例
ホームページに<span style="color:red">掲載する</span>文章
|
■ ホームページ上の表示
上記のように、<span> タグを文章の途中で使っても、文章が途中で改行されませんよね?
逆に、<div> タグだと、文章の途中で改行されてしまいます。
<span> タグと<div> タグの違いは、前後に改行が入るか、入らないかの違いだけです。
そのため、<span>タグは、<div>タグと同じように、いろいろなことが実現できてしまいます。
たとえば、下記のように記述することで、文章に黄色いハイライトを入れることもできます!
■ <span> タグを使って、黄色いハイライトを入れる記述例
<span style="color:red; font-weight:bold; background-color:yellow;">ホームページに掲載する文章</span>
|
■ ホームページ上の表示
これは、僕がホームページでよく使う、とても好きな技なのですが、上記のように記述することで、文章に黄色いハイライトが入って、文章が目立つようになります。
(教科書に、黄色い蛍光ペンでマークしたような感じになりますよね!)
なお、上記の記述の意味は、color:red; は文字を赤くするという意味で、font-weight:bold; は文字を太字にするという意味です。
そして、background-color:yellow; は、背景を黄色くするという意味ですね。
つまり、文字を赤くして、太字にして、さらに背景を黄色くすることで、文章を黄色い蛍光ペンでマークしたような感じになる 、、、ということです!
そして、<span> タグと<div> タグの使い分けですが、、、
文章の一部を装飾(たとえば、黄色いハイライトなど)にするときは、改行が入らない<span> タグを、僕は使っています。
そして、文章全体を右寄りにするなど、 文章全体に効果を与えたいときは、<div> タグ を僕は使っています。
これについては、人それぞれの使い方だと思いますが、僕の場合は、文章の一部を装飾する場合は <span> タグを使って、それ以外は、<div> タグを使うようにしているので、良かったら、参考にしてくださいね。