「文中の文字の一部のみを指定する場合」の編集履歴（バックアップ）一覧はこちら
「文中の文字の一部のみを指定する場合」(2015/05/17 (日) 02:21:08) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
以前から書いてみたいなと思っていた基本的なタグがspanです。~
divでは文章全体を指定して、どういう背景色にするか、どういう文字の色にするか、どういうフォントにするか、などを指定をする事ができましたね。~
しかし文中の中で、一部の文字だけ色を変えたい、あるいは文字の色を変えずに背景色を変えたい、大きさ、フォントを指定したい場合。~
そういった場合にspanを利用します。今回も例を挙げて説明します。
彼は生意気で変わっていて、それでいて怠惰などうしようもない男と言われている。しかし実は心優しい男だ。
という文章を書いたとします。~
この文章の中で「実は優しい男」を際立たせたい場合、
html
<p>彼は生意気で変わっていて、それでいて怠惰などうしようもない男と言われている。しかし<span class="xx">実は心優しい男</span>だ。</p>
css
.xx {
color: red;
}
という風に指定するとspanで囲まれた部分のみが赤く表示されます。
彼は生意気で変わっていて、それでいて怠惰などうしようもない男と言われている。しかし&color(red){実は心優しい男}だ。
となります。
また文字の色をそのままに背景色のみを変えたい場合、background-colorと指定すればＯＫです。
以前から書いてみたいなと思っていた基本的なタグがspanです。~
divでは文章全体を指定して、どういう背景色にするか、どういう文字の色にするか、どういうフォントにするか、などを指定をする事ができましたね。~
しかし文中の中で、一部の文字だけ色を変えたい、あるいは文字の色を変えずに背景色を変えたい、大きさ、フォントを指定したい場合。~
そういった場合にspanを利用します。今回も例を挙げて説明します。
彼は生意気で変わっていて、それでいて怠惰などうしようもない男と言われている。しかし実は心優しい男だ。
という文章を書いたとします。~
この文章の中で「実は優しい男」を際立たせたい場合、
html
<p>彼は生意気で変わっていて、それでいて怠惰などうしようもない男と言われている。しかし<span class="xx">実は心優しい男</span>だ。</p>
css
.xx {
color: red;
}
という風に指定するとspanで囲まれた部分のみが赤く表示されます。
彼は生意気で変わっていて、それでいて怠惰などうしようもない男と言われている。しかし&color(red){実は心優しい男}だ。
となります。
また文字の色をそのままに背景色のみを変えたい場合、background-colorと指定すればＯＫです。
例えば、
私もあなたが好きよ。でも今まで通りお友達でいよ。
という文章があったとします。
ここで重要な箇所は当然、「今まで通りお友達」の部分です。
なので
html
<p>私もあなたが好きよ。でも<span class="x">今まで通りお友達</span>でいよ。</p>
css
.x {
background-color: red;
}
私もあなたが好きよ。でも&color(,red){今まで通りお友達}でいよ。
