HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか – かちびと.net

あまりに情報量が多くて混乱してきたので
自分用にまとめ。リファレンスとか、ちゃんと
実践で使えるツールを自分なりに厳選して
まとめておきます。どうも、あっちこっちで
あれが便利とかこれが便利だとか言われる
と訳が分からなくなるのでそろそろ絞らない
とですね。

というわけでお遊びではなく実践に役立ってる基本的なリファレンスとか助けてくれるツールのメモなので目新しいものはありません。完全に自分用のまとめです。個人的には基礎用のサイトと、実践向けのツールやライブラリだけあればいいという感じです。

尚、css3/html5に関する情報だけを求めている&特に情報取得に急いでないならdotHTML5というサイト1つで事足りるかと思います。

※W3Cは割愛でいいですよね

HTML5

チートシートとかリファレンスだけで基本的にはいい感じですかね・・

HTML5 タグリファレンス

マークアップもままならないほど慣れてないので基本的にここ頼りですが、自分用のチートシートを作成したほうが効率よさそうです。

HTML5 タグリファレンス

HTML5 Canvas Cheat Sheet


こちらはcanvasのチートシート。見やすいので助かります。HTMLで出来てるのでコピペできr

HTML5 Canvas Cheat Sheet

html5.js

IE9以下にもhtml5を適応させるライブラリです。基本的には必ず入れます。入れる際は以下のようにCDNを読みこめばOK牧場です。

1 <!--[if lt IE 9]>
2   <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" ></script>
3 <![endif]-->

html5.js

Initializr 2

雛形をサクッと作ってくれるWebサービスです。簡単なマークアップの際はこちらにお世話になる感じで。

Initializr 2

HTML5 Boilerplate

こちらも雛形。css3とjsもセットで。モバイル版もあるんですよね・・

HTML5 Boilerplate

Outliner.js

sectionアウトラインを可視化するブックマークレットです。Webデザインレシピさんで紹介されていたHTML 5 Outlinerと併用すると良さそうですね。

Outliner.js / HTML 5 Outliner

HTML5 Validator Bookmarklet

バリデーションをサクッと行えるブックマークレット。

HTML5 Validator Bookmarklet

Modernizr

ブラウザの対応状況を解析するチェッカーです。なんだか面倒くさそうなんですが最近良く見かけます・・

Modernizr

jsdo.it

jsdo.itのhtml5タグです。かなりサンプル量が増えたのでありがたく参考にさせてもらいましょう。

jsdo.it – tag:html5

CSS3


メニューとかボタンジェネレーター的なものはあまり使わないのでここには1つも無いです。css3自体、まだ実践には使いにくいですしね・・あと、スマフォに関する情報を個人的には求めていますのでそんな感じです。

CSS3リファレンス

言わずもがな、リファレンス。

CSS3リファレンス

CSS3 Click Chart

サンプルが実装されてる便利なチートシート。クリックすればプロパティとか教えてくれる仕組み。便利ですなーこれは。もっと早く知りたかった。

CSS3 Click Chart

uuAltCSS.js

非対応ブラウザでも使えるようにするライブラリ。selectivizrっていうのもあります。どうしてもって時は。

uuAltCSS.js / selectivizr

WebKit CSS3 Cheat Sheet

Sencha提供のWebkit用css3チート・・・iOS用ですかね。

WebKit CSS3 Cheat Sheet※PDFです

スマートフォン(iPhone, Android)のバグまとめ

経験者の語るバグ一覧。Androidもいろいろあるんですね・・・

スマートフォン(iPhone, Android)のバグまとめ

一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ

jsdo.itのサンプルまとめ。たすかりますー

一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

個人的にブームのMedia Queriesに関してよくまとめてくれています。しかし色々と詳しい方ですね・・・

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

responsivepx

レスポンシブなWebデザインの設計でリアルタイプに確認できるありがたいツールを日本語にしてサーバーに置きました。

responsivepx

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中