Edited at

HTMLのテンプレート的なの

More than 3 years have passed since last update.

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のダウンロードはここから)


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

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

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で書きたい

'<!DOCTYPE HTML>'くらいで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://fmbip.com/litmus/


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

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>

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