More than 5 years have passed since last update.

HTMLのテンプレート的なの

Last updated at2015-01-21Posted at 2015-01-13

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

viewport

<metaname="viewport"content="width=device-width, initial-scale=1">

レスポンシブとかスマホサイトのとき必須。
拡大・縮小はしたいからこの設定のところが多い気がする。

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

<metaname="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

<linkrel="stylesheet"href="normalize.css">

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

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

スマートフォン

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

タブレット

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

jQuery

CDN版

<scriptsrc="//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]><!--><scriptsrc="jquery-2.1.3.js"></script><!--<![endif]-->

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

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

高速化

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

<scriptsrc="script.js"async></script><scriptsrc="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*newDate();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

<metaproperty="og:title"content="タイトル"><metaproperty="og:type"content="website"><metaproperty="og:url"content="http://任意のURL"><metaproperty="og:image"content="http://任意のURL/og_image.png"><metaproperty="og:site_name"content=""><metaproperty="og:description"content=""/><metaproperty="fb:app_id"content="任意のID">

app_idは面倒だけどとっておいた方が良さげ。

I8以下対応用

UA偽装

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">

CSSハック

<!--[if lt IE 7 ]><html lang="ja"><![endif]--><!--[if IE 7 ]><html lang="ja"><![endif]--><!--[if IE 8 ]><html lang="ja"><![endif]--><!--[if (gte IE 9)|!(IE)]><!--><htmllang="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/)

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

html5.js

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

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

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

<linkrel="shortcut icon"href="/favicon.ico">

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

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

<linkhref="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の番号ボタンになるのを防ぐ（※お好みで）

<metaname="SKYPE_TOOLBAR"content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>

まとめ

<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content=""><metaname="keywords"content=""><metaname="author"content=""><metaproperty="og:title"content="タイトル"><metaproperty="og:type"content="website"><metaproperty="og:url"content="http://任意のURL"><metaproperty="og:image"content="http://任意のURL/og_image.png"><metaproperty="og:site_name"content=""><metaproperty="og:description"content=""/><metaproperty="fb:app_id"content="任意のID"><title>タイトル</title><linkrel="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*newDate();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><scriptsrc="//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><scriptsrc="js/scripts.js"></script></body></html>

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

828

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Movatterモバイル変換