未分類

HTML5 - 基本構造

概要

HTML5 では、ページのレイアウト構造が分かりやすくなりました。<html>、<head>、<body> のタグを基本にして、<body> の中が細分化されます。次のタグを使用して、ページのレイアウト位置を明確にします。

  • <header> : ページヘッダー
  • <nav> : ナビゲーション
  • <article> : 左の列
  • <section> : 中央の列
  • <aside> : 右側の列
  • <footer> : ページフッター

但し、これらのタグを使用したからと言って、自動的に位置が決まるものではありません。位置決めは CSS を使用します。

サンプル

次の HTML を準備します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 の基本構造</title>
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>
    <header>ヘッダー</header>
    <nav>ナビゲーション</nav>
    <article>左側の列</article>
    <section>中央の列</section>
    <aside>右側の列</aside>
    <footer>フッター</footer>
  </body>
</html>

次の CSS を準備します。

body {
  margin : 0;
  background-color: white;
}

header {
  width: 800px;
  height: 50px;
  background-color: red;
}

nav {
  width: 800px;
  height: 25px;
  background-color: blue;
}

article {
  width: 200px;
  height: 600px;
  background-color: green;
  float: left;
}

section {
  width: 400px;
  height: 600px;
  background-color: white;
  float: left;
}

aside {
  width: 200px;
  height: 600px;
  background-color: yellow;
  float: left;
}

footer {
  clear: both;
  width: 800px;
  height: 50px;
  background-color: pink;
}

結果

まとめ

当然ながら、HTML5 対応ブラウザで実行する必要があります。左側の列、中央の列、右側の列は、css の float 設定により、位置を決める必要はありますが、これまでのように <div> タグですべてを表現する方法に比べて、格段に HTML の読みやすが向上しています。

-未分類