タグの中にスタイルシートを直接書かない２

さて、今回は長らく放置していた「タグの中にスタイルシートを直接書かない１」のつづきです。この記事、その１から何日も放置していたわけですが、ちょっと考えていました。

なぜなら「こうやればいいんですよ」と書いて誰かがそれを試すと、その人のブログ全体のレイアウトが一気に変わってしまうからです。スタイルシートを外に書くというのはそういうことなのです。で「どうすっぺ？」と思ってしばらく放置、となった次第です。

で、結局スクリプト(簡単なプログラム)を作りました。
スクリプトに関して説明する前にスタイルシートを外部に書く方法を書きます。

まず、前回のソース

<table style=" 印１ 
background:#ffc">
<tr style=" 印２ 
">
<td  style=" 印１ 
">
サイズアップ・ペニス増大商品
</td>
<td  style=" 印１ 
">
商品購入金額の１０％
</td>
</tr>
<tr style=" 印３ 
 印２ 
">
<td  style=" 印１ 
">
発毛・育毛無料体験
</td>
<td  style=" 印１ 
">
予約１件につき３１９３円
入会１件につき１９１６３円
</td>
</tr>
<tr style=" 印２ 
">
<td  style=" 印１ 
">
高収入在宅チャットレディ
</td>
<td  style=" 印１ 
">
登録・稼動確認後に３５００円
</td>
</tr>
<tr style=" 印３ 
 印２ 
">
<td  style=" 印１ 
">
ペット保険
</td>
<td  style=" 印１ 
">
申込み１件につき１９００円
</td>
</tr>
<tr style=" 印２ 
">
<td  style=" 印１ 
">
亀頭増大,早漏,包茎の手術や治療
</td>
<td  style=" 印１ 
">
初回来店で３００００円
</td>
</tr>
</table>

を下のように書き換えます。

<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>

class="c1" というのはこのタグには印１を適用せよという命令のスタイルシート式書き方です。

同じように class="c2" は前回の印２、 class="c3" は前回の印３にあたります。

c1 、 c2 、 c3 という名前は私が勝手に決めただけで重複しなければ何でもいいです。

またひとつのタグに適用できる class は別にひとつである必要はなく

class=" c3 c2"

のように複数指定できます。(半角スペースで区切ってください)

classが複数指定できるように

class="c1" style="background:#ffc"

などと同じタグの中で class と style を同時に指定できます。

たとえば、 class="c1" が style="border:2px solid #fcc" を意味するのなら、

class="c1" style="background:#ffc"

は

style="border:2px solid #fcc;background:#ffc"

と同じ意味になります。

そして、 c1 、 c2 、 c3 それぞれに適用するスタイルを別に指定します。

書き方は

スタイルシート１

 . 
c1{
border:2px solid #fcc;
}

 . 
c2{
height:5em;
}

 . 
c3{
background:#ccf;
}

といった感じです。

先頭の .(ドット) は絶対に省略できません。
これは、 .(ドット)の後に書いてあるクラスは { から } までを適用しなさいという意味だと思ってください。

ではこれを実際に適用してみます。
ここでスクリプトの登場です。と文字数制限のためつづく。

新ブログ「Big Bang」で続きを読む →

ここにブログの名前を入れます

広告

タグの中にスタイルシートを直接書かない２

HTML、CSS、JavaScript、スパムと悪徳商材の対策