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

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

Webページ作成のベースになるテンプレートのまとめ

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

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

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

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

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

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

サイトのキャプチャ

normalize.css

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

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

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

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

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

  • sanitize.css
    normalize.cssの共同開発者: Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。
    参考: sanitize.cssの使い方
  • Marx
    単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれたスタイルシート。
    参考: Marxの使い方

グリッドをつくるスタイルシート

サイトのキャプチャ

Flexbox Grid
Flexbox Grid -GitHub

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

サイトのキャプチャ

FOX CSS
FOX CSS -GitHub

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

サイトのキャプチャ

Ocssipital
Ocssipital -GitHub

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

サイトのキャプチャ

chewing-grid.css
chewing-grid.css -GitHub

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

サイトのキャプチャ

CSS Diamond Grid -GitHub
デモページ

画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを作成します。もちろんレスポンシブ対応です。

CSS3アニメーション

サイトのキャプチャ

Animate.css
Animate.css -GitHub

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

サイトのキャプチャ

Hover.css
Hover.css -GitHub

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

サイトのキャプチャ

CSSShake
CSSShake -GitHub

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

サイトのキャプチャ

magic
magic -GitHub

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

サイトのキャプチャ

Tridiv
Tridiv Editor

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

サイトのキャプチャ

Animsition
Animsition -GitHub

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

top of page

©2017 coliss