HTML レイアウト

ウェブサイトはよく複数の列でコンテンツを表示します（例えば、雑誌や新聞のように）。

<div>要素を使用したHTMLレイアウト

注：<div>要素はレイアウトツールとしてよく使用されます。なぜなら、CSSを通じて簡単に位置を指定できるからです。

この例では、4つの<div>要素を使用して多列レイアウトを作成しています：

例

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
ロンドン<br>
パリ<br>
東京<br>
</div>
<div id="section">
<h1>London</h1>
<p>
ロンドンはイングランドの首都であり、英国で最も人口の多い都市です。
1300万人以上の人口を抱える大都市圏があります。
</p>
<p>
テームズ川に面したロンドンは、2千年以上にわたって主要な都市であった。
その歴史はローマ人がロンドニウムと名付けた創立にさかのぼります。
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

実際に試してみる

CSS：

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

HTML5を使用したウェブレイアウト

HTML5が提供する新しいセマンティック要素は、ウェブページの異なる部分を定義しています：

HTML5 语义エレメント

header ドキュメントやセクションのヘッダーを定義
nav ナビゲーションリンクのコンテナを定義
section ドキュメント内のセクションを定義
article 独立した自包含の記事を定義
aside コンテンツ以外の内容（例えばサイドバー）を定義
footer ドキュメントやセクションのフッターを定義
details 追加の詳細を定義
summary details要素のタイトルを定義

この例では、<header>、<nav>、<section>、および<footer>を使用して多列レイアウトを作成しています：

例

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
ロンドン<br>
パリ<br>
東京<br>
</nav>
<section>
<h1>London</h1>
<p>
ロンドンはイングランドの首都であり、英国で最も人口の多い都市です。
1300万人以上の人口を抱える大都市圏があります。
</p>
<p>
テームズ川に面したロンドンは、2千年以上にわたって主要な都市であった。
その歴史はローマ人がロンドニウムと名付けた創立にさかのぼります。
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

実際に試してみる

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

テーブルを使用したHTMLレイアウト

注：<table>要素はレイアウトツールとして設計されていません。

<table>要素の役割はテーブル化されたデータを表示することです。

<table>要素を使用すると、CSSでテーブル要素のスタイルを設定できるため、レイアウト効果を得ることができます：

例

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    テーブル要素はレイアウトツールとして設計されていません。
  </td>
</tr>
</table>
</body>

実際に試してみる

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>