ホームページの作り方HP

ホームページの作り方を、無料で初心者のために手打ちのHTMLタグとスタイルシートで解説してます

■ テーブルの枠線テクニック

　ホームページで多用するテーブルタグですが、そのテーブルの枠線テクニックを紹介します。
　テーブルの枠線をそのままborderで指定すると、　下記のように二重線で表示されます。

＜＜　HTMLデータ　＞＞

<table border="3">
　<caption>テーブルの枠線テクニック</caption>
　<tr> <th>１</th> <th>２</th> <th>３</th> </tr>
　<tr> <td>Ａ１</td> <td>Ａ２</td> <td>Ａ３</td> </tr>
　<tr> <td>Ｂ１</td> <td>Ｂ２</td> <td>Ｂ３</td> </tr>
　<tr> <td>Ｃ１</td> <td>Ｃ２</td> <td>Ｃ３</td> </tr>
</table>

＜＜　ブラウザ表示　＞＞

テーブルの枠線テクニック
１	２	３
Ａ１	Ａ２	Ａ３
Ｂ１	Ｂ２	Ｂ３
Ｃ１	Ｃ２	Ｃ３

　テーブルの枠線を二重線ではなく、１本の線で表示させたい人も結構いると思いますので、そこでテーブルの枠線を１本の線で表示させるテクニックをご紹介します。

　その方法は、<table>タグ内で、枠線なしで、背景の色：bgcolor（この色が枠線の色になります）を設定し、テーブル内の要素間の間隔であるcellspacing（この値が枠線の太さになります）を設定します。
　そして、テーブルの要素内の<tr>での背景の色：bgcolorを白や先ほどの色とは違う色を設定します。

　そうすると、テーブル内の要素間の間隔だけが色がついて表示され、１本線の枠線が表示されます。

＜＜　HTMLデータ　＞＞

＜＜　ブラウザ表示　＞＞

タイトル
１	２	３
Ａ１	Ａ２	Ａ３
Ｂ１	Ｂ２	Ｂ３
Ｃ１	Ｃ２	Ｃ３

■ ホームページへのテーブルの利用

　テーブルの枠線テクニックや、テーブルを活用して、ホームページに項目を表示させてみます。

＜＜　ＣＳＳファイルデータ例　＞＞

＜　ファイル名＝style.css ＞

body {
font-size:13pt;
line-height:150%;
background-color:#ccffff
}
h1 {
color:red;
background-color:#ffccff;
text-align:center;
text-decoration:none
}
.name1 {
width:800px;
border-style:solid;
border-width:2px;
border-color:#339966;
text-align:left;
padding:10px;
background-color:#ffffff
}
.name2 {
padding:20px
}
.title {
background-color:#ffccff;
text-align:center;
}
.title a{
color:red;
text-decoration:none
}

＜＜　HTMLファイル（ファイル名：index.html)　＞＞
（注意：style.cssとindex.htmlが同じフォルダ内にある場合です）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>テーブルの枠線テクニック</title>
<meta name="keywords" content="テーブル,枠線,テクニック">
<meta name="description" content="テーブルの枠線テクニックの紹介">
<meta http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<LINK href="style.css" type="text/css" rel=stylesheet>
</head>
<body>
<div align="center">
<div class=name1>
<div class=title>
<A href="index.html"><h1>ホームページのタイトル</h1></A>
</div>
<table>
<tr>
<td valign="top">
<div class=name2>
<table bgcolor="blue" cellspacing="1" width="100" align="center">
<tr bgcolor="#ccffff" align="center"> <td>項目</td></tr>
<tr bgcolor="#ffffff" align="center"> <td><A href="index.html">リンク１</A></td></tr>
<tr bgcolor="#ffffff" align="center"> <td><A href="index.html">リンク２</A></td></tr>
</table>
</div>
</td>
<td>
<p class=name2>
さていよいよ、bodyタグ内のホームページ本文の解説に入りたいと思います。それで、まず最初にホームページの内容領域の横幅は、800px以下にするようにします。これは、ホームページ作成にあたってのほぼ鉄則みたいなものですね。
</p>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

＜＜　ブラウザ縮小表示例　＞＞

ホームページのタイトル

項目

リンク１

リンク２

さていよいよ、bodyタグ内のホームページ本文の解説に入りたいと思います。それで、まず最初にホームページの内容領域の横幅は、800px以下にするようにします。これは、ホームページ作成にあたってのほぼ鉄則みたいなものですね。

ホームページの作り方の実践

ホームページ公開方法

レンタルサーバの選択

FFFTPによるHPのアップロード

ホームページの作り方HPTOPへ

リンク

素材リンク

HP作成リンク