【第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 |
|
解説
まずは触りからいきます。 この辺は色々なサイトで解説されていますので、改めて解説するような内容ではありませんけども。。。
The root element
1 2 |
|
これはもうお決まりです。 DOCTYPE スイッチは標準準拠として、最新仕様に基づいたレンダリングがされます。
dir属性の値は下記の通り。
1 2 |
|
The meta element
1
|
|
文字コードはutf-8で固定です。 XHTMLと同じように書けるので終了タグがないものは、スラッシュで閉じています。
1 2 |
|
これ大事。空だけど。 SEO対策としてというよりも、そもそもサイトの説明をきちんとしましょう。 このサイトは何を、そして誰に伝えたいのか、で文章考えたりしてます。
ちなみにキーワード数は5個~6個程度。 descriptionの文字数は40文字~80文字が一般的みたいだけど、モバイルとかバラバラ。 文字数は意識しつつも、分かりやすい簡潔な説明文に。
1
|
|
モバイル端末(スマートフォン向け) 値は案件にあわせてカスタマイズしています。
The link element
1 2 3 |
|
faviconは新規サイト作るときは忘れないように!
1
|
|
iPhoneなどでエンボス加工をかけたくない場合は、-precomposedを指定することでエンボス解除できます。
1 2 |
|
クローラーのコンテンツ誘導用に、indexとsitemapを指定しています。 ページによっては、contentsやnextも。
The style element
1 2 |
|
独自カスタマイズしているリセット用CSSとレイアウト用のCSSを読み込んでます。 import.cssでまとめていないのは、読み込みのパフォーマンスがブラウザによって違かったり、スマートフォン対応考えてだったりします。
1 2 3 4 5 6 |
|
HTML5に対応する上で、IE6/7/8はCSS3の新要素がわかりません。 上記指定をCSS内で設定するのを忘れずに。
ちなみにHTML5に対応したreset.cssは世の中にいっぱいあります。 最近話題のブラウザのデフォルト設定を活かしたnormalize.cssでもいいと思います。 どれ使ったとしても、作業効率化が目的なのを忘れないようにしたいところ。
- CSS RESET.com
- normalize.css
The script element
1
|
|
IE8以下はHTML5に対応していないため、IE9以前のIE6/7/8に適用させるおまじない。 新要素をdocument.createElement()して、エレメントを作成しています。
http:を抜かすことで、SSLページで警告をださないようにしています。 ※Javascriptを読み込む場合のみ
というわけで本日はここまで。