Webページを作成する時の基本になるHTML5の最小限構成やリセット用CSS、CSS3アニメーションなどのまとめ

Post on:2015年12月22日

HTML5で作成する時の必要最小限のテンプレート

まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。

A Generic HTML5 Template -GitHub

ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。

テンプレートはIE9や8以下への最低限の配慮がとられています。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="">
</head>
<body>

<!-- コンテンツを配置 -->

<!-- SCRIPTS -->
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

HTML5 Templateの各コードの詳しい説明は、下記ページに。

HTML5でWebページを作成する時用の必要最小限をまとめたシンプルなテンプレート（IE8以下も配慮）

スタイルの正常化・リセット

normalize.css

ブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。

normalize.cssの目的は次の通りです。

ブラウザのスタイルを消去するよりむしろ有用なデフォルトのスタイルを保存します。
あらゆるHTMLエレメントのスタイルを正常化（Normalize）します。
バグとブラウザごとの一貫性のなさを修正します。
巧妙な改良でユーザビリティを改善します。
コード内のコメントと詳細なドキュメントで詳しく解説がついています。

normalize.cssの詳しい説明は、下記ページに。

normalize.cssで使用されている各スタイルがどのように機能しているか解説

normalize.cssはBootstrapなどのフレームワークにも採用されており、多くのユーザーがいますが、新しいコンセプトを備えたCSSリセットも登場しています。

sanitize.css

normalize.cssの共同開発者: Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。

参考: sanitize.cssの使い方
Marx

単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれたスタイルシート。

参考: Marxの使い方