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

スタイルシートの属性をタグから切り離し、外に書く方法。
今回はスクリプトを用いて、外部スタイルシートがどう適用されるのかを試します。

スポンサーリンク


さて、今回は長らく放置していた「タグの中にスタイルシートを直接書かない 1」のつづきです。

この記事、その1から何日も放置していたわけですが、ちょっと考えていました。

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

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

まず、前回のソース

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

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

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

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

同じようにclass=”c2″前回印2class=”c3″前回印3にあたります。

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

またひとつのタグに適用できる 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”

と同じ意味になります。

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

書き方は

スタイルシート1

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

.c2{
    height:5em;
}

.c3{
    background:#ccf;
}

といった感じです。

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

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


関連コンテンツ

スポンサーリンク

「タグの中にスタイルシートを直接書かない 2」への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください