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 © 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
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を使ったブログデザイン
というわけで、基本的な下層部分はここまで。
