【第2回】トップページを作ろう。HTML5で作る企業サイトのコーディング

こんにちは、Yuuです。

前回はhead部分について記載しました。 今回は、トップページのbody部分をコーディングしていこうと思います。

と、その前にレイアウト作ります。 今回は3分クッキング的にこちらのレイアウトを用意しています。

5分くらいで作成してみたものなので、細部は要検討が必要ですが、まぁデモなのでと言い訳しつつ。

テンプレート

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="UTF-8" />
  <title>code life株式会社</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
  <link rel="icon" type="image/png" href="/favicon.png" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="index" href="/" title="" />
  <link rel="sitemap" href="/" title="" />
  <link rel="stylesheet" href="/css/reset.css" media="screen,print" />
  <link rel="stylesheet" href="/css/layout.css" media="screen,print" />
  <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body id="top">
<!--=====================================================================
  HEADER
======================================================================-->
<header id="header">
  <h1>Code Life株式会社</h1>
  <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
  <nav id="gNav">
    <ul>
      <li><a href="">menu1</a></li>
      <li><a href="">menu2</a></li>
      <li><a href="">menu3</a></li>
      <li><a href="">menu4</a></li>
      <li><a href="">menu5</a></li>
    </ul>
  </nav>
</header>
<!--=====================================================================
  MAIN
======================================================================-->
<div id="main">
  <div id="slideShow">
    <ul>
      <li><a href=""><img src="" alt="" /></a></li>
      <li><a href=""><img src="" alt="" /></a></li>
      <li><a href=""><img src="" alt="" /></a></li>
    </ul>
  </div>
  <div id="content">
    <article id="information">
      <h1>最新のお知らせ</h1>
      <section id="news">
        <h2>トピックス</h2>
        <dl>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
        </dl>
      </section>
      <section id="press">
        <h2>プレスリリース</h2>
        <dl>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
        </dl>
      </section>
    </article>
  </div>
  <div id="sidebar">
    <h2>Code情報</h2>
    <ul>
      <li>PHP</li>
      <li>Java</li>
      <li>XXXX</li>
      <li>XXXX</li>
    </ul>
  </div>
</div>
<!--=====================================================================
  FOOTER
======================================================================-->
<footer id="footer">
  <ol id="breadCrumbs">
    <li><a href="#">HOME</a></li>
    <li>トップページ</li>
  </ol>
  <p id="pageTop"><a href="#top">Page Top</a></p>
  <nav id="fNav">
    <ul>
      <li>menu6</li>
      <li>menu7</li>
      <li>menu8</li>
      <li>menu9</li>
    </ul>
  </nav>
  <p>Copyright &copy; 2012 Code Life.inc, All Rights Reserved.</p>
</footer>
</body>
</html>

※詳細部分はJavascriptやCSS実装時に追加修正が必要です。

解説

body部分のマークアップをどうするか？といっても、あまりHTML5を使用していません。

コンテンツ内容によってコーディングの仕方は変わります。IDの付け方なんかも人それぞれです。

divでコーディングしてたブロックに意味をもたせる。そして、アウトラインをはっきりさせる。

これに気をつけて自分なりの解釈で組んでいます。 ちなみに他のブログさんほどコンテンツモデルなど、詳しくは解説はしてないのでざっくりいきます。

Header

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!--=====================================================================
  HEADER
======================================================================-->
<header id="header">
  <h1>Code Life株式会社</h1>
  <p>Code LifeではPHP、Java、C#を用いた開発サービスをご提供します。</p>
  <nav id="gNav">
    <ul>
      <li><a href="">menu1</a></li>
      <li><a href="">menu2</a></li>
      <li><a href="">menu3</a></li>
      <li><a href="">menu4</a></li>
      <li><a href="">menu5</a></li>
    </ul>
  </nav>
</header>

新要素のheaderで囲んでいます。 h1要素と、サイトの説明としてpタグを配置。 グローバルナビ部分にnav要素を使用しています。

1
2
3
4

<hgroup>
<h1>Code Life株式会社</h1>
<h2>～PHP、Java、C#で作る開発サービス～</h2>
</hgroup>

またhgroupで囲むことで、hgroup要素全体で一つの見出しとなります。 h2で囲んだ部分はサブタイトルとして扱われます。

3/8 修正 コメント頂いて勘違い文発見しました。 ありがとうございます。 またhgroupで囲むことで、h2要素がh1要素と同じ等級見出しとなります。
これによりh2要素はサブタイトル的な効果を発揮します。

hgroupの出番は、以降のコンテンツ内容がタイトル、サブタイトルの内容から外れない場合など、 きちんとセクション要素を意識した使用が必要になると思います。

PHPとか書いてあるのに、全部Perlのことしか書いてなかったらタイトルとサブタイトル無視してますしね。

Main

1
2
3
4
5
6
7
8

<div id="main">
  <div id="slideshow">
  </div>
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

わかりやすく中身省きました。省いてみたら、html5がなかったという。

divはhtml5では意味をもたないブロック要素となります。 見出しを伴わないブロックはdiv要素で組んでいます。

よく、サイドバーの部分を

1
2
3

<aside id="sidebar">
<!-- ここにサイドバーの内容 -->
</aside>

というように、aside要素で囲んでいる場合があります。

aside 要素は、その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表し、コンテンツから分離されたものとして見なすことができます。このようなセクションは、印刷慣例では、よく補足記事として表されるものです。

aside要素（html5.jp）

サイドバーには、広告置いたり外部リンクバナー張ったりと結構コンテンツと関係ないもの置いたりします。 本文とはあまり関係ないし、別に重要じゃなかったりもします。

でもその中には、重要なコンテンツも入る場合があります。

ということで、お決まりの如く、asideでサイドバーを組むのではなく、コンテンツをきちんと意識しましょうってことです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<article id="information">
      <h1>最新のお知らせ</h1>
      <section id="news">
        <h2>トピックス</h2>
        <dl>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
        </dl>
      </section>
      <section id="press">
        <h2>プレスリリース</h2>
        <dl>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
          <dt>20XX年XX月XX日</dt>
          <dd><a href="">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></dd>
        </dl>
      </section>
    </article>

articleとsection要素を使用してお知らせ部分を組んでみました。

article 要素は、ドキュメント、ページ、アプリケーション、サイトの自己完結したものを表します。

article要素（html5.jp）

お知らせの内容は、これだけで意味が分かり完結しているため、自己完結として捉えることができます。 さらにh1要素として、お知らせを設置しています。 html5では、適切な形であればヘッダー要素のh1を複数使用することができます。

h1複数ってSEO的にどうなの？って思うかもしれませんが、適切な構造体であれば、SEOが減点になることはないと思います。

section 要素は、一般的なドキュメント・セクションやアプリケーション・セクションを表します。セクションとは、この文脈においては、コンテンツの主題をグループ化するものです。通常はヘッダーを伴います。

section要素（html5.jp）

というように、section要素にはヘッダー（h1～h6）が必要です。 お知らせには、トピックスとプレスリリースの章があるよって感じですね。

kayacさんの記事で、

sectionのコーディングのコツとしては、本の目次を作る感覚でコーディングすれば上手くいくと思います！

HTML5でつまずきやすいasideとsectionの使い方

というのが、自分の中では一番しっくりきました。

Footer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<footer id="footer">
  <ol id="breadCrumbs">
    <li><a href="#">HOME</a></li>
    <li>トップページ</li>
  </ol>
  <p id="pageTop"><a href="#top">Page Top</a></p>
  <nav id="fNav">
    <ul>
      <li>menu6</li>
      <li>menu7</li>
      <li>menu8</li>
      <li>menu9</li>
    </ul>
  </nav>
  <p>Copyright &copy; 2012 Code Life.inc, All Rights Reserved.</p>
</footer>

最後フッター部分になります。 新要素としては、footer要素になります。 また、フッターメニューもnav要素で囲んでいます。

footer 要素は、その直近の祖先にあたるセクショニング・コンテンツに対するフッターを表します。フッターは通常は、そのセクションに関する情報を含みます。例えば、誰が書いたのかとか、関連のドキュメントへのリンクや、著作権データや、その類です。

footer要素（html5.jp）

アウトライン

というわけで今回組んでみたものをアウトラインで確認してみます。

アウトライン自動生成ツール HTML5 Outliner

untitled sectionとなっているところは、nav要素です。

nav要素もarticleやsectionと同じセクショニング・コンテンツに分類されます。 そのため、見出しがないよ！っていうエラーが出てます。

問題？といえばそうでもなく、navは文末へ移動したり、次のセクションへ移動したりする場合に用いられる可能性があります。 そのため、navとaside要素については、見出しが不要なセクショニング・コンテンツになります。

まとめ

レイアウトを考えたコンテンツの組み方は、htmlやxhtmlで組んでいた考え方が元になります。 でも、コンテンツを考えた組み方はhtml5の特性だと思います。

というわけで、ざっくり行きましたが、もっと柔軟に組めたり、適切な組み方がありそうです。 前回+今日の内容+セクショニング・コンテンツなどの情報などは下記サイトが参考になります。

次回は下層ページに移ります。

Comments