【第1回】HTML5で作る企業サイトのコーディング

こんにちは、今日からcode-lifeに参加するYuuです。

今回から今話題のHTML5で企業サイトのマークアップします。 最終的には、マルチデバイスなデモサイトを完成させる予定です。 そのあとMTなり、WPなりのテンプレート化という感じに。

基礎テンプレート

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
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="UTF-8" />

  <title></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">

</body>
</html>

解説

まずは触りからいきます。 この辺は色々なサイトで解説されていますので、改めて解説するような内容ではありませんけども。。。

The root element

1
2
<!DOCTYPE html>
<html lang="ja" dir="ltr">

これはもうお決まりです。 DOCTYPE スイッチは標準準拠として、最新仕様に基づいたレンダリングがされます。

dir属性の値は下記の通り。

1
2
ltr 左から右向きに組み込まれたテキスト
rtl 右から左向きに組み込まれたテキスト

The meta element

1
<meta charset="UTF-8" />

文字コードはutf-8で固定です。 XHTMLと同じように書けるので終了タグがないものは、スラッシュで閉じています。 

1
2
<meta name="description" content="" />
<meta name="keywords" content="" />

これ大事。空だけど。 SEO対策としてというよりも、そもそもサイトの説明をきちんとしましょう。 このサイトは何を、そして誰に伝えたいのか、で文章考えたりしてます。

ちなみにキーワード数は5個~6個程度。 descriptionの文字数は40文字~80文字が一般的みたいだけど、モバイルとかバラバラ。 文字数は意識しつつも、分かりやすい簡潔な説明文に。

1
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

モバイル端末(スマートフォン向け) 値は案件にあわせてカスタマイズしています。

The link element

1
2
3
<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" />

faviconは新規サイト作るときは忘れないように!

1
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png">

iPhoneなどでエンボス加工をかけたくない場合は、-precomposedを指定することでエンボス解除できます。

1
2
<link rel="index" href="/" title="" />
<link rel="sitemap" href="/sitemap.html" title="" />

クローラーのコンテンツ誘導用に、indexとsitemapを指定しています。 ページによっては、contentsやnextも。

The style element

1
2
<link rel="stylesheet" href="/css/reset.css" media="screen,print" />
<link rel="stylesheet" href="/css/layout.css" media="screen,print" />

独自カスタマイズしているリセット用CSSとレイアウト用のCSSを読み込んでます。 import.cssでまとめていないのは、読み込みのパフォーマンスがブラウザによって違かったり、スマートフォン対応考えてだったりします。

1
2
3
4
5
6
<style type="text/css">
  article,aside,canvas,details,figcaption,figure,
  footer,header,hgroup,menu,nav,section,summary{
      display:block;
  }
</style>

HTML5に対応する上で、IE6/7/8はCSS3の新要素がわかりません。 上記指定をCSS内で設定するのを忘れずに。

ちなみにHTML5に対応したreset.cssは世の中にいっぱいあります。 最近話題のブラウザのデフォルト設定を活かしたnormalize.cssでもいいと思います。 どれ使ったとしても、作業効率化が目的なのを忘れないようにしたいところ。

The script element

1
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

IE8以下はHTML5に対応していないため、IE9以前のIE6/7/8に適用させるおまじない。 新要素をdocument.createElement()して、エレメントを作成しています。

http:を抜かすことで、SSLページで警告をださないようにしています。 ※Javascriptを読み込む場合のみ

というわけで本日はここまで。

Comments