Web制作を行う全ての方へ

HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識~活用まで

現状HTML5とCSS3を利用したサイトの構築は自分の仕事上では出てきそうにないのですが、そうは言っても何も情報を収集しないわけにも行かないのでブックマークは当然しています。しかし、ただ単に貯めてるだけだといざという時活用出来ないので、一度ブログに書き留めておこうと思います。

html5

現状深く調べておらずリファレンスやタグ辞典的なものを収集しています。最近友人のクロ(@CROO1379)が色々情報を収集してサイトを構築しており、リファレンス的な意味ではかなり拾えそうな感じになっています。

html5.jp
html5.jp
html5に関する情報をかなり早い段階で日本語化したと思われる(個人的な感想)サイト。チュートリアルからライブラリまで幅広い情報が集約されています。

html5独学まとめ
html5 独学まとめ
友人のクロ(@CROO1379)が個人的にhtml5に関する情報を収取しているサイト。html5に関するキーワードからそれに関する情報をgoogle検索とヒモ付たデータベース的な仕組みになっています。

HTML5 の基礎: 第 1 回 最初の一歩
HTML5 の基礎: 第 1 回 最初の一歩
html5に関する基礎知識を記述したIBMの中の記事。かなり注目された記事です。

HTML5リファレンス
HTML5リファレンス
htmlを触るようになってからかなりお世話になっているサイトHTMLリファレンス。その中にあるhtml5のリファレンスです。

HTML5Validator
HTML5 Validator
html5のValidatorをチェック出来るサイト

HTML5新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5新規でサイトを作るのに使えそうなの一式。Ver 1
ひらっちさん(@hira)の運営するCSS HappyLifeにポストされている記事。HTML5版の新規でサイトを作るのに使えそうな一式です。

HTML5 下位ブラウザへの対応
HTML5 下位ブラウザへの対応
シャンディ・ガフを飲みながら」というブログにポストされているhtml5とcssに関する記事。html5をIE6~8に対応させる為のHTML5.jsやCSS3の擬似セレクタに対応させる為のie-css3.jsに関する事を記述しています。

HTML5 enabling script
HTML5 enabling script
上記ブログ内で記述されているhtml5.jsに関する記事

HTML5.jsの中身を見てみよう
HTML5.jsの中身を見てみよう
かみやんさん(@kamiyam)が作成したhtml5.jsに関するスライド。

CSS3

CSS3に関してはすぐに活用できるリファレンスやジェネレーター、対応一覧表などを主に収集しています。

CSS-EBLOG カテゴリー:CSS3関連
CSS-EBLOG カテゴリー:CSS3関連
CSS-EBLOGというブログのCSS3に関するカテゴリ。

CSS3リファレンス
CSS3リファレンス
上記でも紹介したリファレンスサイトのCSS3のリファレンス。

CSS3プロパティ
CSS3プロパティ
html5とCSS3の各ブラウザの対応表。

CSS3プロパティ
CSS3プロパティ
html5とCSS3の各ブラウザの対応表。

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
コリスさんのIE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介した記事。

IE5~8をCCS3の疑似セレクタ対応にするスクリプト - ie-css3.js
IE5~8をCCS3の疑似セレクタ対応にするスクリプト – ie-css3.js
コリスさんのCSS3に対応していないIE5/6/7/8をCSS3の擬似セレクタに対応させるスクリプトを紹介

DOMAssistant
DOMAssistant
上記コリスさんの記事で使用した「ie-css3.js」を利用する際に一緒に記述する必要のあるDOMAssistant

DOMAssistant
DOM操作ライブラリ「DOMAssistant 2.6」リリース
上記DOMAssistant 2.6に関する記事

CSSジェネレーター

CSS3を活用する際に便利なジェネレーター

CSS3プロパティジェネレーター
CSS3プロパティジェネレーター
CSS-EBLOGのジェネレーター。日本語なので非常に分かりやすくて使いやすいです。

Ultimate CSS Gradient Generator
Ultimate CSS Gradient Generator
CSSのグラデーションを作成できるジェネレーター。

Gradient Direction
Gradient Direction
こちらもCSSのグラデーションを作成できるジェネレーター。

CSS3 Playground by Mike Plate
CSS3 Playground by Mike Plate
CSSによる様々な効果をその場で確認しながら作成できるジェネレーター。

  • Radius
  • TextShadow
  • Transforms
  • Columns
  • GradientBackground
  • BorderAndOutline
  • Background
  • ContentAndText

CSS3.0 MAKER
CSS3.0 MAKER
こちらもCSSによる様々な効果をその場で確認しながら作成できるジェネレーター。

  • BorderRadius
  • Gradient
  • Transform
  • Animation
  • Transition
  • RGBA
  • TextShadow
  • BoxShadow
  • TextRotation
  • @fontFace

CSS Layout Generator
CSS Layout Generator
かなりの要素を作成できるジェネレーター。カラムやフッターなど、各要素を含めるか否かという設計まで出来ます。かなり便利。

他ブログでのまとめ

html5、css3の情報はかなり出ており、各ブログ運営者の方々もすでに情報をまとめられています。私が今回ポストしたものもすでに他のブログで紹介されているものがほとんどですが、自分のブログに纏めると、どういうものがあったかを整理できるので自分用に活用するのにかなり最適化されます。
ですが、折角ですので他の方のブログも掲載しておいて、自分のブログで保管できないものも、いざ使うときに引っ張れるようリンクしておきます。

CSS HappyLife CSS3アーカイブス
CSS HappyLife CSS3アーカイブス

Webpark
Webpark 基礎から理解するためのCSS3に関するサイトのまとめ

コリス
コリス CSS3で何ができるの?という時にみておきたいサイト集

かちびと
かちびと CSS3 関連情報・総まとめ

ホームページを作る人のネタ帳
ホームページを作る人のネタ帳 色々なCSSジェネレータで出来るあれこれまとめ

45 Online Generators For Designers And Developers To Do The Job Faster!
1WD.CO オンラインジェネレーターまとめ 45個

Ad



Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です