テーブル（表）を用いた実践
ショッピングサイトのトップページを題材としたサンプル
これまでの解説を踏まえ実践編として説明します。
ショッピングサイトのトップページを題材としたサンプルを用いて説明します。
文章と画像を入れ替えるとご自分のホームページにすることが出来ます。
作成後のイメージを下に示します。
htmlはsample2.htmlとしてスタイルシートはcss2.cssとして保存してください。
画像ファイルは、sample0.gif、sample1.gifを使います。
sample0.gifはバナー部分の当たり、sample1.gifはコンテンツ部分の２枚組写真です。
html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="Tokyo Night Relaxingは大人の男性に高感度空
間、洗練されたお洒落な空間を提供する情報源である">
<meta name="keywords" content="男性,メン,メンズ,オンライン,ショッピング,通販,
ファッション,情報源,夏,秋,冬,春,おしゃれ,お洒落,ブランド,ライフ,スタイル,
デザイン,通信販売,ネット,カタログ,都会,東京,新宿,渋谷,原宿,青山,六本木,表参道
,銀座,都心,都内,きざ,酒,夜,ナイト,リラックス,Tokyo,Night,Relaxing">
<title>メンズファッション-オンラインショッピングサイト-TokyoNightRelaxing
</title>
<link rel="stylesheet" href="css2.css" type="text/css">
</head>
<body>
<center>
<h1>メンズ-オンラインショッピングサイト-TokyoNightRelaxing</h1>
<table border="0" width="720" bgcolor="#bdb76b">
<tr>
<td colspan="2" bgcolor="#ffffff"><img src="sample0.gif" border="0"
alt="男性のためのオンラインショッピングサイトTokyoNightRelaxing"></td>
</tr>
<tr>
<td width="170" bgcolor="#ffff00" valign="top"><ul>
<li><a href="fashion/index.html">fashion</a></li>
<li><a href="hobby/index.html">hobby</a></li>
<li><a href="interior/index.html">interior</a></li>
<li><a href="drink&bar/index.html">drink&bar</a></li>
<li><a href="business/index.html">business</a></li>
<li><a href="health/index.html">health</a></li>
<li><a href="present for lover/index.html">present for lover</a></li>
</ul>
</td>
<td width="550" bgcolor="#cccccc"><img src="sample1.gif" border="0" alt="東京
の夜の光景">
<p class="top">Tokyo Night Relaxingは大人の男性に高感度空間、洗練されたお洒落
な空間を提供するコンテンツだ。但し、アダルトコンテンツは含まれていない。<br>
大変申し訳ないが、女性はご遠慮願いたい。</p>
<p class="top">男性ファッションをメインに、お洒落なダイニングバー、彼女へのプ
レゼント、海や自然への憧れ、洗練されたインテリア、ブランドグッズ、ホビー
などの商品をご紹介する。</p>
<p class="top">当サイトではジャズを聴きながらグラスを傾けてブラウズしていただ
けることを推奨する。大藪晴彦や北方謙三のノベルを読みながらだと尚良し。</p>
<p class="top">東京の今宵、それはクリエイティブな時間帯だ。喧噪は決して騒々し
くは感じられず、一瞬のしじまは時として今日一日を忘却させる。クラクション、
彼方から聞こえてくるサイレン、ホステスたちの嬌声、喧嘩、ヤクザの怒声、軋み音
、爆音、しかし何故かここは別世界、無性に創造力に駆り立てられる、喉に異常に乾
きを覚え、バー。次第に傍らの彼女も泳いで行ってしまったのか。いいのさ、また見
つけよう。今宵は、いつも通りさ。そんな貴殿へTokyo Night Relaxing</p>
</td>
</tr>
</table>
<p class="cr">Copyright TokyoNightRelaxing 2006 All rights reserved.</p>
</center>
</body>
</html>
スタイルシート
body {
margin:0;
padding:0;
background-color:#ffffff;
}
p {
font-family : ＭＳ Ｐゴシック;
color:#000000;
font-size:13px;
}
ul {
margin-left : 0px;
}
li {
margin-left : 0px;
padding-left : 0px;
text-align:center;
padding-top:20px;
list-style-type : none;
font-family : Comic Sans MS;
font-size:13px;
}
h1 {
font-family:ＭＳ Ｐゴシック;
font-size:13px;
font-weight:600;
margin-top:15px;
color:#696969;
}
.top {
line-height:140%;
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
}
.cr {
font-size:11px;
font-family : Comic Sans MS;
color:#696969;
}
sample2.htmlをクリックすると正しく表示（このページの上部の図のように）しましたか？次章ではご自分のホームページに加工する際のポイントを説明します。
バナーの作成及びカスタマイズに進む>>