HTML本体 (body) の書き方


HTML文書のレイアウト

 bodyタグの内容は、ブラウザに実際表示される内容です。のっぺりした文書ならレイアウトは必要ないですが、たいていの場合、ブラウザに表示されるとき状態をイメージして、レイアウトを決める必要があります。

 下の図はHTMLページのレイアウトの一例です。カッコ内はHTML5で使用可能なタグです。HTML4以前のバージョンではこれらのタグはないので無視されます。
 articleが複数あるような大規模な文書では、mainタグで複数のarticleを囲むこともできます。

HTML5 layout

 HTML5に対応していないブラウザでは、これらのタグの代わりに div タグで代用します。あるいは、テーブルを使ってレイアウトを実現することもできます。

 上の図のようなレイアウトを実現するには、これらのタグだけでなく属性やスタイルの設定も必要です。

下のHTMLの表示例

<!DOCTYPE html>
<!-- bodyのレイアウトのサンプル(1) -->
<head>
<meta charset="utf-8" />
<title>Layout sample (1)</title>
<style>
h1 {
  text-align: center;
}

header, nav, aside, article, footer {
  padding: 5px;
  border: solid 1px gray;
}
</style>
</head>

<body>
<header>
<h1>bodyのレイアウトのサンプル(1)</h1>
</header>

<nav>
<a href="../../index.html">ホーム</a> | <a href="../../articles/html/body.html">HTML本体 (body) の書き方</a>
</nav>

<aside style="float: left; width: 25%;">
<ul>
<li><a href="">xxxxxxxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="">xxxxxxxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="">xxxxxxxxxxxxxxxxxxxxxxxx</a></li>
</ul>
</aside>

<article style="float: right; width: auto;">
<section>
<h2>文節(1)</h2>
<p>
 ................................................................................................................................................<br />
 ................................................................................................................<br />
 ..................................................................<br />
 ..................................................................<br />
 ..................................................................<br />
<p>
</section>
<section>
<h2>文節(2)</h2>
<p>
 ..................................................................<br />
 ..................................................................<br />
 .......................................................................................................<br />
 ....................................................................................................................................<br />
 ..................................................................<br />
<p>
</section>
</article>

<footer style="clear: both;">
フッター
</footer>

</body>
</html>


 下の画像は上のHTMLの表示例ですが、あまりきれいにレイアウトできません。もっと、工夫する必要があるようです。

layout1.png

 下の画像はブラウザのウィンドウサイズを小さくしたときのものです。右側のarticle部が、asideの下になってしまいますね。

layout2.png


 下の例はテーブルを使ってレイアウトするサンプルです。

下のHTMLの表示例

<!DOCTYPE html>
<!-- bodyのレイアウトのサンプル(2) -->
<head>
<meta charset="utf-8" />
<title>Layout sample (2)</title>
<style>
h1 {
  text-align: center;
}

table, td {
  border: solid 1px gray;
  border-collapse: collapse;
}
</style>
</head>

<body>
<table>
<tr><td colspan="2">
<h1>bodyのレイアウトのサンプル(2)</h1>
</td></tr>

<tr><td colspan="2">
<a href="../../index.html">ホーム</a> | <a href="../../articles/html/body.html">HTML本体 (body) の書き方</a>
</td></tr>

<tr><td>
<ul>
<li><a href="">xxxxxxxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="">xxxxxxxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="">xxxxxxxxxxxxxxxxxxxxxxxx</a></li>
</ul>
</td>

<td>
<section>
<h2>文節(1)</h2>
<p>
 ................................................................................................................................................<br />
 ................................................................................................................<br />
 ..................................................................<br />
 ..................................................................<br />
 ..................................................................<br />
<p>
</section>
<section>
<h2>文節(2)</h2>
<p>
 ..................................................................<br />
 ..................................................................<br />
 .......................................................................................................<br />
 ....................................................................................................................................<br />
 ..................................................................<br />
<p>
</section>
</td></tr>

<tr><td colspan="2">
フッター
</td></tr>
</table>

</body>
</html>



 下の画像は上のHTMLの表示例ですが、テーブルを使ったほうがきれいにレイアウトできますね。

layout1.png



記事 (article) の中身

 記事 (article) はHTML文書の中心なので、一般に中身はさらに細かく分かれます。そのHTML文書の性格にもよるでしょうが、一般的には表題 (hタグ) 、文節 (sectionタグ)、段落 (pタグ) などから構成されることが多いと思われます。

article


記事 (article) のレイアウト例
<section>
<h2>文節の表題</h2>
<p>
 段落
</p>
<p>
 段落
</p>
</section>
</pre>
</section>

文書レイアウト用タグのまとめ

 これまでに出てきた文書レイアウトに使うタグですが、HTML5で追加されたものなのでHTML4以前のバージョンでは無視されます。また、使用を強制するものではなく、単に見やすさ的なものです。(他のタグ、例えば div で代用できます)

 これらのタグは「コンテナ」でそれ自身は枠などを付けない限り表示されません。コンテナなので、他のタグをホストするのが役目です。

header

 headerタグはHTML文書や文節 (section) の表題を示します。したがって、1つのHTML文書に複数のheaderタグがあっても問題ないです。headerタグは単なるコンテナですから。

 headerタグの固有属性はありません。グローバル属性, イベント属性

headerタグの例
<header><h1>headerタグ</h1></header>

nav

 navタグはリンク集を作るのに使います。通常は1つのHTML文書に1つだけです。リンク先は「ホーム」などどのページにも共通なものにするのがよいと思います。

 navタグの固有属性はありません。グローバル属性, イベント属性

headerタグの例
<nav><a href="/">Home</a></nav>

article

 articleタグはそのHTMLページの中心となる記事を含むタグです。通常は1つのHTML文書に1つだけですが、2つ以上あってもかまいません。ふつう、articleタグの内容は長いので、内部で section タグなどを使って文節に分けることが多いと思います。

 また、asideタグと左右に並べて使うことも多いと思います。その場合は、floatスタイルで左右の位置を指定します。

 articleタグの固有属性はありません。グローバル属性, イベント属性

articleタグの例
<article style="float: right; width: auto;">
 ....
<article>

section

 sectionタグは、通常、articleタグの中で文節を表しますが、これも他のタグと同じように単なる「コンテナ」なので単独で用いても全く問題ありません。また、sectionブロックの中にheaderタグを置いて文節の表題にすることもできます。

 sectionタグの固有属性はありません。グローバル属性, イベント属性

sectionタグの例
<section>
 ....
</section>

aside

 asideタグは、通常、articleタグの左、右、あるいは両方に表示されるリンクや広告のための領域です。

 asideタグの固有属性はありません。グローバル属性, イベント属性

asideタグの例
<aside style="float: left; width: 25%;">
  ....
</aside>

footer

 footerタグはHTMLページの一番下に表示されるフッタを表示するためのタグです。これは、ふつう1つだけです。articleやasideで左右にタグを表示するモードにしてある場合は、clear属性でこれをキャンセルする必要があります。(footerタグの前にキャンセルしておくこともできます)

 asideタグの固有属性はありません。グローバル属性, イベント属性

footerタグの例
<footer style="clear:both;">
 ....
</footer>

 

ページの先頭へ戻る