スタイルシートとは(2)

"スタイルシート"でHTMLの記述が少なくなる例を紹介します。

表示例

Yahoo	http:www.yahoo.co.jp/	検索サイトです
Google	http:www.google.co.jp/	検索サイトです
Goo	http:www.goo.ne.jp/	検索サイトです

スタイルシートを使わない場合

<table border=1>
<tr>
<td width=80 align="center" style="color:blue;"><b>Yahoo</b></td>
<td width=200 style="color:green;">http:www.yahoo.co.jp/</td>
<td width=150 style="color:grey;">検索サイトです</td>
<tr>
<td width=80 align="center" style="color:blue;"><b>Google</b></td>
<td width=200 style="color:green;">http:www.google.co.jp/</td>
<td width=150 style="color:grey;">検索サイトです</td>
<tr>
<td width=80 align="center" style="color:blue;"><b>Goo</b></td>
<td width=200 style="color:green;">http:www.goo.ne.jp/</td>
<td width=150 style="color:grey;">検索サイトです</td>
</table>

スタイルシートを使った場合

<table border=1>
<tr>
<td class=t1>Yahoo</b></td>
<td class=t2>http:www.yahoo.co.jp/</td>
<td class=t3>検索サイトです</td>
<tr>
<td class=t1>Google</b></td>
<td class=t2>http:www.google.co.jp/</td>
<td class=t3>検索サイトです</td>
<tr>
<td class=t1>Goo</b></td>
<td class=t2>http:www.goo.ne.jp/</td>
<td class=t3>検索サイトです</td>
</table>

スタイルシートを使うと、少ない記述ですみます。
また、全てのページに統一した見栄えを実現することができます。

スタイルシートとは(2)

表示例

スタイルシートを使わない場合

スタイルシートを使った場合

関連リンク