以前から書いてみたいなと思っていた基本的なタグがspanです。
divでは文章全体を指定して、どういう背景色にするか、どういう文字の色にするか、どういうフォントにするか、などを指定をする事ができましたね。
しかし文中の中で、一部の文字だけ色を変えたい、あるいは文字の色を変えずに背景色を変えたい、大きさ、フォントを指定したい場合。
そういった場合にspanを利用します。今回も例を挙げて説明します。
彼は生意気で変わっていて、それでいて怠惰などうしようもない男と言われている。しかし実は心優しい男だ。
という文章を書いたとします。
この文章の中で「実は優しい男」を際立たせたい場合、
html <p>彼は生意気で変わっていて、それでいて怠惰などうしようもない男と言われている。しかし<span class="xx">実は心優しい男</span>だ。</p>
css
.xx {
color: red;
}
という風に指定するとspanで囲まれた部分のみが赤く表示されます。
彼は生意気で変わっていて、それでいて怠惰などうしようもない男と言われている。しかし 実は心優しい男 だ。
となります。 また文字の色をそのままに背景色のみを変えたい場合、background-colorと指定すればＯＫです。 例えば、
私もあなたが好きよ。でも今まで通りお友達でいよ。
という文章があったとします。 ここで重要な箇所は当然、「今まで通りお友達」の部分です。 なので
html <p>私もあなたが好きよ。でも<span class="x">今まで通りお友達</span>でいよ。</p>
css
.x {
background-color: red;
}
私もあなたが好きよ。でも 今まで通りお友達 でいよ。
