HTML5で考えるレイアウト、まずは基本のワンカラムレイアウトを「header」「main」「footer」で!

4194

 HTML5でレイアウトを考えてみる。基本の基本は、このワンカラムレイアウトだ。

  ・header要素
  ・main要素
  ・footer要素

 で最小のレイアウト構成とする。

 HTML5でレイアウトを考えるからには、よりセマンティックなマークアップを目指したい。HTML5には「文書構造をより明確に定義する」という大事な役割もある。各要素の役割を適切に把握しておきたいと思う。

[html firstline=”1″ highlight=”12,13,14,16,17,18,20,21,22″ title=”index.html”]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!–[if lt IE 9]>
<script src="./js/html5shiv.js"></script>
<![endif]–>
<title>ここにページのタイトルを記載</title>
</head>
<body>

<header>
ここはヘッダー。
</header>

<main>
ここはメインコンテンツ。
</main>

<footer>
ここはフッター。
</footer>

</body>
</html>
[/html]

■header要素

 ページ最上部に「サイト名」や「サイトロゴ画像」「イントロダクション」「ナビゲーション」などを表示する要素がこの「header」だ。各ページに唯一のものというイメージがあるが、そんなことはなく、各記事のヘッダーとしても使用が可能だ。

 通常、header要素には、少なくとも一つの「見出し(h1~h6要素)」を入れることを想定されているが、これは必須の制約とはなっていないので、入れなくても問題は特にない。

  ・ページのタイトル
  ・セクションの見出し
  ・グローバルナビゲーション
  ・ページ内リンクメニュー
  ・イントロダクション(序説、前置き)
  ・発行日時(文書や記事の発行日時)
  ・検索フォーム(サイト内検索など)
  ・関連ロゴ(サイトや企業のロゴ)

 header要素に想定されるのは大体こんなところだろうか。もちろん、ページ全体のヘッダーならそれに適した内容(ページタイトルとかロゴとか)を表示しなければならないし、各セクションのヘッダーならそのセクションに則した内容(前置きとか発行日時とか)を表示しなければならない。

[html firstline=”10″ highlight=”12,13,14,15″ title=”index.html”]
<body>

<header>
<h1>ここにサイト名とか</h1>
<p>ここに簡単なサイト説明とか</p>
</header>

<main>
[/html]

4194_2
 ※このキャプチャは「Google Chrome」での確認結果

 やろうという人もあまりいないと思うが、header要素の中にheader要素は書いてはいけない。念の為・・・。

■footer要素

 ページ最下部に「コピーライト」や「関連ドキュメントへのリンク」「索引」などを表示する要素がこの「footer」だ。header要素と同じく、各ページに唯一のものというイメージがあるが、そんなことはなく、各記事のフッターとしても使用が可能だ。

 footer要素は通常、ページやセクションの最下部に表示するが、内容によっては必ずしも最下部である必要はないとされている。ページやセクションの途中であったり、先頭でも使用することは可能だ。

  ・著作者
  ・運営元
  ・連絡先
  ・コピーライト
  ・発行日時(文書や記事の発行日時)
  ・関連ドキュメントへのリンク
  ・索引
  ・使用許諾(ライセンス同意事項など)
  ・リンク(前ページ、ページ先頭など)

 footer要素に想定されるのは大体こんなところだろうか。もちろん、ページ全体のフッターならそれに適した内容(コピーライトとか運営元とか)を表示しなければならないし、各セクションのフッターならそのセクションに則した内容(関連ドキュメントへのリンクとか著作者とか)を表示しなければならない。

[html firstline=”19″ highlight=”21,22,23,24,25″ title=”index.html”]
</main>

<footer>
<p>書いた人はアシベズヘア</p>
<p><a href="./index.html">トップへ戻る</a></p>
<p>Copyright (C) 2014 materialize LLC.</p>
</footer>

</body>
</html>
[/html]

4194_3
 ※このキャプチャは「Google Chrome」での確認結果

■main要素

 ページ内の主要な部分、メインコンテンツを表すのがこの「main」要素だ。この要素はページ内で唯一の存在でなければならない。普通に考えてみても、1ページ内にメインとなるコンテンツが複数あるというのは、おかしな話だろう。

 ページ内の各文書に書かれるであろう「サイトロゴ」や「ナビゲーション(メインコンテンツへのリンクなど)」「コピーライト」などといったものを全て除外した、その文書固有のメイン部分がmain要素となるものとされている。また、

  ・article要素
  ・nav要素
  ・aside要素
  ・header要素
  ・footer要素

 の中に登場してはいけないものとされている。逆に、main要素の中にこれら要素が含まれているのは何ら問題が無い。

 ところで、IEの話だが、平成26年2月2日現在、IEはこのmain要素に対応していない。IE9からはジェネリック要素(未定義で独自のタグ、要素)の取り扱いがHTML5仕様に変更されているので、IE8以下のようにmain要素が無視されることはないが、スタイル指定をしてやる必要がある。

[css firstline=”1″ highlight=”” title=”index.css”]
/* IE */
main {
display: block;
}
[/css]

■各要素を色付けして確認してみる

 では最後に、フラットな配色を施して各要素を確認してみたいと思う。ソースコードだけではイメージも湧かないだろう。

 背景色の指定はCSSを用いている。html内で各要素に「style=”background-color: #e05a48;”」とスタイルを書いてしまうのは推奨されていないので、なるべくCSSに書くように心掛けよう(ついやってしまうんだけど)。

[html firstline=”1″ highlight=”8″ title=”index.html”]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!–[if lt IE 9]>
<script src="./js/html5shiv.js"></script>
<![endif]–>
<link rel="stylesheet" href="./css/index.css" />
<title>ここにページのタイトルを記載</title>
</head>
<body>

<!– HEADER
============================================================================== –>
<header>
<h1>materialize</h1>
<p>具現化したいものがある</p>
</header>

<!– MAIN
============================================================================== –>
<main>
<p>ここはメインコンテンツ</p>
<p>トイレの掃除を子ども達がしない学校が多い</p>
<p>横浜市では約30年間、専門業者や用務員などがトイレ掃除を行っていた</p>
</main>

<!– FOOTER
============================================================================== –>
<footer>
<p>書いた人はアシベズヘア</p>
<p><a href="./index.html">トップへ戻る</a></p>
<p>Copyright (C) 2014 materialize LLC.</p>
</footer>

</body>
</html>
[/html]

[css firstline=”1″ highlight=”19,29,49″ title=”index.css”]
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, menu,
main, nav, output, ruby, section, summary, time, mark, audio, video, blockquote {
margin: 0;
padding: 0;
border: 0;
}

/* IE */
main {
display: block;
}

body {
color: #fff;
background-color: #bbb;
}

/* HEADER
============================================================================== */

header {
color: #444;
background-color: #fff;
height: 90px;
border-bottom: solid 10px #eee;
}

/* MAIN
============================================================================== */

main {
height: 250px;
}

/* FOOTER
============================================================================== */

footer {
background-color: #e05a48;
height: 350px;
}
[/css]

4194_4
 ※このキャプチャは「Google Chrome」での確認結果

 たったこれだけで、基本のワンカラムレイアウトだけも、サイトっぽく見えるのではないだろうか? ワンカラムレイアウトのままで良いなら、もう後はコンテンツの中身を充実させていくだけで、ほとんどサイトは出来たようなものだ。

(平成26年2月2日 アシベズヘア@ashibehair_m

━ 関連書籍 ━━━

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。
HTML5+CSS3の「正しい」使い方を知ることで、新しい時代に対応する応用力が身に付きます。はじめて学ぶ人は、サイトの作り方をゼロから習得。すでに覚えた人は、「正しい」方法を復習できる。

━ 関連記事 ━━━

  • HTML5で考えるレイアウト、まずは基本のワンカラムレイアウトを「header」「main」「footer」で!
  • HTML5は「IE8」以下(「IE9」未満)に対応していない・・・じゃあ、対応させる方法と、その雛形!
  • HTML5の書き方(宣言)、最小の雛形、そして、文字化けに意外とハマる!
  • HTML5で考えるレイアウト、まずは基本のワンカラムレイアウトを「header」「main」「footer」で!」への3件のフィードバック

    1. ピンバック: HTML5の書き方(宣言)、最小の雛形、そして、文字化けに意外とハマる! | materialize.jp

    2. ピンバック: HTML5は「IE8」以下(「IE9」未満)に対応していない・・・・・・じゃあ、対応させる方法と、その雛形! | materialize.jp

    3. ピンバック: Java+Eclipse+TomcatでJSP+Servletのページ遷移 | materialize.jp

    コメントを残す

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