[B! jquery][web制作] citrus_gingerのブックマーク

たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER

簡単に作れる！みんな大好き可変グリッド先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。まずはこちらのデモを御覧ください。凄まじくレスポンシブデザインなサイトデモ使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア

citrus_ginger 2012/10/18

リンク

[JS]jQueryのプラグイン33+1選 -2012年4月

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Wookmark コンテンツをレンガ状に配置するだけのシンプルなスクリプト。 jmpress.js スライドをダイナミックなアニメー

citrus_ginger 2012/05/10

リンク

Rails3 と jQuery で真面目にオシャレなエロサイトをつくってみました

いつぞやの飲み会で、これだけウェブの技術が進化しているのだから、もっとオシャレなエロサイトがあってもいいんでないかい？ << という話になりまして。だけどどうせ作るんならということで、Rails3 と jQuery を使って結構マジメにつくってみました。（※大人の事情により、リンクはやむなく削除しました）当初はエロにオシャレは必要ないのかなーと思ったときもありましたが、いざつくってみると、やっぱり選べるならオシャレなやつの方ががいいよね、という結論に落ち着きました。今回つくったのは試験的なものなので 90日間限定でしか公開しないつもりですが、日本のエロサイトが今後もっとオシャレに発展していくきっかけになってくれたら嬉しいです。以下、サイトのコンセプトや使っている技術についてまとめてみます。 **Rails3 と jQuery で真面目にオシャレなエロサイトをつくってみました 1

citrus_ginger 2012/04/01

リンク

Turn.js: The page flip effect in HTML5

Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page

citrus_ginger 2012/03/23

リンク

[JS]jQueryのプラグイン100選 -2011年総集編

2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連画像ギャラリー関連画像拡大関連画像配置・キャプション関連背景画像関連コンテンツスライダー・カルーセル関連タブ関連ナビゲーション関連レイアウト関連パネル・ボックス関連ツールチップ・ティッカー関連アニメーション関連エフェクト関連スクロール操作・スクロールコンテンツ関連リスト関連テーブル関連フォーム関連テキスト関連見出し抽出関連ローディング関連エレメント・コンテンツ生成その他動画関連

citrus_ginger 2011/12/13

リンク

jQuery Clip - jQueryのプラグインをまとめました。

jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。

citrus_ginger 2011/07/27

リンク

jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス

利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。

citrus_ginger 2011/06/21

リンク

http://www.designwalker.com/2010/07/chart-tool.html

citrus_ginger 2011/05/12

リンク

Sammy.jsでAjaxコンテンツのセッションを操る - Mach3.laBlog

この記事は賞味期限切れです。（更新から1年が経過しています）この記事の情報は古くなっています。 Sammy.js はAPIも一新されてより強力なフレームワークになっています。公式ドキュメントをご参照ください。ページを移動させずにサクサクと展開していくのがAjaxコンテンツの魅力ですが、移動しないが故にURLとしてセッションを保持出来ないという弱点があります。オーソドックスな解決法は「location.hash」を用いる物ですが、その処理を簡単にしてくれるのがSammy.jsです。おおざっぱな話 Sammy :: Quirkey.com Sammy.jsは、location.hashを用いたルーティングを効率化してくれるjQueryプラグインです。 location.hashとは通常ページ内リンク等に使用される、 URL末尾の#に続く文字列の事。 http://www.ex

citrus_ginger 2010/12/27

リンク

[JS]jQueryのプラグイン100選 -2010年総集編

2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連ギャラリー・画像拡大関連ナビゲーション関連タブ関連パネル・ボックス関連ツールチップ関連レイアウト関連背景画像関連その他UI関連アニメーション関連スクロール・ドラッグなど操作関連テーブル・リスト・データ関連フォーム関連コンテンツ生成その他コンテンツスライダー・カルーセル関連

citrus_ginger 2010/12/20

リンク

jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。１）3D表示プラグインサンプルデモ今年のトレンドと言えば3D。というわけでこちら。まずはサンプルデモを確認。触ってわかる通りですが、2枚の画像が3D表示されます。呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;