スタイルシートとは(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 style="width:80px;color:blue;"><b>Yahoo</b></td>
<td style="width:200px;color:green;">http:www.yahoo.co.jp/</td>
<td style="width:150px;color:grey;">検索サイトです</td>
<tr>
<td style="width:80px;color:blue;"><b>Google</b></td>
<td style="width:200px;color:green;">http:www.google.co.jp/</td>
<td style="width:150px;color:grey;">検索サイトです</td>
<tr>
<td style="width:80px;color:blue;"><b>Goo</b></td>
<td style="width:200px;color:green;">http:www.goo.ne.jp/</td>
<td style="width:150px;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>

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

class=t1のように指定し、"t1"は"width:80px、color:blue"のようにスタイルシートに記述します。
詳しくは次の回で説明します。

スタイルシート講座

初心者講座

ホームページ作成講座

HTML講座

スタイルシート講座

スポンサードリンク

スタイルシート辞典

テキスト
フォント
背景
ボックス
配置
リスト
テーブル
ユーザインタフェース
その他