jQueryで実現するレスポンシブレイアウトプラグイン集「25 jQuery Plugins to help with Responsive Layouts」
TOP > WebDesign > jQueryで実現するレスポンシブレイアウトプラグイン集「25 jQuery Plugins to help with Responsive Layouts」 様々な端末がリリースされている昨今、それぞれの端末に併せてレイアウトを組んでいくというのは非常に面倒で非効率的です。そこで最近は端末のWide幅に応じて、レイアウトを最適化するレスポンシブな組み方が主流になってきつつあります。今日紹介するのはjQueryプラグインで実現するレスポンシブレイアウトプラグインを集めたエントリー「25 jQuery Plugins to help with Responsive Layouts」です。 Response.js 様々なタイプのレスポンシブレイアウトを可能にしてくれるjQueryが集められていますが今日はその中からいくつか気になったものを紹介したいと
ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」:phpspot開発日誌
AutoAnchors jQuery Plugin ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」 見出しに<h3>なんかを使っていたとして、このプラグインを初期化すると次のような目次があらわれてクリックすれば指定の場所に移動できるという物が作れます。 h3で記事を書いておいてとりあえず後で見返してナビゲーションを作るなんていう作業をしたことがありますが、自動でやることで文書の変更にも対応できますね。 次のように、h3とか好きなタグは自分で選ぶことが出来ます。 ナンバリングもやってくれちゃいます。 関連エントリ ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 Twitter OAuth認証をポップアップで行うjQueryプラグイン ファンシーなデザインのカウントダウンタイマー実装jQueryプ
ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」:phpspot開発日誌
pShadow ? a jQuery extension for gorgeous drop shadows | Matthew Dawkins ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 $(elmeent).pShadow() だけで次のようなドロップシャドウ効果を付けられます。オプションを渡して強さや深さを指定できます PNGを使うのでクロスブラウザでも動作します 同梱されている画像を変えることで違った効果を得られそうですね 関連エントリ CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例色々 ５０の様々なデザインのドロップシャドウ効果適用素材Photoshopファイル
汎用性の高い、jQueryの定番系プラグインのまとめ
単体で使ってもいいし、それを使って更に面白いものを作りだすのにも役立つjQueryの定番系プラグインを紹介します。 いつもリリースされたばかりのプラグインを紹介しているので、たまには定番系で汎用的なものを。
電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」:phpspot開発日誌
EasyType Dev 電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」。 このプラグインを使うと予め指定したフォーマットで特定のインプットフィールドを初期化すると、指定の文字しか入れられないようにしつつ、背景に入力ヒントを表示させられます。 初期化を次のようにします $('#phone_number').easytype('(###) ###-####'); 入力には ###-###-#### という形式の数字しか入れられなくなります。 フィールドを分けるのも面倒ですし、かといって単なるinputをおくだけだとちょっと不親切かもしれないですね。 ifとかelseも使えるので、携帯番号でも、固定電話でも使うことはできそうです。 電話番号以外にも 2011/10/01 のような日付を入れるのにも使えます。 ソフトウェアのシリアル番号っぽい入力をしてもらうことも
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
jQuery Mobileでのアプリケーション開発にBackbone.jsを導入しよう | Lab by engineering@dwango.jp
こんにちは、2011年度新卒エンジニアの夏目です！突然ですがみなさんJavaScript書いてますか？ 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
ブロック要素にいとも簡単にiOS風の通知件数を表示できる「Badger」:phpspot開発日誌
Badger - Super sexy iOS style badges for jQuery ブロック要素にいとも簡単にiOS風の通知件数を表示できる「Badger」 $(element).badger(22);みたいに実行すると次のようにブロック要素に通知件数が追加されるというもの。 ちょっとめんどくさそうな処理もたった１行で実行できるのは有難い限りです。 既存の数値にプラスしたり、コールバック関数の指定なんかもできちゃいます。 関連エントリ div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 良い感じの水平アコーディオン実装jQueryプラグイン「liteAccordion」
タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」:phpspot開発日誌
タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」 2011年10月17日- Infinite Rounded Scrolling Tabs | jQuery Plugins タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」 次のような角丸デザインで、幅が足りない場合はスクロールボタンが表示されるタブUIが作れます こういうのは過去にあんまりなかったかも。デザインとかはCSSで調整できますね スクロール部分は自分でやろうとするとめんどくさそうなのですが、これは参考にできそうです 関連エントリ 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」 jQueryベースのタブUI１５種まとめ textareaやin
Youtube動画を自由自在に操れるjQueryプラグイン「Red Ytube」:phpspot開発日誌
Red Plugin Youtube動画を自由自在に操れるjQueryプラグイン「Red Ytube」 YoutubeのAPIを使って独自の再生ボタンを作ったり、再生時間なんかを表示させたり、埋め込み動画をその場でリサイズしたりすることが可能です 独自のテキストベースの再生・停止ボタン 現在の動画時間のリアルタイム表示 右下のつまみをドラッグ＆ドロップで動画をリサイズ（これは便利） APIを調べるのが億劫でも比較的簡単に実装できそうです 関連エントリ APIを使わずにYoutube動画のサムネイルを得る方法 Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」
jQueryでマウスオーバーすると全体的にピカーンってなるやつ
jQueryでマウスオーバーすると全体的にピカーンってなるやつ マウスオーバーは普通同じ大きさの画像を切り替えたりしますが、他の要素の背景画像を変えることで派手なマウスオーバーにすることができます。 投稿日2011年10月11日 更新日2011年10月12日 準備 htmlは特に変わったことはしません、適当な要素にクラスを割り当てます。 html <p class="button"><a href="#">ボタン</a></p> その他マウスオーバーしたときの大きめの画像を用意します。 ここでは「bg.jpg」という名前で1000×1000の画像を使用します。 bodyのbackgroundを指定する方法 一番単純な方法はボタンをマウスオーバーしたときbodyのbackgroundを変更する方法です。 jQueryでimageとpositionの設定をしますので、cssでその他の設定をして
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
覚えておくと地味に便利だと思える日が来るかもしれないjQueryのコードスニペット何個か - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 これならjQueryじゃなくてもいいんじゃ 無いか、っていう記事です。短くて使い やすいスニペットなんですが、まぁ用途 は人それぞれだと思うので適当に流して 下さい。自分が使いやすいようにまとめ たいだけです。 そのコードおかしいわーみたいなのあったらすいません。まぁその程度の記事です。というわけでいろいろとツッコミどころ満載かもですが、あんまり気にしないで下さい。じゃあ記事書くなよって話ですけどｗ デモの見方 jsfiddleというサービスを好んでよく使うのですが、あまり見慣れないかもなので一応デモの見方を。上図の○で囲った部分、Resultを押せばデモ画面に、再生ボタンでリロードします。 簡単なコードなので実践で使うにはもう少し工夫が必要です。また、jQuery
jQueryのプラグイン33+1選 -2011年9月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Loupe 画像の一部を拡大します、多彩なオプションが便利。 Slicebox 画像をダイナミックに3Dスライスするギャラリー。 E
リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」:phpspot開発日誌
jQuery ComboGrid Plugin リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」。 input type="text" に文字を入れて、候補が表示されたりするオートコンプリートがありますが、そのオートコンプリートをグリッドにしてリッチにし、よりヒントを多くすることでユーザビリティを上げるような使い方が可能。 表データがあって、その中から選んでもらいたいようなケースに使えそうですね。 中身のデータは当然ですがAjaxで読み込んで表示しています。 基本的には $(element).combogrid(options); というので利用が可能です。 サンプルコードは以下。 関連エントリ クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」
最近リリースされたjQueryプラグイン集「40 New jQuery Plugins」
軽量で様々なクリエイティブに役立つ、javascriptプラグインjQuery。最近では様々なWEBサイトに利用されていますが、今日紹介するのは最近リリースされたjQueryプラグインを集めたエントリー「40 New jQuery Plugins」です。 Recurly.js フォーム関連から、パスワードチェッカー、ビデオ関係のプラグインなど様々なプラグインが集められています。 詳しくは以下 Cuepoint.js HTML5のビデオプレイヤーCuepointを指定できるプラグインです。 Shuffle Letters Effect 打ち込んだ文字をシャッフルしてランダムに表示してくれるjQuery。 Flexible Nav 固定のナビゲーションを表示させ、今自分の位置を表示させてくれるプラグイン。 その他にも様々なWEB上で便利なプラグインが集められています。自分の用途に近いものが見つ
jQuery Mobileでサクッと作るスマートフォン向けWebアプリの基本 ─ ＠IT
大日本印刷 森川 裕美 2011/9/29 jQueryMobileを使って、スマートフォン向けのWebアプリケーションを手軽に作成する方法をおばかアプリを例に紹介します おばかアプリの開発にjQuery Mobileを使ってみました 先月8月20日に開催されました「第5回おばかアプリ選手権（見よ！ コレジャナーイアプリの数々を！）」にて、jQuery MobileとHTML5の要素を使用した、iPhoneのMobile Safariで動作するミニアプリiBooNを紹介させていただきました。本記事では、jQueryMobileを使って、お手軽にスマートフォン向けのWebアプリケーションを作成する方法をiBooNを例に紹介します。 iBooNは、iPhoneの傾きに応じて車の音が変わるミニアプリです。まず、Color Select画面から好きな色の車を選びます。ミニカーの画像が表示された画面
文字を別の文字に切り替えながら超クールにアニメーションさせながら表示「Shuffle Letters Effect」:phpspot開発日誌
文字を別の文字に切り替えながら超クールにアニメーションさせながら表示「Shuffle Letters Effect」 2011年09月29日- Shuffle Letters Effect: a jQuery Plugin | Tutorialzine 文字を別の文字に切り替えながら超クールにアニメーションさせながら表示「Shuffle Letters Effect」。 Flashサイトなんかであったりするあのエフェクト。ちょっと言葉では説明しづらいんですが、別の文字からa,b,c という感じでアニメーションさせつつ切り替えながら本来表示すべき文字にするというモノです。 デモページ - ページ下部に文字を入れてEnterキー ド派手ってわけじゃないんですが、なんかカッコイイですよね。 タイトル文字なんかをアニメーションさせれば単なるテキストでもインパクトがあります。 次のようにコールするだ
名前にカーソルを合わせた際にかっこ良くプロフィールを表示する例とそのjQueryプラグイン:phpspot開発日誌
Simple yet sexy hovercard with minimum CSS 名前にカーソルを合わせた際にかっこ良くプロフィールを表示する例とそのjQueryプラグイン 名前にカーソルを合わせると、名前のテキスト位置はそのままに次のようにプロフィールが浮かび上がるサンプルです。 ポップアップでもいいんですが、もとのテキストはそのままの位置というのがなかなかカッコイイのと技術的に面白いですね。 プロフィールが浮かび上がります。 マークアップとCSSが公開されていて、JSはjQueryを使って数行で実装されています。 ｊQueryプラグイン形式でも使うことができるみたいです 関連エントリ シンプルなツールチップ実装ができるjQueryプラグイン「mTip」 jQueryでツールチップ実装に迷ったらみるエントリ ページメニューにツールチップを表示して分かりやすくするjQueryチュートリ
jQueryで背景画像をフルスクリーン表示してスライドショーに出来るやつ色々 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一っちゃ択一なんですけど・・・ちょっと出来上がりすぎていじりにくいので他もチェックしたい、という事で調べたものを羅列しておきます。触ったこと無いのもあるのでその程度の記事という事で。 Supersized 定番の高機能プラグインです。IE6では動作しません。スマートフォンでも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
