CSS3 関連情報・総まとめ

Ads
目次
    1. リファレンス / 専門サイト
    2. サンプル
      1. 国内
      2. 海外
      3. ネタ的なサンプル
    3. Webツール
    4. 日本語のチュートリアル / Tips
    5. IEに対応させるライブラリ
    6. ギャラリー / インスピレーション / ポータル
    7. 役立つまとめ記事 / その他

css3の情報がかなり増えてきたので
一旦まとめておきます。基本的にはIE
が非対応なので、実用はまだまだこれ
からという印象でしたが、iPhoneやiPad
の普及や、IEにも対応させることが可能
なライブラリの出現でかなり実用性が
上がったように思います。

そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。

※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。

リファレンス / 専門サイト

まずは基本と教科書になりそうなサイトを抑える

  1. W3C / 公式です。セレクタ一覧
  2. CSS3リファレンス / 日本語のリファレンスサイト
  3. Webkit CSS Properties / Webkit対応プロパティの一覧。iOSも有り
  4. CSS Infos / css1～3の総比較表
  5. Web Browser CSS Support / ブラウザ別のサポート状況。見やすいです
  6. CSS3 Selectors / こちらもブラウザ別サポート状況
  7. Vendor-prefixed CSS Property / ベンダープレフィックスの一覧表
  8. CSS3 Pre-Reference / 国内のリファレンス的サイト
  9. CSS 3 Cheat Sheet (PDF) / チートシート
  10. CSS HappyLife ZERO / css3カテゴリです
  11. 各ブラウザで先行実装しているCSS3プロパティまとめ / 個人的に一番よく見てます
  12. SafariのCSS3拡張 / Safariオンリだけど見やすいので

サンプル

css3でどういう事が出来るのか。css3をリセットするブックマークレットを併用すると便利です。

国内

少ないですが、国内のサンプルはネタ系やチュートリアル込みが多いのでそちらに集まっています。

  1. CSS3のtransitionプロパティでアニメーションを試してみた
  2. css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
  3. css3のtransformの実装サンプル
  4. jsdo.it / おなじみコード共有サイト。css3タグにリンクしています
  5. CSS3 「gradient」と「@font-face」 / css3を駆使した可愛らしいデザイン
  6. CSS3 Demo Sample / 見やすいサンプルが沢山あります

海外

かなり端折りました

  1. Text Depth of Field Effect / テキストシャドウと変形プロパティでクールな視差効果を表現
  2. BonBon / css3のみで可愛い3Dボタン
  3. CSS3 Dropdown Menu / js無しで美しいドロップダウンメニュー
  4. Minimalistic Navigation / フライアウトするミニマルメニュー
  5. Radioactive Buttons / 定期的にボタンを光らせる
  6. CSS3 Buttons / 美しいボタンをcss3で
  7. CSS3 Click Chart / サンプルを一覧で見れる
  8. Pure CSS3 Horizontal Accordion / cssのみでアコーディオンコンテンツ実装
  9. CSS Gradient Text / 効果的なテキストエフェクトのサンプル集
  10. 404 / css3を使ったユニークな404ページ
  11. Windows 7 start menu / Win7のようなメニューをcss3で実装
  12. Fancy Image Hover / css3を使ったマウスオーバーエフェクト
  13. Polaroids / ポラロイド風ギャラリー
  14. speech bubbles / cssで噴出しいろいろ
  15. Animated button / アニメーションするかわいい3Dボタン
  16. 3D text / リアルな3Dテキストをcssで表現
  17. Animated Bubble Buttons / 背景がアニメーションするボタン
  18. Using CSS3 Transitions / transitionの分かりやすいデモ集
  19. CSS drop-shadows / cssで作る効果的なドロップシャドウ
  20. CSS3 3d bar chart / アニメーションするバーチャート
  21. :toggle / css3でtoggle処理
  22. Animated CSS3 helix / 螺旋状にアニメーションしながら反転
  23. 100% CSS3 Lightbox / CSS3のみでLightboxを実現
  24. Pure CSS3 Page Flip Effect / ページめくりエフェクト

ネタ的なサンプル

実用的かどうかはさておき、ワクワクするようなユニークなサンプル

  1. Multiple 3D Cubes / 動くハコにテキスト
  2. Opera logo / Operaのロゴをcssのみで
  3. CSS3- Social media icons / 画像無しでソーシャルメディアアイコン
  4. Pure CSS Icons / cssのみでアイコンいろいろ
  5. Ipod with CSS3 / cssでipodを再現
  6. Internet Explorer® Pure CSS / Safariでのみ上手く表示されるIEアイコン
  7. Curtis CSS Typeface / cssで書かれた文字
  8. CSS3 checkbox / jsも画像も一切使用せず
  9. CSS3 Sideways Google / 傾いたGoogle
  10. CSS3 Ads Versus Flash Ads / Flash広告と同様の動きをcss3で再現
  11. Andrew Hoyer / 歩く人をcss3アニメーションで実現。凄い
  12. wonder webkit / transformationを利用したユニークなサンプル
  13. Ajax Style Loading Animation / Ajaxのローディングを画像を使わずでcssで再現
  14. AT-AT Walker / 画像をアニメーションさせるサンプル
  15. CSS3 ドラえもん / css3でドラえもんを実現
  16. iPhone CSS3 / css3でiPhoneの外観を再現
  17. Peculiar / cssで実装されたアイコン集
  18. 画像を使わずにCSS3でパンダを描いてみた / ブサかわいいｗ
  19. Super Mario Icon / 回転するマリオ
  20. アンパンマン / マウスオーバーで新しい顔を投げる
  21. Pure CSS Twitter ‘Fail Whale’ / クジラかわいい

Webツール

実際にcss3に触れて学べます

  1. CSS3プロパティジェネレーター / 貴重な国内のジェネレーター
  2. MOTHER EFFING TEXT-SHADOW / text-shadowで3Ｄテキストを作る
  3. CSS3 Please! / ブラウザで体感し、インタラクティブに学習
  4. CSS3 Playground / 角丸やシャドウ、回転などをその場で実装
  5. CSS Border Radius / ブロック要素の角丸を生成
  6. CSS3.0 Maker / インタラクティブ生成。見やすいです
  7. CSS Corners / グラデ、角丸を生成
  8. @FONT-FACE GENERATOR / Webfontを生成
  9. CSS3 Gradient Generator / グラデーションを生成します
  10. CSS3 Sandbox / シャドウ、グラデ、変形などをインタラクティブ生成
  11. Button Maker / css3のボタンを生成。ツールごとDLも出来ます
  12. CSS3 Generator / 様々なプロパティに対応したオンラインジェネレーター
  13. border-image-generator / ボーダーイメージを生成
  14. multi-colonnes en CSS3 / column-countプロパティを生成
  15. We Love Buttons / class名を変えるだけでデザインを変更出来る着せ替えcss
  16. CSS3 Generator / Life is beautifulさん作

日本語のチュートリアル / Tips

チュートリアル / Tipsは一応日本語のみにしておきました

  1. IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット / No jsで
  2. もう画像は要らない！CSS3で作る申し込みボタン / IEにも配慮
  3. box-shadowを極めて「Mac風UI」を作る！
  4. 地獄のミサワがCSS3の勉強に最適と話題に
  5. CSS3「ボックスレイアウト」についてまとめてみる
  6. CSS3で書いて、スクリーンショットを取って、ボタンにする
  7. 今日からCSS3アニメーションを使えるようになるチュートリアル
  8. CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ
  9. HTML5/CSS3で作るスマートフォンサイトの基本
  10. jQuery.transitionAnimate.js / スマホ向けjQuery。読めばスゴさが判るはず
  11. css3_setwithprefix / Dw用のプレフィックス挿入支援
  12. デザインに使える21のCSSトリック / css3を使った効果的なエフェクト
  13. CSS3『メディアクエリ』を使ってiPhone、iPadでの表示にもばっちり対応させる
  14. CSS-EBLOG / CSS-EBLOGさんのcss3カテゴリです
  15. CSS Lecture / CSS Lectureさんのcss3カテゴリです
  16. CSS3大接近 / gihyo.jpの特集
  17. 実例から学ぶCSS3の効果的な使い方
  18. CSS3の効果的な使い方と陥りやすいワナ
  19. リッチっぽいiPhone向けサイトを作るためのCSS3アニメーション

IEに対応させるライブラリ

IEにも対応させたいなら外せないですね。決定打はまだ無い印象です・・

  1. Selectivizr / 擬似クラスをIEでも使えるようにする
  2. cssSandpaper / transformやbox-shadowをIEにも対応させる。独自セレクタ使用
  3. CSS3 PIE / 角丸やボックスシャドウをIEで使用可能にするビヘイビア
  4. uuAltCSS.js / IEにいろいろ対応させられる。position:fixedなども
  5. IE-CSS3 / ドロップシャドウや角丸を対応させるビヘイビア
  6. IE7~9.js / いろいろ対応出来る
  7. Modernizr / 対応というと語弊がありますが、状況を調べるライブラリです
  8. Pina / 1行で角丸をクロスブラウザ対応にするライブラリ
  9. Transformie / Transformを対応させるjQueryプラグイン

ギャラリー / インスピレーション / ポータル

多くはないですが。

  1. Ars CSS3 Gallery / css3専門ギャラリー
  2. CSS3 Design Contest Results / css3のデザインコンテンテスト。DLも可能
  3. CSS3 Watch / css3情報をTumblrで収集
  4. CSS3.Info / CSS3専門サイト
  5. CSS3.com / リファレンス・チュートリアルサイト

役立つまとめ記事 / その他

その他

  1. CSS3 Solutions for Internet Explorer / IEに対応させる方法まとめ
  2. IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット
  3. 70 Must See CSS3 Tips, Tricks And Tutorials / チュートリアルまとめ
  4. CSS3 Cookbook / css3の実用的な使い方
  5. ここまでできる！CSS3を使ったチュートリアルまとめ
  6. 35 Best CSS3 @font-face Kits / @font-faceで使えるフォント集
  7. CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開
  8. 31 CSS Code Snippets To Make You A Better Coder / スニペット集。css3も結構有り

もしかしたらあとで何か追加する可能性も。需要があればHTML5やjQueryとの併用サンプルも含めるかもです。

ホーム
トップ
タイトルとURLをコピーしました