続CSS?
2001.06.04

いやいや、今回は早めに書いてみました。

CSSで何がうれしいの？
文章の構造を制御する部分と見た目を操作する部分を分離したお陰で、HTMLを 書く側にとっては、ページの管理が楽になると言う利点があります。 例を用いて、見て行きましょう。
すちゃらかHTML
いいかげんな本を参考にHTMLを書いていると次のようなものを書いてしまいます。 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<title>
Old Sample
</title>
</head>
<body>
<table align="center" border="1" bordercolor="black">
 <tr>
  <td bgcolor="white" align="center" width="400pt" height="30pt">
   <font face="bold" color="orange" size="+2">
   タイトル
  </font>
  </td>
 </tr>
</table>
<table bgcolor="green">
 <tr>
  <td>
   <p>
   <font color="white" bgcolor="green">
   本文をここから書いていきます。<br>もしもコメントを途中に入れるときは、
   <font color="yellow">ここがコメントです。</font>
   のように入れていきます。</font>
   </p>
  </td>
 </tr>
</table>
</body>
</html>
実際に表示するには、ここ をクリックしてください。
CSSを用いた例
上記と同じ内容を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">
<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>
<title>
CSS Sample
</title>
</head>
<body>
<div class="PageTitle">
タイトル
</div>
<p class="PageText">
本文をここから書いていきます。<br>もしもコメントを途中に入れるときは、
<span class="PageComment">ここがコメントです。</span>
のように入れていきます。
</p>
</body>
</html>
実際に表示するには、ここ をクリックしてください。
# いやー、なにがうれしいんでしょうねー。それは、次で触れます。

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