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

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

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

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

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

まず、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になります。

ボタンを押すと自動でコピー&ペーストします。
書きかえたら、また送信ボタンを押してください。

HTMLには一切スタイル属性は書かれていないのに、前と同じようにレイアウトされました。

今回は、スタイルシートを外に書く意味をわかっていただけたでしょうか？

では最後に、スタイルシートコンバータのSOURCE or URLにグーグルのアドレスを入れて見ます。そしてCSSは

body{
    background:#f00;
}

とします。

ボタンを押すと自動でコピー&ペーストします。
送信すると、真っ白のはずのグーグルが真っ赤っかになったと思います。

SOURCE or URLに好きなアドレスを入れて、スタイルシートで色づけしてあげてください。

スタイルシートを書く場所は「で、スタイルシートはどこに書くのか？」にまとめました。
それではみなさま、ごきげんよう！

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

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

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

広告

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

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