スポンサーリンク
タグの中にスタイルシートを直接書かない ２のつづきです。
<table class="c1" style="background:#ffc"> <tr class="c2"> <td class="c1"> サイズアップ・ペニス増大商品 </td> <td class="c1"> 商品購入金額の１０％ </td> </tr> <tr class="c3 c2"> <td class="c1"> 発毛・育毛無料体験 </td> <td class="c1"> 予約１件につき３１９３円 入会１件につき１９１６３円 </td> </tr> <tr class="c2"> <td class="c1"> 高収入在宅チャットレディ </td> <td class="c1"> 登録・稼動確認後に３５００円 </td> </tr> <tr class="c3 c2"> <td class="c1"> ペット保険 </td> <td class="c1"> 申込み１件につき１９００円 </td> </tr> <tr class="c2"> <td class="c1"> 亀頭増大,早漏,包茎の手術や治療 </td> <td class="c1"> 初回来店で３００００円 </td> </tr> </table>
上の table に次のスタイルシートを適用します。
スタイルシート１
.c1{
border:2px solid #fcc;
}
.c2{
height:5em;
}
.c3{
background:#ccf;
}
先頭の.(ドット)は絶対に省略できません。
これは、.(ドット)の後に書いてあるクラスは { から } までを適用しなさいという意味だと思ってください。
スクリプトの使い方は枠の下をご覧ください。
まず、SOURCE or URLと書いてあるところにHTMLを書き込みます。
そして、CSSと書いてあるところにスタイルシートを記入します。
例として、このページの上に書いたソースを貼り付けてみましょう。ボタンを押すと自動でコピー&ペーストします。
コピーしたら、送信ボタンを押してみてください。
スタイルシートが適用された table が表示されたと思います。
では少し遊んでみます。
スタイルシートを書きかえてみましょう。border(枠線)の太さを10ピクセルに、height(高さ)を今の倍の10emに、class「c3」のbackground(背景)を#f00(真っ赤)に、文字の色を#fff(真っ白)にして見ます。
スタイルシート２
.c1{
border:10px solid #fcc;
}
.c2{
height:10em;
}
.c3{
background:#f00;
color:#fff;
}
ボタンを押すと自動でコピー&ペーストします。HTMLソースはまったく変更していないのに、見た目がガラッと変わったと思います。これがスタイルシートの本領です。
HTMLというのはあくまで、データ構造。それに色づけするのがスタイルシートです。
例えるなら、HTMLは脚本、スタイルシートは演出でしょうか。演出次第で同じ内容がぜんぜん違って見えるのです。
では、スタイルシートの書き方を進めます。
上のHTMLの１行目が
となっています。
このstyle=”background:#ffc”を取り除きましょう。
そしてスタイルシート１に次のように追加します。
スタイルシート３
table{ background:#ffc; } .c1{ border:2px solid #fcc; } .c2{ height:5em; } .c3{ background:#ccf; }
tableの前には頭の.(ドット)はいりません。
classを指定するのは、同じタグの中で一部だけ変更したいときに、その一部にクラス名を指定します。
スタイルシートにはタグの名前を直接指定できます。
今回はクラスを指定せず、すべてのtableに同じスタイルを指定する方法です。
今はテーブルがひとつだけですが、複数ある場合でも、これですべてのtableのbackgroundは#ffcになります。
ボタンを押すと自動でコピー&ペーストします。
body{
background:#f00;
}