HTML-レイアウト
Webページのレイアウトは、Webサイトの見栄えを良くするために非常に重要です。優れたルックアンドフィールのWebサイトのレイアウトを設計するには、かなりの時間がかかります。
現在、すべての最新のWebサイトはCSSおよびJavaScriptベースのフレームワークを使用してレスポンシブで動的なWebサイトを作成していますが、単純なHTMLテーブルまたは分割タグを他のフォーマットタグと組み合わせて使用すると、適切なレイアウトを作成できます。この章では、純粋なHTMLとその属性を使用して、Webページのシンプルで実用的なレイアウトを作成する方法の例をいくつか示します。
HTMLレイアウト-テーブルの使用
レイアウトを作成する最も簡単で最も一般的な方法は、HTMLの<table>タグを使用することです。これらのテーブルは列と行に配置されているため、これらの行と列を好きなように利用できます。
例
たとえば、次のHTMLレイアウトの例は、3行2列のテーブルを使用して実現されていますが、ヘッダー列とフッター列は、colspan属性を使用して両方の列にまたがっています。
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>これにより、次の結果が生成されます-
複数列のレイアウト-テーブルの使用
Webコンテンツを複数のページに配置するようにWebページを設計できます。コンテンツを中央の列に保持し、左の列を使用してメニューを使用し、右の列を使用して広告やその他のものを配置することができます。このレイアウトは、当社のWebサイトtutorialspoint.comにあるものと非常によく似ています。
例
これは3列のレイアウトを作成する例です-
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>これにより、次の結果が生成されます-
HTMLレイアウト-DIV、SPANを使用
<div>要素は、HTML要素をグループ化するために使用されるブロックレベルの要素です。<div>タグはブロックレベルの要素ですが、HTMLの<span>要素はインラインレベルで要素をグループ化するために使用されます。
HTMLテーブルを使用して非常に優れたレイアウトを実現できますが、テーブルは実際にはレイアウトツールとして設計されていません。表は、表形式のデータを表示するのに適しています。
Note −この例では、カスケードスタイルシート（CSS）を使用しているため、この例を理解する前に、CSSがどのように機能するかを理解する必要があります。
例
ここでは、前の例で<table>タグを使用して達成したものは何でも、CSSとともに<div>タグを使用して同じ結果を達成しようとします。
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>これにより、次の結果が生成されます-
CSSとともにDIV、SPANを使用して、より良いレイアウトを作成できます。CSSの詳細については、CSSチュートリアルを参照してください。