head内に書くこと多すぎて嫌になる昨今。
あれがない、これがない、あれどう書くっけとならないためのエントリー。
気が向いたら追加したりしなかったりする予定。
#viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
レスポンシブとかスマホサイトのとき必須。
拡大・縮小はしたいからこの設定のところが多い気がする。
アプリっぽく拡大縮小しないでほしい場合はこれ↓
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
body {
-webkit-text-size-adjust: 100%;
}
#CSS
<link rel="stylesheet" href="normalize.css">
CSSのリセットはnormalize派。
compassを使ってるので、最近は一つのcssにまとめてるのであんまり書かないけど。
あとブレイクポイントはこんなかんじ…？
（これも環境がコロコロ変わるから頻繁に調べてるような…）
スマートフォン
- 縦(portrate) 320 ～ 414px
- 横(landscape) 480 ～ 736px
タブレット
- 縦(portrate) 600 ～ 768px
- 横(landscape) 966 ～ 1028px
#jQuery
CDN版
<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のダウンロードはここから)
- Googl CDN
-
jQuery CDN
（※該当のバージョンがなければSee all versions of jQuery Core.の方をチェック。）
##1.xと2.xを使い分け版
2.0以降はIE8サポート外だけど、その分軽量なので、少しでも軽くしたいってときに。
<!--[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属性なるものもあるので、これ使うといいかも
（最近知ったのでまだ使ったことはないけど）
<script src="script.js" async></script>
<script src="script.js" defer></script>
async...非同期で読み込み、読み込み終わり次第実行する
defer...ページの読み込み完了後スクリプト実行
参考:http://d.hatena.ne.jp/Syunpei/20091006/1254791382
#アクセス解析
<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
OGimage
<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偽装
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
CSSハック
<!--[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で書きたい
''くらいでhtml5タグを使わなかったらいいんだけど、あとで、やっぱりIE8も…とか言われてしまった場合嫌々追加するときはこれ。
selectivizr-min.js
<!--[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/)
html5.js
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="alternate" media="only screen and (max-width: 640px)" href="sp/" />
#ファビコン（※お好みで）
<link rel="shortcut icon" href="/favicon.ico">
表示される画像サイズは16×16px
32×32pxで作っておけばいいかなというかんじ
#apple-touch-icon（※お好みで）
<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の番号ボタンになるのを防ぐ（※お好みで）
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
#まとめ
<!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>
環境にもよるけど、だいたいこんなかんじになるんじゃないかと。