日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
ScaleOut | Supership
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます
[JS]ページにグリッドを重ねてカラムのサイズを自動算出するスクリプト
ウェブページにグリッドをオーバーレイさせて、レイアウトのチェックができるスクリプトをDev Growから紹介します。 デモページ カラムの幅と高さの数値は自動的に表示されるもので、カラムとスペースの数によって算出されています。 グリッドを表示するためには、予め下記の数値を記述する必要があります。 `※デフォルト値は設定されています。 横のカラムの数 横のスペースの数 横のカラムの高さ 縦のカラムの数 縦のスペースの貸す 縦のスペースの幅 オーバーレイの色 オーバーレイの透明度
Appleのようなデザインをするためのコーディングチュートリアル15 – creamu
Appleのサイトのような、かっこいいインターフェースを実装したい。 そんなあなたにおすすめなのが、『15 Incredible Apple Webdesign Style Coding Tutorials』。Appleのようなデザインをするためのコーディングチュートリアル集です。 かなりかっこいいのが揃っていますよ。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Appleの製品紹介で使われているような、スライドショー。jQueryで動作し、PHPやDBは必要ない Apple style Accordion Menu Appleのサイドバーで使われているような、アコーディオンメニュー How to: Recreate apple.com menubar Appleのグローバルメニューはデザインがよく、ソースも綺麗。
ドロップダウンメニューをjQueryを使ってリデザインする方法 – creamu
JANKOで、ドロップダウンメニューをjQueryを使ってリデザインする方法が紹介されています。 For me, standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can’t contain nothing but simple text. とのことで、標準のHTMLセレクトエレメントはとても退屈でかっこわるいのでリデザインしたとのこと。 ↑のようにシンプルだけどデザインされたメニューが実装されていますね。 デモは以下から。 » JankoAtWarpSpeed demos ソースコードもダウンロードできるので、ぜひ見てみてはいかがでしょうか？ » Reinventing a Drop Down w
20 jQuery Tutorials And Plugins To Impress Your Friends - SpyreStudios
I have always liked playing around with jQuery and I’m sure many of you do too! In fact we’ve published some jQuery ‘getting started‘ guides here on SpyreStudios in the past. So this time I thought we’d go more in depth and I’ve hand-picked 20 awesome jQuery tutorials (most of them have working demos) Here they are: Creating a Keyboard with CSS and jQuery ↓ In this tutorial you’ll learn how to cre
Facebook風のアイテムサジェスチョン実装jQueryサンプル:phpspot開発日誌
Facebook like suggestions with jQuery content appears and disappears. Facebook風のアイテムサジェスチョン実装jQueryサンプル。 次のようなUIで、Ｘボタンを押すと、次々と、アイテムがなくなるまで提案してくれるＵＩ実装のサンプルです。 デモページ 仕組みとしては次のように、一個だけアイテムを見せておいて、jQuery の .fadeOut によって実現しているみたいです。 少ないスペースで、ユーザに対してちょっとしたヒント、ＴＩＰＳや提案などを掲載するのにも使えそうですね。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 jQueryやPHPを使った便利な仕組みのチュートリアル集 jQueryを使ったタグクラウド生成チュートリアル
jQueryの可能性を知りたいなら・・・『jQuerySTYLE』 | 100SHIKI
最近はよくjQueryを使うのだが、他の人がどんな風に使っているかに興味がある。 もしあなたが同じように思っているならjQuerySTYLEが参考になるだろう。 このサイト、jQueryが使われているサイトのギャラリーである。 また、それぞれのサイトでjQueryのどの機能（Ajaxだとかナビゲーションだとか）が使われているかもアイコンで一目でわかるようになっている。自分の興味にあわせて覗いてみるといいだろう。 自分が使っているものを他の人がどう使っているか。そんなことに気づかせてくれるこうしたサイトはいいですね。
[JS]jQueryの効果的な使い方を実例から学ぶ -Use jQuery
Use jQueryは、JavaScriptのライブラリ「jQuery」とそのプラグインを使用したウェブサイトのショーケースです。
マウスオーバー時にクールに画像を切り替えるjQueryサンプル:phpspot開発日誌
Sliding Boxes and Captions with jQuery | Build Internet! マウスオーバー時にクールに画像を切り替えるjQueryサンプル。 マウスオーバーで滑らかにキャプションが現れたり、画面を切り替えたりできるサンプルのデモとダウンロードが出来ます。 デモページ CSSをでレイヤーを重ね合わせて、上の要素をアニメーションさせてるだけのようですが、なかなかこれがクールですね。 $('.boxgrid.caption').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'220px'},{queue:fals
角丸でとてもかわいいlightbox系ポップアップ『prettyPhoto』 – creamu
Stephane Caronさんのブログで、「jQuery lightbox clone – prettyPhoto」というタイトルの角丸でとてもかわいいlightbox系ポップアップが紹介されています。 白の角丸、黒で透過の角丸、黒で透過のスクエアなど、とてもかわいいデザインになっています。 ポップアップするスピードも気持ちいいので、かなり使えるのでは。 This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. ライセンスは「Creative Commons Attribution 2.5」。商用利用も可能とのことですね。 ブラウザチェックも以下の通りされているようだから安心ですね。 ・Firefox
jQueryアニメ＆エフェクト合わせ技で画像を拡大 (1/5)
コンテンツの魅力を引き立て、十分に伝えるためには、時には“一歩引いた”Webデザインがいいケースもあります。たとえば、自身が手がけた仕事を紹介するデザイナーのポートフォリオサイトがそうかもしれません。ポートフォリオサイトそのものを作品と見なして、凝ったビジュアルデザインを作り込むこともできますが、過去に手かげた作品が豊富であれば、それらの個性を生かすシンプルなデザインもいいでしょう。 スイスのデザイナーユニット「Contreforme」のポートフォリオサイトは、後者のアプローチ――各々の作品を引き立たせるサイトデザイン――を採用しています。ただし、それだけではありません。このサイトが採っているもうひとつの手法が、アニメーション／エフェクトによる楽しい演出です。今回はこのサイトの技に注目してみます。 今回のお手本サイト：『Contreforme』 企業のCI策定やグラフィックデザイン、Web
jQueryやCSSを使ったナビゲーションメニュー300選 – creamu
かっこいいナビゲーションメニューをさくっと実装したい。 そんなあなたにおすすめなのが、『300+ Jquery, CSS, MooTools and JS navigation menus』。jQueryやCSSを使ったナビゲーションメニュー300選だ。 以下にいくつかご紹介。 » Fancy menu かっこいいナビゲーションメニュー » Amazing apple style navigation menu Appleのサイトのようなナビゲーションメニューの作り方。↑のキャプチャはこちら » jQuery idTabs 8つのクールなjQueryメニュー » navigation-3 プルダウンメニューなど4つの例 » block-navigation CSSデザインのメニュー9選 その他のリストは以下から。 » 300+ Jquery, CSS, MooTools and JS na
リストやテーブルを簡単かつ綺麗にストライプ状に色分けする方法
リストとかテーブルをストライプ状に色分けしようとするとき、 セルとか列に対して一つ一つクラスをつけて、 そしてCSSで装飾するのが一般的だと思います。 でも、クラスを一つ一つにつけていくのって面倒じゃないですか？ 今回紹介する方法を使えば、 簡単かつ綺麗に色分けすることができるので、 参考にしてみてください 面倒なやり方：一つ一つにクラスをつけていく まずはオーソドックスに、 一つ一つにクラスをつけて行く方法を紹介しておきます。 ■HTMLソース <ul> <li class="list01-odd">リスト１</li> <li class="list01-even">リスト２</li> <li class="list01-odd">リスト３</li> <li class="list01-even">リスト４</li> <li class="list01-odd">リスト５</li> </
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブWebデザインで使えるjQueryプラグインいろいろ
[JS]パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry
Site Under Maintenance
BOS138 - Bandar Game Gacor Asia Mode Spin BarBar Ala Big BOS
jQueryでウェブデザイン | コスミー報告書[社外秘]
Courses and Tutorials in JavaScript | Envato Tuts+
