Webページを作成する時の基本になるHTML5の最小限構成やリセット用CSS、CSS3アニメーションなどのまとめ
Post on:2015年12月22日
Webページ作成のベースになる、HTML5の必要最小限の構成にしたテンプレート、各ブラウザのスタイルを正常化・リセットするスタイルシート、レスポンシブ対応の柔軟なグリッドをつくるスタイルシート、さまざまなCSS3アニメーションを簡単に利用できるスタイルシートを紹介します。

HTML5で作成する時の必要最小限のテンプレート
まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。
ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。
テンプレートはIE9や8以下への最低限の配慮がとられています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!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> |
HTML5 Templateの各コードの詳しい説明は、下記ページに。
スタイルの正常化・リセット

ブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。
normalize.cssの目的は次の通りです。
- ブラウザのスタイルを消去するよりむしろ有用なデフォルトのスタイルを保存します。
- あらゆるHTMLエレメントのスタイルを正常化(Normalize)します。
- バグとブラウザごとの一貫性のなさを修正します。
- 巧妙な改良でユーザビリティを改善します。
- コード内のコメントと詳細なドキュメントで詳しく解説がついています。
normalize.cssの詳しい説明は、下記ページに。
normalize.cssはBootstrapなどのフレームワークにも採用されており、多くのユーザーがいますが、新しいコンセプトを備えたCSSリセットも登場しています。
-
- sanitize.css
- normalize.cssの共同開発者: Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。
- 参考: sanitize.cssの使い方
グリッドをつくるスタイルシート

Flexbox Grid
Flexbox Grid -GitHub
Flexboxの初心者から、簡単に使いたいと考えてるベテランまで、Flexboxの勉強にも実装にも役立つスタイルシート。
企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できます。

FlexboxのサポートはIE11+、それがネックになっている人も多いと思います。FOX CSSは、IE9+にも一行加えるだけで同じHTMLで実装できるCSS/Sassの超軽量フレームワークです。

レイアウトのベースに最適で、グリッドの設計、デバイスごとに異なるレイアウトや表示・非表示など、レスポンシブ対応ページに役立つ機能が揃っています。

chewing-grid.css
chewing-grid.css -GitHub
テキストや画像や動画などをタイル状に配置する、レスポンシブ対応のカード型リストを実装できるCSSのグリッド。Media Queriesは無しで、「chewing」の名の通り表示サイズに合わせてチューイングガムのようにカードとグリッドが伸び縮みします。

CSS Diamond Grid -GitHub
デモページ
画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを作成します。もちろんレスポンシブ対応です。
CSS3アニメーション

Animate.css
Animate.css -GitHub
外部ファイルを加え、classを与えるだけで、フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できます。

リンク、ボタン、ロゴ、SVGなどにさまざまなアニメーションを適用します。

ページのあらゆるDOM要素をぷるぷる、ブルブルとシェイクします。

要素を表示・非表示するさまざまなアニメーションが利用できます。

CSSで3Dを作成し、それをアニメーションで動かすことができます。

ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えます。
※スクリプト併用
sponsors