| HOME | MAIL | 本館：b-cures. | 別館：Template b |
 
PR ★高収入が可能！ＷＥＢデザインのプロになってみない？！

スタイルシートを使う

▼スタイルシートを外部に飛ばす2

idやclassを使うことで、tdやdivなどのタグを指定するのではなく、任意の場所にだけスタイルを適用することができます。

idとclassの違い

id 同一ページ内で一箇所しか指定できない。外部スタイルシートにidで指定するものの前に#(シャープ)をつける。
class 同一ページ内で何箇所でも指定できる。外部スタイルシートにclassで指定するものの前に.(ドット)をつける。

外部スタイルシートstyle1.cssの中身は以下です。

.style1 {
color: #3333FF;
background-color: #C5DAFE;
font-size: 11px;
font-weight: bold;
}

#style2 {
color: #FF33CC;
font-size: 20px;
}

<html>
<head>
<title>
私のホームページ
</title>
<link rel="stylesheet" href="style1.css" type="text/css">
</head>

<body>

<h1>HP作成支援 </h1>
<p class="style1">HTMLを作成してみましょう(この文字はclassで指定しています。)</p>
<p>ここは私のホームページです。</p>

<table border="3" bordercolor="#000000" bgcolor="#CCFFFF">
<tr>
<td id="style2">ここだけはidで指定しています。</td>
<td>1行目2列目の文字</td>
<td>1行目3列目の文字</td>
</tr>
<tr>
<td class="style1">このセルはclassで指定しています。</td>
<td class="style1">このセルはclassで指定しています。</td>
<td class="style1">このセルはclassで指定しています。</td>
</tr>
<tr>
<td>3行目1列目の文字</td>
<td>3行目2列目の文字</td>
<td>3行目3列目の文字</td>
</tr>
</table>

</body>
</html>

サンプルページ
(C)2006 html sample. All Rights Reserved.