HTMLレイアウト

HTML レイアウト

ウェブページのレイアウトは、サイトの外観を改善するために非常に重要です。

ウェブページのレイアウトは慎重に設計してください。

<div> 要素を使用したウェブページレイアウト

<div> 要素を使用してレイアウトを追加する方法。

例

以下のコードは、5つの <div> 要素を使用して複数列のレイアウトを作成する方法を示します：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>ITチュートリアル(japanitguide.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<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>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容はここにあります</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
著作権 © japanitguide.com</div>
 
</div>
 
</body>
</html>

上記の HTML コードは以下のような結果を生成します：

内容はここにあります

<table> 要素を使用したウェブページレイアウト

HTML <table> タグを使用することは、レイアウトを作成する簡単な方法です。

例

以下のコードは、三行二列の表を使用してレイアウトを作成する方法を示します。最初と最後の行は colspan 属性を使用して二列にまたがっています：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>ITチュートリアル(japanitguide.com)</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>
            JavaScript
        </td>
        <td style="background-color:#eeeeee;height:200px;width:400px;">
            内容はここにあります
        </td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
            著作権 © japanitguide.com
        </td>
    </tr>
</table>
 
</body>
</html>

上記の HTML コードは以下のような結果を生成します：

主要なウェブページのタイトル
メニュー HTML CSS JavaScript	内容はここにあります
著作権 © japanitguide.com

ウェブサイトのレイアウト

ほとんどのウェブサイトは、内容を複数の列に配置します（雑誌や新聞のように）。

ほとんどのウェブサイトは <div> または <table> 要素を使用して複数列を作成できます。CSS は、要素を配置するためや、ページの背景および色彩豊かな外観を作成するために使用されます。

注意: HTML table タグを使用して美しいレイアウトをデザインすることができますが、table タグはレイアウトツールとして使用することは推奨されません - 表はレイアウトツールではありません。