ヘッダの定型書式
tml5,css3で作成した、レスポンシブデザインの「Expresson Web 4」のダイナミックWebテンプレートを作成します。 そのために、ヘッダに、Html5,css3に対応していないブラウザのためのポリフィルを構築し、 多くのブラウザで同じように見え得るように設定する、リセットCSSを指定して、ビューポートを設定します。
長く、わかりにくいですが、理解する必要はありません。理解して、変更できるようになるまではそのまま使用しましょう。変更する必要はありません。
リセットCSS
HTML5ポリフィル
HTML5非対応のブラウザにHTML5を認識させるための、スクリプトです。適時更新されるので、適時、最新版に更新しましょう。
html5shiv(外部サイト)
HTML5非対応のブラウザにHTML5を認識させるポリフィル。ie6～9でHTML5に対応させるために使用します。
respond.js(外部サイト)
IE8以下でレスポンシブWebデザインを実現するために使用します。
css3ポリフィル
css3-mediaqueries-js(外部サイト)
css3非対応のブラウザをcss3に対応させるために使用します。
ローカルサイトにフォルダを作成して格納します
テンプレートでは、cssを格納するフォルダが、「styles」になって言いますが、「style」と混同しやすいので、 フォルダ名を「css」に変更します。「Expresson Web 4」ないで変更するとこれらのファイルを指定している記述が自動で修正されるので、面倒な作業なく修正できます。
「css」ファイルは、「css」フォルダに、「js」ファイルは「js」フォルダに格納してください。
ヘッダを差し替えます
おそらくはじめに作成された方は、上で紹介した、リセットCSSやポリフィルの説明を理解して構築したのだとおもいますが、そのまま利用させてもらいましょう。 内部の記述の説明は、下で紹介する書籍に詳しく書いてあります。ホームページのデザインの本をお持ちでしたら、その中でも紹介されていると思います。
<body>の直前までの部分を以下のコードに差し替えます。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6" lang="ja"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="ja"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="ja">
<!--<![endif]-->
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ページ情報-->
<meta name="author" content="作成者名">
<!-- #BeginEditable "doctitle" -->
<meta name="description" content="ページの説明">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4">
<title>タイトル</title>
<!-- #EndEditable -->
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/style.css">
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<script src="js/html5shiv.js"></script><![endif]-->
<!-- google-code-prettifyのスクリプト -->
<!-- google-code-prettifyのスクリプトは、ここに張り付けます。-->
<!-- アクセス解析スクリプト -->
<!-- GoogleAnalyticトラッキングコード-->
<!-- GoogleAnalyticトラッキングコードは、ここに張り付けます。-->
</head><!--ヘッダ終了-->
スキーマを設定します
「Expresson Web 4」でスキーマの指定をしておきます。
参考書籍
