HTMLのテンプレート的なの

head内に書くこと多すぎて嫌になる昨今。
あれがない、これがない、あれどう書くっけとならないためのエントリー。
気が向いたら追加したりしなかったりする予定。


#viewport

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```
レスポンシブとかスマホサイトのとき必須。
拡大・縮小はしたいからこの設定のところが多い気がする。

アプリっぽく拡大縮小しないでほしい場合はこれ↓

```html
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
```
```css
body {
  -webkit-text-size-adjust: 100%;
}
```

#CSS

```html
<link rel="stylesheet" href="normalize.css">
```

CSSのリセットはnormalize派。
compassを使ってるので、最近は一つのcssにまとめてるのであんまり書かないけど。

あとブレイクポイントはこんなかんじ…？
（これも環境がコロコロ変わるから頻繁に調べてるような…）

スマートフォン 

* 縦(portrate) 320 ～ 414px
* 横(landscape) 480 ～ 736px 

タブレット 

* 縦(portrate) 600 ～ 768px
* 横(landscape) 966 ～ 1028px



#jQuery

## CDN版

```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> (window.jQuery || document .write('<script src="js/jquery-1.11.2.min.js"><\/script>')); </script>
```

CDNで読み込んだ方が早いっぽいので、Googleのを読み込んでる。
一応読み込めない場合のことも考えてサーバーにも圧縮版のファイルをup。
([jQuery-1.11.2.min.js](http://code.jquery.com/jquery-1.11.2.min.js)のダウンロードはここから)

* [Googl CDN](https://developers.google.com/speed/libraries/devguide#jquery)
* [jQuery CDN](http://code.jquery.com/)  
（※該当のバージョンがなければ[See all versions of jQuery Core.](http://code.jquery.com/jquery/)の方をチェック。）

##1.xと2.xを使い分け版

2.0以降はIE8サポート外だけど、その分軽量なので、少しでも軽くしたいってときに。

```html
<!--[if lt IE 9]>
    <script src="jquery-1.11.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.1.3.js"></script>
<!--<![endif]-->
```

バージョンによってサポートしてないあれやこれやがあるので、あんまり使わない方がいいかも。
ちなみに対応はこんなかんじ

* IE6～ → ～1.11×
* IE8～ → compact 3.×
* IE9～ → 2.× / 3.×


##高速化

`</head>` でなくて、`</body>` 直前に。
async属性なるものもあるので、これ使うといいかも
（最近知ったのでまだ使ったことはないけど）

```html
<script src="script.js" async></script>
<script src="script.js" defer></script>
```

async...非同期で読み込み、読み込み終わり次第実行する
defer...ページの読み込み完了後スクリプト実行

参考:http://d.hatena.ne.jp/Syunpei/20091006/1254791382


#アクセス解析

```html
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXXXXXX-Y', 'example.com');
  ga('send', 'pageview');
</script>
```

だいたいこんな感じ
このあたりコロコロ変わりすぎだと思う…

#SNS

シェアボタンの生成はここから

* [twitter]
(https://about.twitter.com/ja/resources/buttons)
* [Facebook]
(https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP)
* [+1 ボタン - Google+ Platform — Google Developers](https://developers.google.com/+/web/+1button/?hl=ja)

OGimage

```html
<meta property="og:title" content="タイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="http://任意のURL">
<meta property="og:image" content="http://任意のURL/og_image.png">
<meta property="og:site_name" content="">
<meta property="og:description" content="" />
<meta property="fb:app_id" content="任意のID">
```
app_idは面倒だけどとっておいた方が良さげ。



#I8以下対応用

## UA偽装

```html
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
```

## CSSハック

```html
<!--[if lt IE 7 ]><html class="ie ie6" lang="ja"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="ja"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="ja"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="ja"><!--<![endif]-->
```

下位ブラウザのCSSハック度忘れしても大丈夫なようにあると便利。
最近ではせいぜいIE8位対応が主流になってきてるのでいらないかもだけど。

## IE8対応であってもHTML5で書きたい

'<!DOCTYPE HTML>'くらいでhtml5タグを使わなかったらいいんだけど、あとで、やっぱりIE8も…とか言われてしまった場合嫌々追加するときはこれ。

### selectivizr-min.js
```html
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="js/selectivizr-min.js"></script>
<![endif]-->
```

CSS3も使ってるという場合はこれ。

ダウンロード
[Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8]
(http://selectivizr.com/)

対応表
http://fmbip.com/litmus/


### html5.js


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

#

```html
<link rel="alternate" media="only screen and (max-width: 640px)" href="sp/" />
```

#ファビコン（※お好みで）

```html
<link rel="shortcut icon" href="/favicon.ico">
```

表示される画像サイズは16×16px 
32×32pxで作っておけばいいかなというかんじ


#apple-touch-icon（※お好みで）

```html
<link href="http://URLが入ります/apple-touch-icon.png" 
rel="apple-touch-icon">
```

画像サイズは256×256px位
Androidではフルパスでないと確認できなかったり、ベーシック認証がかかっていると確認できなかったりするので注意。

#browserconfig.xml（※お好みで）
[Create a Windows 8.1 tile for your site - Build My Pinned Site - Microsoft Internet Explorer]
(http://www.buildmypinnedsite.com/en)

Windows8のIE11のライブタイルで、ユーザーがサイトをピン留めするときに自動的に読み取られるファイル。
画像サイズが4つ分（128×128、270×270、270×558、558×558）必要
558×558以上でなおかつ高さ270でもトリミングしやすいファイルを用意するとよさげ




# 電話番号がSkypeの番号ボタンになるのを防ぐ（※お好みで）

```html
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
```


#まとめ

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta property="og:title" content="タイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="http://任意のURL">
<meta property="og:image" content="http://任意のURL/og_image.png">
<meta property="og:site_name" content="">
<meta property="og:description" content="" />
<meta property="fb:app_id" content="任意のID">
<title>タイトル</title>
<link rel="stylesheet" href="css/style.css">
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-Y', 'example.com');
  ga('send', 'pageview');
</script>
</head>

<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> (window.jQuery || document .write('<script src="js/jquery-1.11.2.min.js"><\/script>')); </script>
<script src="js/scripts.js"></script>
</body>
</html>
```

環境にもよるけど、だいたいこんなかんじになるんじゃないかと。