Circular Content Carousel with jQuery | Codrops ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル。 そもそものデザインもいいのですが、次のようなコンテンツを左右にスライドできる（ホイールでもOK)UIを作ることが可能です。 「more」をクリックすればそのまま詳細がアニメーションで広がります サンプルプログラムのダウンロードが可能なので、ダウンロードしてカスタマイズして使うだけでも有用です。 関連エントリ IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル ページ上にそのままチュートリアルを乗っけて使い方を分かりやすく説明できるjQueryプラグイン「jQuery Tutorial」

VexFlow - HTML5 Music Engraving HTML5とJSでWEB上に綺麗な楽譜が書けるライブラリ「VexFlow」。 Canvas+SVGで描画され、次のように綺麗に描画できます。 たとえば、次のようにテキストで表現します。 tabstave notation=true notes 4-5-6/3 10/4 次のように描画されます。 チュートリアルをみると結構複雑なものも描画できるみたいです。 私自身、楽譜は全く読めませんが、面白いライブラリですね。

IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す

jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-

Idle Checker : by Kevin Lint ユーザがアイドル状態になったかどうか確認できるjQueryプラグイン「IdleChecker」。 ユーザがブラウザ上で操作しているうちはいいのですが、席をたったりした場合にログアウトを発生させたいようなケースがありますね。 会社なんかで画面をそのままにして席をたった後、ログイン状態のままだと誰かに操作されてしまう危険性がありますが、自動でログアウトを実装する仕組みがこのプラグインで実現出来ます。 デモページを見ると、ページ内でいる時間数がどんどん上がっているのが確認できます。クリックするとリセットされます。 プラグインのメソッドに、タイムアウト秒数や、ログアウトURLをパラメータとして渡しておくことで、指定した時間がくればログアウトURLに移動するようなことが簡単に実装出来ます。 ログアウトした際の例 使い方は以下のようにオプション

fire2chDat :: Add-ons for Firefox 今開いているdat落ちした２ｃｈスレを右クリックで蘇生させます 2chのdat落ちしたスレを右クリックで即座に蘇生させられるFirefoxアドオン「fire2chDat」。 検索エンジンに引っかかって、有益そうなのに読みたいけど読めなかったという場合があったりしますが、右クリックで読めるようになるというのは便利かも。 「今開いているdatスレを蘇生させる」というメニューがあります。 復活できた場合、そのままスレを読めるので便利そうですね。

どんなギークや、頭の回転が速い人であっても、やる気がないと生産性は高まらず、やる気がある人と仕事のレベルが同等か、それ以下になることも周りを見ていて感じます。 やる気を管理できれば、出来る人はより生産性を大きく上げられ、現時点であまり出来ない人でもやる気さえあればどんどんレベルを上げていけそうです。 というわけで、最近人気の「やる気」を上げる方法の良記事を色々とまとめてみました。 「充実感」を感じやすい人、できない人：日経ビジネスオンライン のめりこみ・没頭の科学。フロー理論について。 ゲームはフロー状態を発生させる効果的な装置。同じように仕組みを作って仕事に適用すれば生産性はあがりそうです。 【1】「脳とやる気」1秒で勉強意欲に火がつく法 | 達人のテクニック 脳科学からみるやる気の管理方法。 まずウォーキングや雑用などで準備運動からはじめて徐々にやる気を上げていく科学的な方法について解

IE6のアップデートを促してくれたり、アクセスブロックしたりする物まとめ。 YoutubeやTwitter等の大手サイトでも古いブラウザを使ってますよの表示がでるようになってきているみたい。 そういうものを簡単に実装するための仕組みが色々とありましたのでまとめてみました。 アップデート喚起・ブロック IE6 No More - Home コードを貼り付けるだけで、以下のようなイメージを出してくれるみたい IE6ユーザへのアップデートをスマートに促すことが可能な「ie6update.js」 情報バーみたいなＵＩでアップデートを促してくれます IE6ブラウザでアクセスするとWarningを出してくれる「ie6-upgrade-warning」 ワーニングとして結構大きく表示してくれます IE6でのページ表示をブロックする「IE 6 Blocker」 アクセスをブロックしてくれます その他 サイ

WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、

404 Blog Not Found:「PHP使いはもう正規表現をblogに書くな」と言わせないでくれ 「PHP使いはもう正規表現をblogに書くな」と言われた件について。 私のサイトも掲載されており、本当にご迷惑をお掛けしております。 とはいえ、 なぜ「PHP」がつくとダメ正規表現ばかり登場するのか。うんざりだ。 GoogleはGoogleで、ペイドリンクとかはつぶさにつぶす癖に、こういうものは対策してくれないんだろうか.... と、まで言われてしまったのですが、そこまで言う必要はあるんでしょうか、とは思いました。 以前の批判を踏まえて、以下のように追記してあるのですが読まれているのでしょうか？ 下記、正規表現は本当に簡単なチェックで、厳密なチェックをしたい場合は別途検索エンジンなどで調べた方がいいでしょう。 参考として、PHPでメールアドレスかどうか調べる方法(←これは厳密にはどうかは

EmChart | Aloe Studios Blog Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser.CSSのem指定のサイズが一発でわかっちゃう「EmChart」 基本のサイズが24ピクセルで、9px にしたい場合、0.375emにすればよい、というのが簡単に分かるようになっています。 これはなかなか便利そうですね。チャートのダウンロードも可能です。 関連エントリ サイト上でCSSによるフォントスタイルを確認できる便利ツール サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」

Best of CSS Design 2008 2008年のCSSベストデザインサイト集という特集。 これは、と思う物をピックアップしてみました。最新のデザインを見ることで勉強になりますね。 Let It Bleed Vermont Coffee Works Digital Mash Good DrupalCon, DC Future of Web Apps - Miami 2009 Future of Web Design - NYC 2008 Tennessee - Fall Tennessee - Spring Tennessee - Summer Tennessee - Winter LightCMS The First Twenty Luke Larsen Design Disease Adaptd Jason Santa Maria Electricurrent Mochi A

Free Weather Icons Collection フリーのお天気アイコン集いろいろ。 クオリティの高い天気アイコンが多数公開されています。 Livedoor のお天気APIと組み合わせれば、サイト内に天気を表示できますね。 Glossy Weather Icons Weather Icon Set Sticky Weather Icons Flat Weather Icons Tick Iconbest Weather Conditions Icon Set Small & Big Weather Icons Bubble Weather Icons Weather Sniffer 7 Degress Glossy Weather Condition Icons Large Weather Icons Pathfinder Very Detailed Weather Icon S