【第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