回答編集履歴

1 追記

makoto-n

makoto-n score 385

2016/08/07 16:33  投稿

動作確認はすぐに行えませんが、こんな感じで書いていこうと思います。
なお、Ie8までが対象のシンプルなレイアウトを記述するためのソースです。
Ie6,7は捨てる覚悟でいきます。
jQueryは1.xまでが対応しているとのことです。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
 <link rel="canonical" href="">
 <meta charset="UTF-8">
 <meta name="author" content="">
 <meta name="copyright" content="copyright&copy;" />
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="format-detection" content="telephone=no, email=no, address=no">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
 <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico">
 <link rel="apple-touch-icon" sizes="192x192" href="apple-touch-icon.png">
 <link rel="manifest" href="manifest.json">
 <meta name="theme-color" content="#ffffff">
 <meta name="msapplication-TileColor" content="#ffcc22">
 <meta name="msapplication-TileImage" content="mstile-144x144.png">
 <meta name="msapplication-config" content="browserconfig.xml" />
 <link rel="stylesheet" href="css/style.css">
 <link rel="stylesheet" href="css/ie-hack.css">
 <title>TITIE</title>
 <meta name="apple-mobile-web-app-title" content="TITIE">
 <meta name="application-name" content="TITIE">
</head>
<body>
 <header><div id="header">
   
 </div></header>
 <nav><div id="nav">
   
 </div></nav>
 <main><div id="main">
   
 </div></main>
 <footer><div id="footer">
 <noscript>
     このページは<span class="bold">JavaScript</span>を使用しています。<br>
     ご使用中のブラウザは<span class="bold">JavaScript</span>が無効になっているか、<span class="bold">JavaScript</span>に対応していません。<br>
     <span class="bold">JavaScript</span>を有効にするか、<span class="bold">JavaScript</span>が使用可能なブラウザでアクセスして下さい。
   </noscript>
   &copy;
 </div></footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]>
 <script src="js/html5shiv.min.js"></script>
 <script src="js/selectivizr-min.js"></script>
<![endif]-->
</body>
</html>
```
header,footerなどのhtml5要素は
```css
padding: 0;
margin: 0;
```
を記述してクラスやIDを付け加えません。
ありがとうございました。
ps.Ie7,6の葬儀を始めようと思いますw。
ps.Ie7,6の葬儀を始めようと思いますw。
追加
---
emmetスニペット
```
"!!": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n\t<link rel=\"canonical\" href=\"\">\n\t<meta charset=\"UTF-8\">\n\t<meta name=\"author\" content=\"\">\n\t<meta name=\"copyright\" content=\"copyright&copy;\" />\n\t<meta name=\"description\" content=\"\">\n\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n\t<meta name=\"format-detection\" content=\"telephone=no, email=no, address=no\">\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t<link rel=\"icon\" type=\"image/vnd.microsoft.icon\" href=\"favicon.ico\">\n\t<link rel=\"shortcut icon\" type=\"image/vnd.microsoft.icon\" href=\"favicon.ico\">\n\t<link rel=\"apple-touch-icon\" sizes=\"192x192\" href=\"apple-touch-icon.png\">\n\t<link rel=\"manifest\" href=\"manifest.json\">\n\t<meta name=\"theme-color\" content=\"#ffffff\">\n\t<meta name=\"msapplication-TileColor\" content=\"#ffcc22\">\n\t<meta name=\"msapplication-TileImage\" content=\"mstile-144x144.png\">\n\t<meta name=\"msapplication-config\" content=\"browserconfig.xml\" />\n\t<link rel=\"stylesheet\" href=\"css/style.css\">\n\t<link rel=\"stylesheet\" href=\"css/ie-hack.css\">\n\t<title>TITIE</title>\n\t<meta name=\"apple-mobile-web-app-title\" content=\"TITIE\">\n\t<meta name=\"application-name\" content=\"TITIE\">\n</head>\n<body>\n\t<header><div id=\"header\">\n\t\t\n\t</div></header>\n\t<nav><div id=\"nav\">\n\t\t\n\t</div></nav>\n\t<main><div id=\"main\">\n\t\t\n\t</div></main>\n\t<footer><div id=\"footer\">\n\t<noscript>\n\t\t\tこのページは<span class=\"bold\">JavaScript</span>を使用しています。<br>\n\t\t\tご使用中のブラウザは<span class=\"bold\">JavaScript</span>が無効になっているか、<span class=\"bold\">JavaScript</span>に対応していません。<br>\n\t\t\t<span class=\"bold\">JavaScript</span>を有効にするか、<span class=\"bold\">JavaScript</span>が使用可能なブラウザでアクセスして下さい。\n\t\t</noscript>\n\t\t&copy;\n\t</div></footer>\n<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>\n<!--[if lte IE 8]>\n\t<script src=\"js/html5shiv.min.js\"></script>\n\t<script src=\"js/selectivizr-min.js\"></script>\n<![endif]-->\n</body>\n</html>"
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る