インターネットでは、新聞のような書式設定されたコラムをどこでも見ることができます。
ほとんどの Web サイトでは、<div> または <table> 要素を使用して複数の列を作成できます。 CSS は、要素を配置したり、ページの背景やカラフルな外観を作成したりするために使用されます。
<div> 要素を使用してレイアウトする
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#00FFFF;">
<h1 style="margin-bottom:0;">标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
</div>
<div id="content" style="background-color:#00FF00;height:200px;width:400px;float:left;">
内容</div>
<div id="footer" style="background-color:#FF00FF;clear:both;text-align:center;">
版权 © php.cn</div>
</div>
</body>
</html>
テーブルを使用してレイアウトする
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © php.cn</td>
</tr>
</table>
</body>
</html>
HTML レイアウト - 役立つヒント
ヒント: CSS を使用する最大の利点は、CSS コードを外部スタイル シートに保存すると、サイトの保守が容易になることです。 1 つのファイルを編集するだけで、すべてのページのレイアウトを変更できます。 CSS の詳細については、CSS チュートリアルをご覧ください。
ヒント: 高度なレイアウトの作成には時間がかかるため、テンプレートを使用するのが簡単です。検索エンジンから入手できる無料の Web サイト テンプレートが多数あります (これらの事前構築された Web サイト レイアウトを使用して最適化することができます)。
次のセクション