on:2015年12月22日sponsorsWebページ作成のベースになる、HTML5の必要最小限の構成にしたテンプレート、各ブラウザのスタイルを正常化・リセットするスタイルシート、レスポンシブ対応の柔軟なグリッドをつくるスタイルシート、さまざまなCSS3アニメーションを簡単に利用できるスタイルシートを紹介します。HTML5で作成する時の必要最小限のテンプレートスタイルの正常化・リセットグリッドをつくるスタイルシートCSS3アニメーションHTML5で作成する時の必要最小限のテンプレートまずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。テンプレートはIE9や8以下への最低限の配慮がとられています。Templateの各コードの詳しい説明は、下記ページに。HTML5でWebページを作成する時用の必要最小限をまとめたシンプルなテンプレート(IE8以下も配慮)スタイルの正常化・リセットnormalize.cssブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。normalize.cssの目的は次の通りです。ブラウザのスタイルを消去するよりむしろ有用なデフォルトのスタイルを保存します。あらゆるHTMLエレメントのスタイルを正常化(Normalize)します。バグとブラウザごとの一貫性のなさを修正します。巧妙な改良でユーザビリティを改善します。コード内のコメントと詳細なドキュメントで詳しく解説がついています。normalize.cssの詳しい説明は、下記ページに。normalize.cssで使用されている各スタイルがどのように機能しているか解説normalize.cssはBootstrapなどのフレームワークにも採用されており、多くのユーザーがいますが、新しいコンセプトを備えたCSSリセットも登場しています。Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。sanitize.cssの使い方Marx単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれたスタイルシート。-GitHubFlexboxの初心者から、簡単に使いたいと考えてるベテランまで、Flexboxの勉強にも実装にも役立つスタイルシート。企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できます。-GitHubFlexboxのサポートはIE11+、それがネックになっている人も多いと思います。CSSは、IE9+にも一行加えるだけで同じHTMLで実装できるCSS/Sassの超軽量フレームワークです。-GitHubレイアウトのベースに最適で、グリッドの設計、デバイスごとに異なるレイアウトや表示・非表示など、レスポンシブ対応ページに役立つ機能が揃っています。-GitHubテキストや画像や動画などをタイル状に配置する、レスポンシブ対応のカード型リストを実装できるCSSのグリッド。Queriesは無しで、「chewing」の名の通り表示サイズに合わせてチューイングガムのようにカードとグリッドが伸び縮みします。-GitHubデモページ画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを作成します。レスポンシブ対応です。-GitHub外部ファイルを加え、classを与えるだけで、フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できます。-GitHubリンク、ボタン、ロゴ、SVGなどにさまざまなアニメーションを適用します。-GitHubページのあらゆるDOM要素をぷるぷる、ブルブルとシェイクします。-GitHub要素を表示・非表示するさまざまなアニメーションが利用できます。EditorCSSで3Dを作成し、それをアニメーションで動かすことができます。-GitHubページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えます。