文章中の文字毎に異なるデザインを設定するため、<span>～</span>で囲んだ部分に名前を付けます
名前はclassで指定出来ます。
classの違いを表示させるために、もう１個「span.iro{ }」を追加します
ここでは『色探しの旅』は「iro」空と水の文字を「sora」として設定してみます
|
<html> <head> <title>色探しの旅</title> <style type="text/css"><!-- body{color:#666666} h1{font-size:25px; font-family:'Comic Sans MS';color:royalblue} span.iro{color:olive;font-weight:bold} span.sora{color:navy} --></style> </head> <body> <h1>色探しの旅『Sky&Water』</h1> <p>日本の四季には色が満ちています。<span class="sora">空</span> そして<span class="sora">水</span>の色<span class="iro">『色探しの旅』</span>に出かけませんか</p> <div>copyright(c)sora</div> </body> </html> |
<span class="iro">で囲んだ部分に文字の太さを、font-weightで設定します
span.iro{color:olive}の中に「font-weight:bold」を追加します
font-weightでは、規格的には数段階の太さがあることになっていますが、
実際には標準と、太いの２段階しか使い分け出来ません。
※font-weightで設定出来る値
| normal | 標準の太さで表示します | |
| bold | 太く表示します | |
| bolder | ひとまわり太く表示します | |
| righter | ひとまわり細く表示します |
<h1>～</h1>に書いた文字は太くなります。
これは見だしである事を表すための、ＨＴＭＬの標準仕様です。
しかしデザイン的に細くしたい場合もあります。
そうした場合、font-weight:normalを指定すると文字が細くなります。
【参考】
コンテンツが増えてくると、<p>～</p>や<div>～</div>で囲まれた部分が増えてきてきます
そんなとき、クラス名を使うことでコンテンツを細かく区別出来ます
例えば同じ<h1>～</h1>で囲まれた見出しにそれぞれ別のデザイン設定が出来ます
h1.text01{color:red}
h1.text02{color:blue}
h1.text03{color:green}
↑この書き方では<h1>にのみデザインが適応されます【参考】
.text01{color:red}
.text02{color:blue}
.text03{color:green}
↑こう書けば<p>にもデザインが適応されます【参考】