tableでサイトを作る（後編）

>>ホームページの作り方TOP　>>Tableでサイトを作る（後編）

■Tableでサイトを作る（後編）

次に、スタイルシートを適用して、サイトのデザインを変えてみます。

img {
　　　　border:0;
　　　　}
table {
　　　　width:660px;
　　　　}
td.a2 a {
　　　　padding-right:20px;
　　　　padding-left:20px;
　　　　line-height:24px;
　　　　font-size:15px;
　　　　}
td.a2 {
　　　　border-top:solid 1px #999;
　　　　border-bottom:solid 1px #999;
　　　　text-align:center;
　　　　}
td.a3 {
　　　　font-size:14px;
　　　　line-height:16px;
　　　　background-color:#ccc;
　　　　padding-left:10px;
　　　　}
td.a4 {
　　　　width:160px;
　　　　vertical-align:top;
　　　　padding-top:20px;
　　　　}
p.a5 {
　　　　text-align:center;
　　　　width:140px;
　　　　background-color:#aaa;
　　　　font-size:16px;
　　　　line-height:22px;
　　　　margin-top:0;
　　　　margin-left:8px;
　　　　font-weight:bold;
　　　　}
li {
　　　　list-style-image:url(mark.gif);
　　　　line-height:20px;
　　　　}
td.a8 {
　　　　padding-top:10px;
　　　　adding-bottom:10px;
　　　　padding-left:10px;
　　　　}
h2 {
　　　　font-size:15px;
　　　　}
h2 img {
　　　　vertical-align:middle;
　　　　margin-right:5px;
　　　　}
p.a9 {
　　　　font-size:15px;
　　　　color:#666;
　　　　}
p.a10 {
　　　　font-size:15px;
　　　　color:#44f;
　　　　}
address {
　　　　padding-left:5px;
　　　　font-size:14px;
　　　　line-height:20px;
　　　　font-style:normal;
　　　　border-top:solid 8px #000;
　　　　}
a:link {
　　　　color:#ff0000;
　　　　}
a:visited {
　　　　color:#0000ff;
　　　　}
a:hover {
　　　　color:#00ff00;
　　　　}
a {
　　　　text-decoration:none;
　　　　}

すると、こうなって完成です。→サンプル

ホームページの作り方（HP作成法）を解説

STEP1

STEP2

STEP3

STEP4

STEP5

STEP6

STEP7

■Tableでサイトを作る（後編）