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

Yuuです。

第3回目は、下層ページのテンプレートを作ります。

ちなみに、簡単なラフを今回も用意しています。

スライドショー部分がめでたく(?)消えました。

テンプレート

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
<!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="next" href="/" title="" />
  <link rel="prev" 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="content">

    <h1>インフォメーション</h1>

    <article>
      <header>
        <h2>Code Life株式会社ではXXXXXXXXXX</h2>
        <time datetime="2012-03-10">2012年3月10日</time>
      </header>
      <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
      <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
    </article>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

    <article>
      <header>
        <h2>XXXXXXXXXXをリリースします</h2>
        <time datetime="2012-03-05">2012年3月5日</time>
      </header>
      <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
      <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
    </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実装時に追加修正が必要です。

解説

今回はなんとなく予想してましたが、結構あっさり内容になります。 トップページとあまり変化はないですが、下層テンプレート作るときに変更するところを見ていきます。

ちなみに内容はニュースコンテンツです。

1
2
3
<title>インフォメーション | code life株式会社</title>
<meta name="description" content="" />
<meta name="keywords" content="" />

コンテンツに合わせたページタイトル、説明、キーワード設定を行います。

1
2
<link rel="next" href="/" title="" />
<link rel="prev" href="/" title="" />

このページの次のコンテンツページ、前のコンテンツページのリンクを明示します。

1
<h1>インフォメーション</h1>

ページのコンテンツタイトルを設定。

1
2
3
4
5
6
7
8
<article>
  <header>
    <h2>Code Life株式会社ではXXXXXXXXXX</h2>
    <time datetime="2012-03-10">2012年3月10日</time>
  </header>
  <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
  <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</article>

article要素を使用してニュースエントリー部分を記述しました。

ニュースタイトルをh2で、time要素を使ってエントリー日を、それをheader要素を囲んでいます。 time要素をニュースの発行日時とするなら

1
<time datetime="2012-03-10" pubdate>2012年3月10日</time>

というようにpubdate属性を任意指定することで、ニュースの発行日時を意味したものにできます。 article要素に入ってなければ、このページ自体の発行日時になります。

その下にはニュースの本文を記述しています。この辺はブログ記事と同じ感じの組み方ですね。

html5を使ったブログデザイン

というわけで、基本的な下層部分はここまで。

Comments