戻る｜サイト紹介｜Ｃ言語入門｜Ｗｅｂ制作入門｜サイトマップ｜ Avaloky-トップへ

スタイルシートの説明

概要の説明

スタイルシートは、ＨＴＭＬファイルのレイアウト（配置）を補助的に行なう為の言語仕様です。 拡張子「css」を用いて、外部にスタイルシート用のファイルを作成する方法が推奨されています。

補足説明

また、ＨＴＭＬファイル内のタグのオプション（属性）に「style」オプションを用いて設定する方法もあるようです。

上記のソースファイル

style_sl.htmllayout.css
<html>
<head>
<META NAME="Author" CONTENT="amita">
<META NAME="Description" CONTENT="スタイルシートの説明">
<META NAME="Keywords" CONTENT="css,説明">
<title>スタイルシートの説明</title>
<link rel="stylesheet" href="css/layout.css" type="text/css">
</head>

<body>
<h1>スタイルシートの説明</h1>

<div id="main">
<h2>概要の説明</h2>


<p>
スタイルシートは、ＨＴＭＬファイルのレイアウト（配置）を補助的に行なう為の言語仕様です。
拡張子「css」を用いて、外部にスタイルシート用のファイルを作成する方法が推奨されています。
</p>
</div>


<div id="sub">
<h2>補足説明</h2>
<p>
また、ＨＴＭＬファイル内のタグのオプション（属性）に「style」オプションを用いて
設定する方法もあるようです。
</p>

</div>


<div id="footer">
<hr>
<address>
Copyright(C) 2007 www.avaloky.com All Rights Reserved.
</address>
</div>

</body>
</html>


h1 {
	background:#adff2f;
	color:#008000;
}

h2 { color:#b8860b }

#main { float: left;
	width: 50%;
	background:ccccff;
}

#sub { 
	margin-left: 50%;
	background:#ccff99;
}

#footer { clear: left; 
	background:#ffcc99; 
	text-align:center 
}


p { color:red }