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

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

スポンサーリンク


タグの中にスタイルシートを直接書かない 2のつづきです。

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

上の table に次のスタイルシートを適用します。

スタイルシート1

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

.c2{
    height:5em;
}

.c3{
    background:#ccf;
}

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

スクリプトの使い方は枠の下をご覧ください。

スタイルシートコンバータ
SOURCE or URL
CSS

まず、SOURCE or URLと書いてあるところにHTMLを書き込みます。
そして、CSSと書いてあるところにスタイルシートを記入します。

例として、このページの上に書いたソースを貼り付けてみましょう。ボタンを押すと自動でコピー&ペーストします。

コピーしたら、送信ボタンを押してみてください。
スタイルシートが適用された table が表示されたと思います。

では少し遊んでみます。
スタイルシートを書きかえてみましょう。border(枠線)の太さを10ピクセルに、height(高さ)を今の倍の10emに、class「c3」のbackground(背景)を#f00(真っ赤)に、文字の色を#fff(真っ白)にして見ます。

スタイルシート2

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

.c2{
    height:10em;
}

.c3{
    background:#f00;
    color:#fff;
}

ボタンを押すと自動でコピー&ペーストします。HTMLソースはまったく変更していないのに、見た目がガラッと変わったと思います。これがスタイルシートの本領です。
HTMLというのはあくまで、データ構造。それに色づけするのがスタイルシートです。
例えるなら、HTMLは脚本スタイルシートは演出でしょうか。演出次第で同じ内容がぜんぜん違って見えるのです。

では、スタイルシートの書き方を進めます。

上のHTMLの1行目が

<table class=”c1″ style=”background:#ffc”>

となっています。

このstyle=”background:#ffc”を取り除きましょう。
そしてスタイルシート1に次のように追加します。

スタイルシート3

table{
    background:#ffc;
}

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

.c2{
    height:5em;
}

.c3{
    background:#ccf;
}

tableの前には頭の.(ドット)はいりません。
classを指定するのは、同じタグの中で一部だけ変更したいときに、その一部にクラス名を指定します。

スタイルシートにはタグの名前を直接指定できます。
今回はクラスを指定せず、すべてのtableに同じスタイルを指定する方法です。
今はテーブルがひとつだけですが、複数ある場合でも、これですべてのtableのbackgroundは#ffcになります。

ボタンを押すと自動でコピー&ペーストします。

body{
    background:#f00;
}

とします。

ボタンを押すと自動でコピー&ペーストします。で、スタイルシートはどこに書くのか?」にまとめました。
それではみなさま、ごきげんよう!


この記事を書くにあたって、別ウインドウにデータを送る方法がわからなかったのですが、フォームから別ウィンドウを開く方法のまとめ: 小粋空間というサイトにそのための情報がまとめられていました。とても参考にさせていただきました。ありがとうございます。


関連コンテンツ

スポンサーリンク

コメントを残す

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

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