top画像（トマト）

cssのメリット

次にcssのメリットを紹介します。

  • メリット
  • ★cssのクラス指定だと、そこのcssを変更するだけで同じクラスの設定が変えられる
  • ★htmlがすっきりする。
  • ★画像をあまり使わなくてもある程度可愛く＆かっこよく装飾できる
  • ★容量が軽くなる
  • ★同じclassだと、pでもspanでも同じ。

cssで一番ありがたいことは、１のcssのクラス指定だと、そこのcssを変更するだけで同じクラスの設定が変えられる
ですね。cssでこのサイトの背景を青のグラデーションにしようと思ったら
今の画像を青に変えるだけで全てのページの背景が青に変わります。

３の画像をあまり使わなくてもある程度可愛く＆かっこよく装飾できる
は、今このサイトは、背景・top画像（一番上の大きいの）とロゴくらいしか
固定で表示してないのですが、cssだと左のナビくらいなら画像なしでも余裕で出来ます。
画像を作る手間と容量がはぶけました。

５の同じclassだと、pでもspanでも同じ。
は、たとえば

<div id="test8">
<p class="red">赤い文字に変更します。</p>
<p id="end"><span class="red">赤い文字に</span>変更します</p>
</div>

こういう書き方のhtmlがあったとしよう。普通に書く文は
<p id="end">（id指定）の中にclass="red"があるから

#test8 #end .red {
color:#f00;
}

こういう風に書いてしまうと
testというidの中のendというidの中のredというクラス名
にしか適用されない。もっと簡単にいうと
testというidの中のendというidの中にredというクラス名が
ある場合に限り、testというidの中のendというidの中にredというクラス名にのみ
指定されたcssを適用する

ということだ。
よって<p id="end"><span class="red">赤い文字に</span>変更します</p>
には適用されるが<p class="red">赤い文字に変更します。</p>
には適用されないことになる。
（<p class="red">赤い文字に変更します。</p>にはendという idの中に入ってないからだ。）

だが、簡単に言えば、このclass="red"を沢山使いたいのなら

#test8 .red {
color:#f00;
}
または
.red {
color:#f00;
}

と書けばいい。

さらにcssのいい所

cssのいい所は、idはひとつですがクラスは複数つけられることです。
たとえば私は太字にするcssと文字を赤くするcssを作っています。

#contentright .red {
color:#f00;　　　//文字を赤にする
}
#contentright .bold {
font-weight:bold;　　　//文字を太字にする
}

<p class="red bold">文字を太字にして赤くします。</p>

"（ダブルクォーテーション）と"の間にクラス名を、半角あけたら複数指定できます。
（私は２つまでしか設定したことないから２つ以上は分からんです。）
↓実行結果

文字を太字にして赤くします。

今3つ設定してみましたが出来ました（笑）
さて、cssのメリットを存分にお話したところでこのページは終わりにします。
次に行きましょう