タグ別アーカイブ: CSS3

jQueryのanimateで自由にアニメーションできるようになろう | webOpixel

jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。

動かす前の準備

jQueryの前に動かす要素をhtml&cssで作成しておきましょう。

html

1 <div id="box"></div>

css

1 #box {
2     width: 100px;
3     height: 100px;
4     background: #3399FF;
5 }

jQueryコードを書くときの基本的な形は次のようになります。

javascript

1 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2 <script type="text/javascript">
3 $(function() {
4     //ここにjQueryのコードを書く
5 });
6 </script>

以降は「ここにjQueryのコードを書く」という部分にコードを書いていきます。

「animate」メソッドを使用した単純なアニメーション

最初はページが表示されたら右に「500px」スライドさせるだけのアニメーションです。

「animate」メソッドはこのように使います。

「animate」の基本的な書き方

ここでは作成した要素(#box)を右(margin-left)へ500xpスライドさせたいのでしたね。

これを先ほどの図にあてはめるとこうなります。

javascript

1 $('#box').animate({
2     'marginLeft': '500px'
3 });

これで実行するとスライドしているはずです。簡単ですよね。

ちなみにcssでプロパティは「margin-left」と「-(ハイフン)」で句切られていますが、「animate」メソッドでは単語間の最初の文字を大文字にするキャメルケースという書式で記述します。

なので「margin-left」は「marginLeft」と書きます。

ここでは「marginLeft」を使用しましたが「fontSize」でも「width」でも数値で指定するようなパラメータならほとんどのものはアニメーションできます。

親要素を基点とする

posirionの設定がないと要素を配置した位置を基点としてアニメーションされるので、複数の要素を操作したいときは不便なときがあります。

そこで、jQueryという話ではないですが、複数の要素を同じ基点で動かす方法をご紹介します。

boxを2つにしたら「div」で囲みます。

html

1 <div id="wrap">
2 <div id="box1"></div>
3 <div id="box2"></div>
4 </div>

親にを「position: relative」にして、子は「position: absolute」を指定しましょう。

css

01 #wrap {
02     position: relative;
03 }
04 #box2,
05 #box1 {
06     position: absolute;
07     width: 100px;
08     height: 100px;
09     background: #5EA9F4;
10 }

これで「#wrap」を基点として、「left」や「top」で移動できるようになります。

javascript

1 $('#box1').animate({
2     'left': '500px'
3 });
4 $('#box2').animate({
5     'left': '300px',
6     'top': '200px'
7 });

斜めに移動させる

斜めに移動させる

横にスライドさせるだけなら「left」を動かすだけでしたが、斜め下に移動する場合はどうしたら良いでしょうか?

はい。「left」と「top」を同時に動かせば良いですよね。

やり方は簡単ですプロパティと数値を1セットとして「,」で繋げていくだけです。

javascript

1 $('#box1').animate({
2     'left': '500px',
3     'top': '300px'
4 });

3つでも4つでもアニメーションさせたいパラメータをどんどん追加できます。

連続で移動させる

連続で移動させる

2つ指定すれば斜めに移動できることはわかったのですが、たとえば右に移動してから下に移動するといった処理はどうしたらいいでしょうか。

これはjQueryのメソッドチェーンという書き方をすれば簡単です。

javascript

1 $('#box1')
2     .animate({'left':'500px'})
3     .animate({'top':'500px'})
4     .animate({'left':'0px'})
5     .animate({'top':'0px'});

このようにすれば上から順番にアニメーションが実行されます。

速度を調節する

「animate」メソッドは第2引数以降でオプションの設定をすることができます。

アニメーション速度を変更するには、第2引数に「slow」「normal」「fast」の文字列を指定するか、直接数値で指定します。

javascript

1 $('#box1').animate({
2     'left': '500px'
3 }, 1500);

オプションは次のように記述することもできます。

javascript

1 $('#box1').animate({
2     'left': '500px'
3 },{
4     'duration': 1500
5 });

動きに変化をつける(イージングの設定)

そのままだと一定の動きしかしないのでつまらないですが、イージングの設定をすれば「徐々に速くなる」などアニメーションに変化をつけることができます。

標準では「linear」と「swing」の2種類しかありませんが、「jQuery Easing Plugin」などを導入することでバリエーションが増えます。

javascript

1 $('#box1').animate({
2     'left': '500px'
3 },{
4     'duration': 600,
5     'easing': 'linear'
6 });

アニメーションが終わったあとに何かする

アニメーションが終了したら何か処理を実行したいといったケースはよくあります。

そんなときは「complete」オプションに関数を設定してあげます。

javascript

1 $('#box1').animate({
2     'left': '500px'
3 },{
4     'duration': 600,
5     'complete': function(){
6         alert('終わりました');
7     }
8 });

以上です。まだオプションなどあったりしますが、これだけでもいろいろできるのではないのかと思います。

参考サイト Effects/API/jQuery

フローティングメニューの使い方(スクロールするメニュー) : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~

今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。
あまり使う機会はありませんが、覚えておくといざというときに便利です。

それでは早速使い方のご紹介

必要なデータを揃える

まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。

ここではファイル名を下記の通り保存しました。

  • jquery.js
  • jquery-ui.js
  • jquery.easing.js
  • jquery.scrollfollow.js

ディレクトリはこのようになりました( jsフォルダの中にダウンロードした jsファイルが全て入っています)。

HTMLからjsデータを読み込む

フローティングメニューを使用するHTMLファイルから先ほどダウンロードした jsファイルを読み込みます。
{path}の部分はHTMLファイルからのパスにしてください。

<script type="text/javascript" src="{path}/jquery.js"></script><script type="text/javascript" src="{path}/jquery-ui.js"></script><script type="text/javascript" src="{path}/jquery.easing.js"></script><script type="text/javascript" src="{path}/jquery.scrollfollow.js"></script><script type="text/javascript">

次にフロートさせる要素のIDとオプションの設定をします。ここでは #sideBar をフロートさせる要素のIDとして指定しています。このID指定を間違えると動かないので気をつけましょう

<script type="text/javascript">$( document ).ready( function (){        $('#sideBar').scrollFollow({});});//オプション$( document ).ready( function () {        $( '#sideBar' ).scrollFollow( {                //アニメーションの速度の設定。0 にするとアニメーションなしになります。                speed: 500,                //ブラウザの領域とフロート要素との余白。0にするとぴったりくっつきます。                offset: 0        } );} );</script>

最後に、フロートさせる要素に position: relative; か position: absolute; を指定します。
これで完了です。
◆サンプル
▼HTMLデータのダウンロード

jsファイルは再配布すると怒られちゃうかもしれませんので、自力でダウンロードしてください・・・!

—————

ブラウザ側の実装が不十分な position: fixed; の代わりに使うことでデザインの幅も広がりそうですね。

画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) – かちびと.net

画像にエフェクトをかけて拡大表示
したり、スライドを作ったり、ツール
チップで表示したり、というような
画像を使用したjQueryプラグイン
が沢山あるのと、探してる方が直ぐ
に見つけられるように、という事で
リンク集を作りました。

という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。

結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。

リンクにマウス乗せればキャプチャが出ます。

    Lightbox

    Lightbox風に画像を表現できるjQueryいろいろ

  1. Lightbox2 / ベーシックなタイプ。グループ化可能
  2. colorbox / 多数のエフェクトが実装可能でグループ化も出来る
  3. FancyBox / ロードとオーバーレイが素敵なLightbox
  4. prettyPhoto / 太枠と角丸のLightboxでタイトルは枠外に付ける
  5. ThickBox / 画像以外にテキストでも出来る。グループ化可能
  6. jQuery lightBox plugin / アニメーションが可愛い。グループ可能
  7. Slimbox / これもアニメーションとオーバーレイが素敵
  8. Facebox / Facebookライクなやつ。テキストとかも対応
  9. NyroModal / シンプルで多機能。アニメーションが素敵
  10. Pirobox / インターフェースが素敵。グループにするとより素敵です
  11. FancyZoom meet-jquery / スムーズに拡大縮小します。オーバーレイは無し
  12. imgBox / オーバーレイの有無を選択できる
  13. IMAGEBOX / アニメーションかわいいです
  14. PICBOX / ダイナミックに表示。画像もドラッグで移動できます
  15. CeeBox / フレームなどにも対応した多機能ライブラリ
  16. TopUp / 動画やFlaにも対応した多機能Lightbox
  17. NotesForLightBox / ベーシックなやつ。オーバーレイにアニメは無い
  18. YoxView / 拡大アニメーションの素敵なLightbox
  19. Fancy Zoom / 人気のLightbox。アニメーションが好みです
  20. Image Zoom / 拡大アニメーションがスピーディー
  21. ZOOMIMAGE / スムーズに拡大します。グループ可
  22. Sexy LightBox / 上からストーンと落ちてくる
  23. Image Magnify / シンプルで軽量なLightbox
  24. SuperBox! / オーバーレイが独特
  25. スライド / ギャラリー

    スライド、ギャラリーやカルーセルなどなど

    1. ベーシック

  26. slideViewer / ツールチップも実装するスライダー
  27. jFlow / ベーシックなスライダー。キャプション付
  28. jQuery.flickrGallery / ベーシックにクリックで画像を表示させるギャラリー
  29. Photo Slider / サムネイルが可愛いギャラリー
  30. s3Slider / 自動で変わっていくギャラリー。キャプションが素敵
  31. jqGalScroll / エフェクトの無い、シンプルなギャラリー
  32. Dynamic Image Gallery / サムネイル付きのシンプルギャラリー
  33. GalleryView / サムネの大きさも選べるギャラリー
  34. AD Gallery / スピード感のあるスライドのギャラリー
  35. Moving Boxes / 画像とキャプションが拡大しながら切り替え
  36. slideViewerPro / キャプション、サムネ付きのベーシックスライダー
  37. Pikachoose / フェードエフェクトのギャラリー、サムネ付
  38. CrossSlide / フェードのみのシンプルギャラリー
  39. Apple-style Slideshow Gallery / Appleライクなクールスライダー
  40. jqFancyTransitions / ブラインドエフェクトがクールなギャラリー
  41. Nivo Slider / いくつかのエフェクトが使えるスライド
  42. A Simple jQuery Slideshow / フェードのみのシンプルなスライド
  43. Image Strip / ベーシックなコンパクトギャラリー
  44. jQuery Blinds / スピーディーなブライドエフェクトのシンプルなギャラリー
  45. BBC Radio 1 Zoom Tabs / オンマウスでメニューが出てくるベーシックスライダー
  46. jquery.showcase / フェードするギャラリー。マウスを乗せるとキャプション
  47. jQuery slideView / 縦にスライドするシンプルスライダー
  48. 2. ユニーク

  49. SPACEGALLERY / 奥から順に表示されるユニークなギャラリー
  50. jQuery Cycle Plugin / 省スペースで複数エフェクトのあるミニギャラリー
  51. Slider Gallery / ドラッグで移動するスライダー
  52. jQuery.popeye / 省スペースのギャラリー
  53. supersized / 画面いっぱいに画像を使うギャラリー。リンクも貼れる
  54. Beautiful jQuery slide / キャプション表示がクールなスライドギャラリー
  55. morphing gallery / 画像の大きさに合わせられたユニークなギャラリー
  56. ImageFlow / ドラッグで動かし、画像に反射や拡大も加えてある
  57. Sliding Image Gallery / 次の画像をクリックするとその次のが出てくる
  58. Animate Panning Slideshow / 斜めにも移動するギャラリー
  59. Looped Slider / 戻らずにループするスライドギャラリー
  60. Mosaic Slideshow / 升目で切り替わるユニークなスライド
  61. Zoomer Gallery / オンマウスで拡大、キャプションがアニメーションするギャラリー
  62. Smooth Div Scroll / マウスを乗せるor自動で動くスライド
  63. Simple Controls Gallery / オンマウスでナビが出てくるコンパクトギャラリー
  64. z-index gallery / 1枚1枚後ろに行くユニークなギャラリー
  65. Image Cube / ボックスで表現したユニークなギャラリー
  66. Micro Image Gallery / コンパクトながらサムネ表示にも切り替えられるギャラリー
  67. background image slideshow / 背景と同時にキャプションも変えるダイナミックスライダー
  68. Flip! / 画像がひっくり返るスライド
  69. Switch Display / グリッドと縦並びに変更可能なギャラリー
  70. jFancyTile / タイル状に切り替わるギャラリー
  71. Gallery Slider Plugin / 全画面を使ったダイナミックギャラリー
  72. 3. コンテンツごとスライド

  73. Easy Image or Content Slider / 縦にも出来るしテキストも出来るコンテンツスライダー
  74. horinaja / ベーシックなコンテンツスライダー
  75. loopedSlider / テキストにも対応したコンテンツスライダー
  76. Slick and Accessible Slideshow / テキストも対応のベーシックなコンテンツスライダー
  77. Making a Content Slider with jQuery UI / ドラッグで動かすコンテンツスライダー
  78. Content Slider with jQuery / アニメーションが独特なコンテンツスライダー
  79. EOGallery / アニメーションが面白いコンテンツスライダー
  80. dualSlider / 動画にも対応したコンテンツスライダー
  81. simplesli.de / 見た目の素敵なコンテンツスライダー
  82. 4. 多機能

  83. Galleria / 超多機能なスライドギャラリー。おすすめ
  84. Galleriffic / 様々な形を選べる高性能ギャラリー
  85. JQUERY MULTIMEDIA PORTFOLIO / ドラッグで動かすタイプ。動画にも対応
  86. FeaturedContentSlider / サムネ、キャプションも付いたコンパクトギャラリー
  87. Start/Stop Slider / テキストと画像がクロススライド。ストップ機能付
  88. AnythingSlider / 高機能で人気のスライダー
  89. COIN SLIDER / エフェクトが多数あるギャラリー、キャプション付
  90. jQuery.slideShow({}); / 色々なタイプのある多機能ギャラリー
  91. aviaslider / エフェクトが豊富なシンプルギャラリー
  92. カルーセル

  93. prettyGallery / テキストにも対応したカルーセル
  94. jQuery Image Scroller / 自動で流れ、オアウスオーバーで止まり、キャプションを出す
  95. Infinite Carousel / シンプルで汎用的なカルーセル
  96. Step Carousel Viewer / ナビゲーション付きのカルーセル
  97. jCarousel / 人気の高機能カルーセルプラグイン
  98. jCarousel Lite /  ベーシックなカルーセル
  99. jQuery.ScrollShow / アニメーションがユニークなカルーセル
  100. Agile Carousel / コンテンツごとスライドするカルーセル
  101. infinite JQuery carousel / ベーシックで使いやすそうなカルーセル
  102. Feature Carousel / サークル状に移動するカルーセル
  103. Tiny Carousel / 縦にもスライド可能なカルーセル
  104. bxCarousel / スッキリしてシンプルなカルーセル
  105. ツールチップ

    ツールチップ内に画像を含められる、または画像で表示可能なもの

  106. jtip / 画像とテキストを一緒に出せるツールチップ
  107. clueTip / こちらも画像とテキストを出せる。エフェクト無し
  108. Digg-style post sharing tool / ソーシャルメディアアイコンをツールチップで表示
  109. jQuery Popup Bubble / フェードインしながら画像が降りてくるツールチップ
  110. Easiest Tooltip / この記事で使ってるやつです
  111. Simple CSS + Javascript Tooltip with jQuery / マウス追従ツールチップ。テキストでも画像でも
  112. Coda Bubble / ふわっと浮き上がるエフェクトが可愛いツールチップ
  113. Sticky Tooltip / ベーシックな画像ツールチップ。マウス追従
  114. BeautyTips / 様々なタイプに対応した多機能ツールチップ
  115. Thumbnail Hover Popup / こちらも画像をツールチップで出す
  116. qTip / 柔軟性の高い高機能ツールチップ
  117. tinyTips / 軽量のツールチップ
  118. MopTip / divなども使える国産高機能ツールチップ
  119. マウスオーバーエフェクト

    マウスを乗せた時のエフェクトを実装するもの

  120. Sliding Boxes / 画像がスライドして別jコンテンツを出したりキャプション出したり
  121. Creating an Image Slider / ガレージ式に画像が降りて別の画像を表示
  122. Image Overlay / キャプションがアニメーションで表示
  123. Photo Zoom Out Effect / マウスを乗せると縮小される珍しいタイプ
  124. Thumbnail with Zooming Image / キャプションとちょいズームを実装
  125. Hover Zoom / オーバーレイと縮小するエフェクト
  126. captify / シンプルなキャプション表示
  127. hover-block-jquery / スムーズに画像がスライドする
  128. Greyscale Hover Effect / モノクロになる珍しいエフェクトを実装
  129. Hover fading transition / フェードしながら切り替わるボタン
  130. Fade Method / フェードしながら切り替え
  131. Stunning Sliding Door Effect / 4方向に分かれる面白いエフェクト
  132. Using Opacity to Show Focus / 画像を載せると別の画像にエフェクトをかける
  133. Thumbnail with Fading Caption / クールなエフェクトで切り替える
  134. jSquares / マウスを乗せるとハイライト化、コンテンツが浮き上がる
  135. hoverFade / フェード効果を与えるライブラリ
  136. Fade In-Fade Out / 画像にオンマウスで画面全体をフェードインアウト
  137. 拡大

    拡大鏡的なもの

  138. JQZoom / マウスの動きに合わせて脇に拡大鏡を表示
  139. Featured Image Zoomer / 拡大したままマウスホイールで調整も可能
  140. Cloud Zoom / エフェクトがクールなズーマー
  141. Image Power Zoomer v1.1 / こちらもマウスで拡大調整可能です
  142. AnythingZoomer / シンプルな拡大鏡
  143. Loupe and Lightbox / Lightbox効果をプラスした拡大鏡
  144. Apple-like Retina Effect / 丸い拡大鏡のズーマー
  145. Zoomple / ツールチップで画像の一部を拡大表示
  146. メニューっぽいやつ

    ギャラリーとどう違うのか分からないけどメニューになりそうなもの

  147. Image Rotator with Description / サイドのメニューをクリックすると画像が変わる&キャプション
  148. Fancy Thumbnail Hover Effect / サムネイルをクリックすると大きな画像が切り替わる
  149. Feature List / 見た目もクールなイメージタイプのナビゲーション
  150. slidedeck / マウスだけで全てを閲覧できるスライドメニュー
  151. Content Slider Using jQuery UI / ベーシックな画像ナビゲーション
  152. bxGallery / シンプルな画像ナビゲーション
  153. Background Image Navigation / 背景がマウスオーバーでスライドするメニュー
  154. IconDock / アイコンが滑らかに拡大していくドックメニュー
  155. Horizontal Tooltips Menu / アイコンメニューにツールチップがスムーズに追従
  156. Realistic Hover Effect / 影や反射のあるアイコンがふわっと浮くエフェクト
  157. Rolling Rounded Menu / アイコンが回転しながら開くユニークなメニュー
  158. Garage Door Style Menu / ガレージのドアのように開く画像メニュー
  159. Animated Menus / ゆっくり切り替わるクールなメニュー
  160. Outside the Box / アイコンが滑らかに拡大するドックメニュー
  161. BubbleUp / ユニークなアニメーションで拡大するアイコン
  162. AutoSprites / cssスプライトとjQueryをあわせたメニュー
  163. jQuery Dashboard / ダッシュボードパネルに隠されたアイコンメニュー
  164. Smooth Animated Menu / すとんとアイコン付きの画像が降りてくるメニュー
  165. Elastic Thumbnail Menu / スムーズに拡大するサムネイルを使ったメニュー
  166. megamenu / 画像がドロップダウンするメガメニュー
  167. Spy Effect / 縦にどんどん下がっていくアイコン付き可変メニュー
  168. quicksand / アニメーション付きでソートできるアイコンメニュー
  169. Simple Image Viewer / クールなアニメーションで切り替わるシンプルイメージメニュー
  170. Horizontal Accordion / 画像チラ見せアコーディオン
  171. CSS3

    css3を使ってるプラグイン

  172. polaroid photo viewer with CSS3 / ポラロイドを動かせるcss3のギャラリー
  173. CSS3 Lightbox Gallery / バラバラに散らばった写真をクリックするとLightboxで拡大
  174. Cufonized Fly-out Menu / クールなアニメーションエフェクトのフライアウトメニュー
  175. Slide Down Box Menu / マウスオーバーで画像が降り、テキストが上がるクールなメニュー
  176. Pretty Simple Content Slider / キャプションとタイトルのスライドインが素敵なメニュー
  177. ShineTime / マウスオーバー時のエフェクトがかっこいいギャラリー
  178. css3 transition slide / キャプションがクロススライドするシンプルなスライド
  179. Contextual Slideout Tips / クリックでコンテンツがアニメーションしながら広がる
  180. Bubble Navigation / マウスオーバーでサークルが広がり、子メニューが出現
  181. A Fresh Bottom Slide Out Menu / 遅れて出てくるアイコンがキュートなメニュー
  182. Apple-Style Icon Slide Out Navigation / アイコンが降りて来て、裏に入っていくメニュー
  183. Little Boxes Menu / バラバラになるアニメーションがユニークなボックスタイプのメニュー
  184. Slide Out Navigation / アイコンの出方が可愛いスライドサイドメニュー
  185. Interactive Picture / マウスオーバーでキャプションがスライド、クリックで画像が上がってくる
  186. Thumbnails Navigation Gallery / サムネイルギャラリーを使ったメニュー
  187. Sliding Panel Photo Wall Gallery / 画像を全体に表示、ギャラリー化
  188. Photo Desk / クリックするたびに角度が変わるポラロイドタイプギャラリー
  189. Beautiful Photo Stack Gallery / スライドギャラリーとLightboxをあわせたもの
  190. Image Highlighting and Preview / 少し回りくどいLightbox
  191. Kitchen Table / ギャラリーとLightboxをcss3も使って実装
  192. その他

    そのほかいろいろ

  193. PANORAMA VIEWER / 360度ビューアを実現するライブラリ
  194. VIRTUAL TOUR / パノラマビューアにキャプション機能を追加
  195. Create a Resizable Image Grid / バーのドラッグで全ての画像のサイズを変更
  196. imgAreaSelect / 画像の範囲をドラッグで指定、位置やサイズを表示
  197. Jcrop / 画像の範囲を指定して切り取る
  198. gzoom / バーのドラッグで拡大縮小
  199. Image Upload And Crop / PHPを使って、アップロード&切り取り可能なコンテンツに
  200. PhotoShoot / 画像内の一部を撮って写真内に収める
  201. Image Flip / クリックするとフリップする
  202. jQuery Corner / 角丸を作る。画像も角丸に
  203. jQSlickWrap / 画像の形状に合わせてテキストを詰める
  204. Image Reflection / 画像にリフレクション効果を与える
  205. jcoverflip / 画像をスクロールバーで動かす際に拡大アニメーション
  206. ANIMATED INNERFADE / 画像が自動でボックス内で斜めに動いたりする
  207. jThumb / 画像をサムネイル化する
  208. It’s a Rainbow! / 背景の画像の色が七色に変化
  209. Page Peel Effect / 角にめくれをつくる
  210. QuickFlip / クリックでフリップするコンテンツ。背景に画像しても可
  211. 以上、224個の画像系jQueryプラグインでした。

    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