異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
ダミー画像をFlickrから超簡単に呼び出して埋め込めるjQueryプラグイン「flickrBomb」:phpspot開発日誌
ダミー画像をFlickrから超簡単に呼び出して埋め込めるjQueryプラグイン「flickrBomb」 2011年06月22日- Rapid Prototyping with flickrBomb - ZURB Playground - ZURB.com ダミー画像をFlickrから超簡単に呼び出して埋め込めるjQueryプラグイン「flickrBomb」 必要なライブラリを読み込んで以下のように flickr:// の後に検索ワードを指定した値をsrcにいれておくと検索結果の画像が出せるというもの。サイズの指定も可能。 <img src="flickr://Super Meat Boy" width="940px" height="250px"> これまでダミー画像としてグレーの画像を出していたような場合も、これを導入することで、より本番に近いプロトタイプなサイトが作れます。 カーソルを
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
なんでも拡大しちゃうjQueryプラグイン「Zoomooz.js」
twitter facebook hatena google pocket これわりと使いようによっては面白くなりそうなjQueryプラグインです。 Zoomooz.jsは指定要素をクリックしたら拡大表示してくれます。 ステップなどで利用すると良さそうです。 sponsors 使用方法 Zoomooz.jsからファイル一式をダウンロードします。 <link rel="stylesheet" href="zoomooz.css" type="text/css" /> <script type="text/javascript" src="sylvester.js"></script> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jq
Zoomooz.js
Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Download ZIP File Download TAR Ball Fork On GitHub Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky
東京ブルー｜Takumi Taniguchi Photographer
街があおく写る�その時間が好きだ。 喜び、悲しみ、幸福、 不安、楽しみ、後悔、 優しさ、焦り、希望。 色んな朝がある。 このサイトは、写真集「東京ブルー」に 収録された作品の一部と、撮影地マップを 公開しています。 タイトル ： 東京ブルー 著者 ： 谷口巧 発行所 ： 圓津喜屋(えんづきや) ISBN ： 978-4-9900779-9-0 C0072 B5横上製・カラー80貢・2000円＋税
iOS向けWebアプリケーションを開発する際に使いたいHTMLフレームワーク·appML MOONGIFT
appMLはjQTouchをはじめとするHTML5/JavaScriptライブラリを組み合わせたiOSをはじめとするスマートフォン向けHTMLフレームワーク。 appMLはHTML5/jQuery/JavaScript製のオープンソース・ソフトウェア。多様なWebブラウザが乱立するデスクトップの世界と違って、スマートフォンの世界はとてもシンプルだ。ほとんどがWebKitで統一されている。WebKit自身はオープンソースであり、開発者としてはとてもやりやすい。 iPhone向け 今後、ネットアクセスデバイスはデスクトップからモバイルへ移っていく。そんな時代の中でスマートフォン向けWebアプリケーションを開発するのに使えるフレームワークがappMLだ。 appMLはjQTouchやiScrollをベースに開発されているスマートフォン、iPad向けのフレームワークだ。PhoneGapの公式ツール
HTML5, CSS3, jQueryを使用したフロントエンド開発用のフレームワーク -G5 Framework
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS（Reset関連） リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース（1.4.4も可） ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します - かちびと.net
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
[JS]背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st
さまざまなタイプのスライドショーが簡単に設置できるスクリプト -Agile Carousel | コリス
一つ一つの完成度が高い、アニメーションを伴ったさまざまなタイプのスライドショーが簡単に設置できるjQueryのプラグインを紹介します。 Agile Carousel - Javascript Slideshow - Image Carousel [ad#ad-2] Agileは以前ちらっと紹介しましたが、つい最近バージョンアップしたので改めて紹介します。 以前のバージョンではjQuery UIも併用するタイプでした。 Agile Carouselには、下記のさまざまなタイプのスライドショーが用意されています。
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
FitText - A plugin for inflating web type
A jQuery plugin for inflating web type Download on Github FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. Oh, and don't you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!
テーブルにソート、内容編集、行の削除等の機能を加えるjQueryプラグイン・TableGear - かちびと.net
なかなか多機能なライブラリだったので 備忘録。テーブルにソート、コンテンツの 編集や、Ajaxによる行の削除が可能な jQueryプラグイン・TableGearです。この 手のプラグインはいくつかありますが、 中でもかなり高機能な気がします。 jQueryだけでなくmootoolsも用意されてるみたいです。テーブル内でソートが可能で、セル内は編集できます。もちろん、編集後のソートもOK。行そのものを消す事も可能ですよ。 セル内は編集可能で、普段はこのように通常と変らないインターフェースを維持できます。マウスでクリックするとプルダウンや入力エリアが出現。 編集してもソート機能は維持 ソート機能が付いていますが、セル内に変更を加えても、変更後の内容でソートしてくれます。 行の削除も 行ごと削除する事も出来ます。 デモはPHPとMySQLを使って設計してるようですが、他のシステム上でも動作すると
使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」:phpspot開発日誌
JK - jQuery SimpleFAQ 使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」。 FAQというと内容が多くなればページが長くなって見難くどんどん使いづらくなっていきますね。 そんな場合に、項目は並べつつも、クリックした際にアニメーションで質問のすぐ下に現れるようなFAQが簡単に作れます。 質問のリスト。 とりあえず質問が並んでいるので分からないことを探してもらいます。 そんなに大規模なFAQじゃなければ質問項目を羅列しておくだけでもそれなりに使いやすいです。 クリックすればページ移動とかもなく、その場にアニメーションしながら答えが表示されます。 別ページに移動したりといったことがなく、ストレスフリーで内容が見れます。仮に答えが的外れでも戻ったりせずにすぐに他の質問に行けます で、何がいいかという個人的におすすめする点は、作り方。 作り手は、
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
diagonalFade : A jQuery plugin
is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you're off and away. diagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern bro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
thebeebs | How to Create an Awesome Scrolling Navigation using jQuery