« IEとFirefoxでz-indexの扱いが異なる | トップページ | 糖質0、アロマホップ、発泡酒のサントリーZERO・NAMA »

2008年2月24日 (日)

CSSの書き方いろいろ

CSSの書き方にはいくつか方法があります。

  1. CSSファイルにまとめて書く方法
    HTMLファイルとは別にCSSファイルを作ってその中にCSSを書く方法。
  2. HTMLファイル内にstyleタグでまとめて書く方法
    CSSファイルを別途用意しなくてもHTML内にCSSを書くことができます。
  3. HTMLの各タグに書く方法
    特定のタグにだけ有効なCSS指定。

この3つの書き方について説明します。

  1. CSSファイルに書く方法
    HTMLファイルとは別にCSSファイルを作ってその中にCSSを書く方法です。CSSファイルに書いたCSSはHTML内で呼び出すことで使えるようになります。他の方法と違い、CSSファイルを呼び出すだけで複数のHTMLで同じCSSを使うことができます。例えば次のようになります。
    • sample1.css (CSSファイル)
      div.sample{
        border: solid black 1px;
        background: #f99;

      }
    • sample1.html (HTMLファイル)
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html>
        <head>
          <link rel="stylesheet" href="sample1.css" type="text/css" />
        </head>
        <body>
          <div class="sample">
            サンプル
          </div>
        </body>
      </html>
    linkタグでCSSファイルを指定します。CSSファイル内で設定したセレクタdiv.sampleのスタイル定義が、HTMLファイル内の<div class="sample"></div>で挟まれた文字列に適用されます。
  2. HTMLファイル内にstyleタグでまとめて書く方法
    CSSファイルを別途用意しなくてもHTML内にCSSを書くことができます。
    • sample2.html
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html>
      <head>
        <style type="text/css">
          div.sample{
            
      border: solid black 1px;
            background: #f99;

          }

        </style>
      </head>
      <body>
        <div class="sample">
            サンプル
        </div>
      </body>
      </html>
    ここでは<head></head>内に書いていますが、<body></body>内に書いてもOKです。CSSファイルを用意しなくていいので、単独のHTML内でCSSを使いたい時に便利です。複数のHTMLに適用したい場合はCSSファイルを作ったほうがいいでしょう。
  3. HTMLの各タグに書く方法
    特定のタグにだけ有効なCSS指定ができます。
    • sample3.html
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html>
      <head></head>
      <body>
        <div style="border: solid black 1px; background: #f99">
          サンプル
        </div>
      </body>
      </html>
    style=""の中にセミコロン;で区切って複数のCSSを指定することができます。1つのタグ内でだけCSSを設定したいときに使うといいでしょう。

この3つの例はすべて同じCSS指定になります。

« IEとFirefoxでz-indexの扱いが異なる | トップページ | 糖質0、アロマホップ、発泡酒のサントリーZERO・NAMA »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/506297/40238512

この記事へのトラックバック一覧です: CSSの書き方いろいろ:

« IEとFirefoxでz-indexの扱いが異なる | トップページ | 糖質0、アロマホップ、発泡酒のサントリーZERO・NAMA »