 |
ホームページを作る（スタイルシートの基本）
htmlの基本で作ったページ…どうもこうもダサいですよね。それはもちろん、デザインをつけていないのだから当たり前…。
スタイルシートはそんなデザインをつけるために使用します。
プロパティ：値
プロパティは、例えば「色」などの設定する項目の事です。そして、値は「赤、青…」などの具体的な設定の値になります。
では、まず背景色を設定することと文字色、サイズを設定してみます。
新しいテキストファイルを開いて「text.css」という名前を付けて以下をコピーしてください。
body{background-color:#Fc0;}
h1{color:#F00;
a{font-size:20px;
}
※ちなみに、もっと細かいルール、他の設定の仕方もあります。
詳細は、基本ルールアーカイブ：スタイルシートメモを見てくださいね。
スタイルシートは、HTMLタグに直接書く、headタグ内に書く、別ファイルに書く…の三種類あります。
ここでは、
外部の別ファイルに書く方法をとります。
先ほど作ったtest.htmlを用意してください。
そして、赤字の部分を追加します。
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<link rel="stylesheet" href="test.css" type="text/css">
<title>ページのタイトルだよ</title>
</head>
<body>
<h1>ページのタイトルだよ</h1>
<p>ひとつめの段落です。</p>
<p>二つめの段落です。<br>
朱沙のサイトは<a href="http://highlord.littlestar.jp/" target="_blank">みつけたきせき</a>です </p>
</body>
</html>
ブラウザで開いてみると先ほど作ったスタイルシート「test.css」が反映されているのがわかると思います。
もちろん、もっとたくさんスタイルシートでいろいろなデザインをつけることができます。
詳細は、基本ルールアーカイブ：スタイルシートメモを見てくださいね。
|
