hmtl、css、jQueryのシンプルベーステンプレート自分用。

追記：2016年1月、IE10以下が実質サポート終了となったので修正。
更新：2016年6月、OGPやviewport・cssなどスマホ関連のベース、utilityスタイル、印刷関連のベースを追加。

html

  • html5に対応。リセットCSSは「sanitize.css」を利用。
  • スマホ対応（レスポンシブなし）。レスポンシブデザインの場合viewportを適宜変更。
  • OGPタグに対応。
  • ファビコンに対応。
  • canonicalタグはページの絶対パスを記述する。（修正モレや間違えるくらいなら外す）
  • 「jQuery」はGoogle Hosted Librariesを利用。バージョンは適宜変更する。
sanitize.css sanitize.css（公式サイト）
OGPタグ 【html5】OGPタグ（Open Graph protocol）の設置
jQuery 本体 Google Hosted Libraries（公式サイト） 
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8">
<meta name="viewport" content="width=980,user-scalable=yes,target-densitydpi=device-dpi">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="ページの紹介文。">
<meta name="copyright" content="&copy; atomicbox">
<title>ページタイトル</title>
<meta property="og:type" content="article">
<meta property="og:site_name" content="OGPサイト名">
<meta property="og:url" content="http://xxxxxx.jp/">
<meta property="og:title" content="OGPページタイトル">
<meta property="og:image" content="http://xxxxxx.jp/ogp.jpg">
<meta property="og:description" content="OGPディスクリプション">
<link rel="canonical" href="http://xxxxxx.jp/">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>

<header>ヘッダー</header>

<main>

<article>本文記事（内容にあわせてsectionタグにする）</article>

<aside>本文からそれる内容</aside>

</main>

<footer>フッター</footer>

</body>
</html>

css

font-familyは好みで入れ替え。

@charset 'utf-8';

/* ===============================
	base
 =============================== */
body {
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
	font-size: 1.2em;
	line-height: 1.6em;
	color: #1a1a1a;
	-webkit-text-size-adjust: 100%;
}
a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* スマホのハイライトデザインを無効にする */
}
a:focus {
	outline: none;
}
img { vertical-align: bottom;}
.mo a img {
	background-color: rgba(255, 255, 255, .01); /* マウスオーバー要素のバグ対応 */
}

/* ===============================
	loading
 =============================== */
#pageLoad {
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: fixed;
	z-index: 999;
}
#pageLoad.loading {
	background-image: url(../images/pageloading.gif);
	background-position: center center;
	background-repeat: no-repeat;
}

/* ===============================
	utility
 =============================== */
ul.horizon:after { /* 水平並びリスト */
	content: ".";
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
	font-size: 0px;
}

ul.horizon {
	list-style: none;
	min-height: 1px;
	zoom: 1;
}

ul.horizon li {
	float: left;
}

ul.dot { /* リスト（・） */
	list-style: disc;
	padding-left: 1.5em;
}

ul.star { /* リスト（※） */
	list-style: none;
	padding-left: 1.5em;
}

ul.star li {
	text-indent: -1.5em;
}

ul.star li:BEFORE {
	content: "\203b";
	margin-right: 0.5em;
}

ul.disc { /* リスト（●） */
	list-style: none;
	padding-left: 1.5em;
}

ul.disc li {
	text-indent: -1.5em;
}

ul.disc li:BEFORE {
	content: "\25cf";
	margin-right: 0.5em;
}

ul.square { /* リスト（■） */
	list-style: none;
	padding-left: 1.5em;
}

ul.square li {
	text-indent: -1.5em;
}

ul.square li:BEFORE {
	content: "\25a0";
	margin-right: 0.5em;
}

.caption { /* テキストサイズ注釈 */
	font-size: 0.88em;
	line-height: 1.4em;
}

.fxs {
	font-size: 0.88em; /* テキストサイズ小 */
	line-height: 1.6em;
}

.fxl {
	font-size: 1.14em; /* テキストサイズ大 */
	line-height: 1.6em;
}

.mt05em { /* margin top 0.5行 */
	margin-top: 0.5em !important;
}

.mt1em { /* margin top 1行 */
	margin-top: 1em !important;
}

.mt2em { /* margin top 2行 */
	margin-top: 2em !important;
}

.rdus { /* 角丸 */
	border-radius: 4px;
}


/* メディアクエリサンプル */
/* ===============================
	device setting
 =============================== */
@media screen and (min-width: 1281px) {
  // 画面幅が1281px以上（PC専用スタイル）
}
@media screen and (max-width: 1280px) {
  // 画面幅が1280px以下（タブレット・スマホ共通スタイル）
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  // 画面幅が768px～1280px（タブレット専用スタイル）
}
@media screen and (max-width: 767px) {
  // 画面幅が767px以下（スマートフォン専用スタイル）
}
@media screen and (max-width: 414px) {
  // 画面幅が414px以下（スマートフォン縦向き専用スタイル）
}

/* 印刷用スタイル */
/* ===============================
	print setting
 =============================== */
@media print {
	.printNl {
		page-break-before: always;
	}
}

明朝体優先の場合のfont-familyは以下。

font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;

レスポンシブデザイン・ブレークポイントの目安一覧

画面表示幅 端末
320px iPhone3～iPhone5系・縦向き時
360px Android系スマートフォン・縦向き時
375px iPhone6・縦向き時
414px iPhone6 Plus・縦向き時
480px iPhone3～iPhone5系・横向き時
640px Android系スマートフォン・横向き時
736px iPhone6 Plus・横向き時
768px iPad系、iPad mini系、iPad Air系・縦向き時
800px Android系タブレット・縦向き時
1024px iPad系、iPad mini系、iPad Air系・横向き時
1280px Android系タブレット・横向き時

jQuery

カプセル化をクセにする。

;(function($) {
	$(function() {
		// alert('読み込みOK！');
	});
})(jQuery);