• かちびと.net

    HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとかのご紹介。メモ的な記事ですけど多少でも参考になれば幸いです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

尚、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牧場です。

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![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

書籍

良かった奴とか良さそうなのとか。Amazonに飛びます。

HTML5&CSS3実践入門

HTML5&CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers) HTML5&CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン,高橋 登史朗,株式会社 クイープ

インプレスジャパン
売り上げランキング : 37176

Amazonで詳しく見る

スマートフォンサイト制作入門

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL) iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)
たにぐちまこと

アスキー・メディアワークス
売り上げランキング : 2250

Amazonで詳しく見る

入門 HTML5

入門 HTML5 入門 HTML5
Mark Pilgrim,矢倉 眞隆(監訳),水原 文

オライリージャパン
売り上げランキング : 7657

Amazonで詳しく見る

以上まとめでした。時間がたてば変わると思いますが今はこんな感じです。

URL :
TRB :

Comments & Trackbacks (9)

  1. 高橋 のり

    こんにちは!
    こんなに大きく紹介していただいてありがとうございます :D
    Media Queries 楽しいですねー w
    最近ではアニメーションしながら変化していくのが流行ってるみたいで …
    技術的にもいろいろ勉強しないと、あっという間に置いてかれそうです X(

    • シロ

      こんにちは :)

      いえいえー。楽しいですねw僕もすっかりはまってしまいました・・
      アニメーションの変化も見かけますねwでもあれ意味あるんですかね・・
      僕はもう遅れてもいいやみたいな気になってきましたw

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services