spanタグの書き方｜いろいろな効果を与えるタグの使い方

<span> タグは、<div> タグと一緒で、タグで囲った箇所に、いろいろな効果を与えることができるタグです。

なお、<span> タグと <div> タグの違いは、前後に改行が入るか、入らないかの違いだけです。 たとえば、下記のように、<span>タグは文章の途中で使っても、途中で改行は入りません。

■ <span> タグの記述例

■ ホームページ上の表示

上記のように、<span> タグを文章の途中で使っても、文章が途中で改行されませんよね？ 逆に、<div> タグだと、文章の途中で改行されてしまいます。

<span> タグと<div> タグの違いは、前後に改行が入るか、入らないかの違いだけです。


そのため、<span>タグは、<div>タグと同じように、いろいろなことが実現できてしまいます。

たとえば、下記のように記述することで、文章に黄色いハイライトを入れることもできます！

■ <span> タグを使って、黄色いハイライトを入れる記述例

■ ホームページ上の表示

これは、僕がホームページでよく使う、とても好きな技なのですが、上記のように記述することで、文章に黄色いハイライトが入って、文章が目立つようになります。
（教科書に、黄色い蛍光ペンでマークしたような感じになりますよね！）


なお、上記の記述の意味は、color:red; は文字を赤くするという意味で、font-weight:bold; は文字を太字にするという意味です。

そして、background-color:yellow; は、背景を黄色くするという意味ですね。

つまり、文字を赤くして、太字にして、さらに背景を黄色くすることで、文章を黄色い蛍光ペンでマークしたような感じになる 、、、ということです！


そして、<span> タグと<div> タグの使い分けですが、、、

文章の一部を装飾（たとえば、黄色いハイライトなど）にするときは、改行が入らない<span> タグを、僕は使っています。

そして、文章全体を右寄りにするなど、 文章全体に効果を与えたいときは、<div> タグ を僕は使っています。


これについては、人それぞれの使い方だと思いますが、僕の場合は、文章の一部を装飾する場合は <span> タグを使って、それ以外は、<div> タグを使うようにしているので、良かったら、参考にしてくださいね。

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒　当サイトで使用しているサンプルサイトの無料ダウンロードはこちら

これからはAIの時代になります。 私も、AIを使って文章や画像やホームページを作っています。 私が実際に行っているやり方を、分かりやすく解説した講座が、下記の講座です。

⇒　AIやChatGPTを活用してビジネスを行う講座はこちら