CSSの設定方法

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

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

head要素の中で、style要素を使ってファイルを指定

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

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

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

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

▲ ▼

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

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

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

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

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

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

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

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

body {
  color: #000000;
  background: #ffffff;
}
h1 {
  color: #ffffff;
  background-color: #000000;
}

KAWANO's PukiWiki Plus! - CSSの設定方法

CSSの設定方法

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

メニュー

大学関係リンク

今日の5件

最新の5件