HTML入門 | HTML空間分割 | HTMLレイアウト(layout)

Tags:

HTMLレイアウト(layout)

レイアウト(layout)とは、特定の空間内に文字や画像などの構成要素を見やすく効果的に配置する作業である。Webページのレイアウトは、Webサイトの外観を決定する非常に重要な要素である。

HTMLでは、次のような方法でレイアウトを作成できる。

  1. div要素を利用したレイアウト
  2. HTML5セマンティック要素を利用したレイアウト
  3. table要素を利用したレイアウト

HTML5 layout

div要素を利用したレイアウト

div要素はCSSスタイルを簡単に適用できるため、以前はレイアウト作成によく使用されていた。最近では、divよりもHTML5セマンティック要素を利用したレイアウトが推奨される。

<div id="header">Header</div>
<div id="nav">Nav</div>
<div id="section">
  Section
  <div id="article">Article</div>
</div>
<div id="aside">Aside</div>
<div id="footer">Footer</div>

コード実行

HTML5セマンティック要素を利用したレイアウト

HTML5では、Webページのレイアウト専用の新しい要素が提供されている。これらの要素をセマンティック(semantic)要素という。

セマンティック(semantic)要素は機能を持たないが意味を明確にし、コンピュータが情報を理解して論理的な推論までできる構造を作るために追加されたタグである。検索エンジン最適化(SEO)を行う際に重要な役割を果たす。

<header>Header</header>
<nav>Nav</nav>
<section>
  Section
  <article>Article</article>
</section>
<aside>Aside</aside>
<footer>Footer</footer>

コード実行

HTML5で提供されるレイアウト専用のセマンティック(semantic)要素は次のとおりである。

セマンティック要素 説明
<header> HTML文書やセクション(section)部分のヘッダー(header)を定義する。
<nav> HTML文書のナビゲーションリンクを定義する。
<section> HTML文書の主要コンテンツ(content)を定義する。
<article> HTML文書でセクション(section)部分を定義する。
<aside> HTML文書で独立した1つの記事(article)部分を定義する。
<footer> HTML文書でページ部分以外のコンテンツ(content)を定義する。

table要素を利用したレイアウト

table要素を利用してレイアウトを作成する方法は昔使われていた方式であり、現在はほとんど使用しない。table要素はレイアウトを作るために設計された要素ではないため、テーブルで作成されたレイアウトは修正が非常に難しい。したがって、できるだけtable要素でレイアウトを作成しないようにする。

<table width="100%" style="text-align:center; border:none;">
  <tr>
    <td colspan="2" style="background-color:#ddd;margin:4px;padding:4px;">Header</td>
  </tr>
  <tr>
    <td colspan="2" style="background-color:#ddd;margin:4px;padding:4px;">Nav</td>
  </tr>
  <tr>
    <td style="background-color:#ddd;width:280px;">
      Section
      <p style="background-color:#efefef;width:265px;margin:10px;">Article</p>
    </td>
    <td style="background-color:#ddd;height:60px;">Aside</td>
  </tr>
  <tr>
    <td colspan="2" style="background-color:#ddd">Footer</td>
  </tr>
</table>

コード実行

参照