Help us understand the problem. What is going on with this article?

HTMLのテンプレート的なの

More than 5 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>

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

matsui-a
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした