KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2005/6th/css_setting のバックアップ(No.1)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2005/6th/css_setting へ行く。
  • 1 (2007-02-24 (土) 07:05:44)
  • 2 (2007-02-24 (土) 07:10:26)

CSSの設定

CSSを設定するには、 3つの方法があります。

• 別のファイルに設定し、head要素の中で、link要素を使ってファイルを指定
• head要素の中で、style要素を使ってファイルを指定

  pre>

  head>

  title="...."> <style type="text/css"> <!-- セレクタ{ プロパティ:値} .. --> </style>

  /head> ...

  /pre>

  • 指定した要素に、style属性として指定

    pre>

    要素名 style="プロパティ:値; プロパティ:値; ..."> 例：

    h1 style="color: red">

    /pre>

この授業では、最初の「別のファイルへの設定」の方法を 利用します。

CSSの書かれたファイルを読み込む

スタイルシートの書かれたファイルを 読み込むには、 link要素を使います。

pre> <link rel="stylesheet" href="ファイル名" type="text/css">

/pre>

スタイルシートのみを記述したファイル（通常、拡張子が.css）を、 別に用意しておき、 HTML文書に読み込みます。

link要素で、読み込むファイルを指定します。 link要素は、必ずhead要素の中に書くことを、注意してください。 複数のCSSファイルを指定する場合も、 必要な数だけlink要素で記述します。

たとえば、次は「style1.css」というスタイルファイルを、 HTMLファイルから読み込む場合です。

pre>

html lang="ja">

head>

meta http-equiv="Content-Type" content="text/html;

charset=Shift_JIS">

title="○○の日記"> <link rel="stylesheet" href="style1.css" type="text/css">

/head>

body> ... ... ...

/body>

/html>

/pre>

そして、「style1.css」というファイルは、次のような 内容になっています。

pre> body {

 margin: 0;
 color: #000000;
 background: #ffffff;

} h1 {

 margin: 0;
 padding: 0.2em;
 color: #ffffff;
 background-color: #000000;

}

/pre>

次へ進んでください。