続々CSS
2001.06.05

CSSについて触れ始めてから、「わからん。」との指摘をたくさん頂いています が、ま、それはしようがないです。書いてる本人が、CSSに飽きてきているので、 つぎの話題にとりかかるために急いでいるのですから。

違いは？
さて前回あげた二つのHTMLの違いを見ていきます。
すちゃらかHTMLの方は、見た目(Fontの大きさ、色)の制御をすべて、Fontタグや Table、Tdタグの中にちりばめて書いてあります。
これに対して、CSSのほうは、見た目の制御は次の部分にまとめてあります。 
<style type="text/css">
<!--
.PageTitle{
	color:orange;
	background-color:white;
	font-size:larger;
	font-weight:bold;
	text-align:center;
	width:400pt;
	line-height:30pt;
	margin:0px;
	border: 1pt solid black}
.PageComment{
	color:yellow}
.PageText{
	color:white;
	background-color:green}
-->
</style>
このように、それぞれの見た目にPageTitleなどの名前をつけておいて、 利用するときは <div class="PageTitle">〜</div>のように名前を用いて、 参照していきます。
これによって、繰り返し同じ効果を使いたいときなんかは、かなりHTMLを 書く量が減ります。
Styleの定義を別ファイルへ
さらに、上記のStyleの定義をsample.cssというファイルに書いておいて、次の ようにファイルを参照するように書き直すこともできます。 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<meta http-equiv="Content-Style-Type" content="text/css">
<base target="page">
<link rev="made" href="mailto:sugiura@isp.ne.jp">
<link rel="next" href="../yome/index.html">

<link rel="stylesheet" type="text/css" href="./sample.css">

<title>
CSS Sample
</title>
</head>
<body>
<div class="PageTitle">
タイトル
</div>
<p class="PageText">
本文をここから書いていきます。<br>もしもコメントを途中に入れるときは、
<span class="PageComment">ここがコメントです。</span>
のように入れていきます。
</p>
</body>
</html>
このように、自分がつくったすべてのHTMLから、同じStyle Fileを参照するように しておけば、Site全体の見た目の制御を一つのファイル(この例だとsample.css)だけで 行うことができます。何日か前にこのSiteの色が変化したのも、ある一つのファ イルを修正しただけなのです。
# といっても、自分で大量にHTMLを書く必要に迫られてないと、こんなことやる気にな りませんよね。

Go to previous page Go to next page
Go to Index
Go to Top