3カラムのシンプルテンプレート

いろいろ使いまわしのきく、簡単にレイアウトされたテンプレートを作っておきたいと思い、超シンプルな3カラムのテンプレを作ってみた。

ただ、一般的な3カラムのHTMLコーディング順って、大体以下のようになるよねぇ。

  1. ヘッダー
  2. サイドA
  3. メインコンテンツ
  4. サイドB
  5. フッター

ページごとの内部SEOをより強化したいから、ヘッダーの直下にメインコンテンツを配置してみたいのだ。こんな感じ↓

  1. ヘッダー
  2. メインコンテンツ
  3. サイドA
  4. サイドB
  5. フッター

と思って調べたらCSSで結構簡単にできた。

レイアウトイメージ
3column

サンプルはこちら

firefox、Chromeは大丈夫だけど、IE8以下はメインコンテンツがサイドBの位置になってる@@はぁ…IEはやっかいだな。

あとは<main>の中に<nav>(カテゴリナビ)を入れることがいいのかはイマイチわからならい。

<div id="content">
<main><article>~</article></main>
<nav>~</nav>
</div>

のように、<nav>は<main>外でもいいと思う。
でもメインコンテンツに関連するカテゴリなら<main>内に入れていいはずだし、関連記事も<aside>で入れていいはず。

<nav>って…

ちょっとぼやき。
カテゴリーをはじめパンクズや会社概要とか、フッターのサイト案内のリンクとかも全部ナビゲーションだよね。なんか<nav>多すぎ。<aside>で囲えばいいのかとも思うけど・・・それも違う気がする。

<menu>っていう要素もあるけど、これは、操作メニューを作成するタグ。例えば「新規作成」「編集」とか…しかも2013.8頃のHTML5 勧告候補で削除対象となっている。
※<menu>はHTML5から削除されるが、HTML 5.1で<menuitem>として機能は引き継がれるらしい。

ん~せめて、メインカテゴリ専用のHTML5タグが追加されて欲しいなぁ…<category>とかで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です