これはかっこいい！ HTML5 AudioとjQueryを使った臨場感溢れるスライドショー
ブラウザいっぱいに画像を表示し、画像のスライドやサムネイルの表示・非表示のエフェクトがかっこいいだけでなく、HTML5 Audioを使いサウンドも加えた臨場感溢れるスライドショーを実装するチュートリアルを紹介します。 デモページ ※音でます [ad#ad-2] 画像の表示はサムネイルから操作できます。 レッドの矩形は現在表示されているサムネイルで、それをクリックするとブラウザいっぱいに画像を表示します。 Fullscreen Slideshow with HTML5 Audio and jQuery ここでは、実装に使用しているスクリプトを紹介します。 jQuery ベースとなるスクリプトです。 Vegas Background スライドショーをブラウザいっぱいに表示するjQueryのプラグインです。 参考：背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas jS
レイアウトや配色等をインタラクティブに設定できるWordPressテーマを作る為のフレームワーク・PressWorkちょっとやばい - かちびと.net
その場でインタラクティブにレイアウトや配色を 調整出来るようなテーマを作る為の開発者向け WordPressテーマフレームワークのご紹介。 久々に凄いなーと感じて脊髄反射的に記事に。 PressWorkで作られたテーマならユーザーが 直感でレイアウトを作る事が出来ます。 以前、直感でWebサイトを作成できるフリーWebサービスという記事を書いたんですが、このサービスのように、インタラクティブにレイアウトやカラーなどを決める事が出来るWordPressテーマ。というだけでも凄いんですが、これがフレームワークとして配布されているのでちょっと驚きでした。 HTML5で出来ています。管理画面に入る事も無く、FTP不要で直感的に、インタラクティブにレイアウトを組む事が出来ます。やばい。 以下に解説を少し。 テーマをアクティブにする 最初にテーマをアクティブにします。外観でPressWorkを選択する
プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」:phpspot開発日誌
プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」 2011年07月13日- Extended Progress Bar プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」。 プログレスバーは処理中に表示することでユーザのストレスを軽減することが出来ますがそんなプログレスバーを実装する際に、自分のサイトにマッチしたものを手軽に作りたいというニーズがあるのではないでしょうか。そんな場合に使えるプログレスバー実装のためのjQueryプラグインです。 次のような豊富なカスタマイズオプションが用意されています ・色のカスタマイズ ・値の最小値、最大値のカスタマイズ ・クリティカル値の設定 ・バーの色設定 ・バーの進行方向 ・バーのラベル表示位置 ・多数のイベントハンドラ プログレ
ボタンデザインにまよったら参考にできるPSDボタン素材まとめ:phpspot開発日誌
60 Outstanding Free PSD Buttons ボタンデザインにまよったら参考にできるPSDボタン素材まとめが公開されていました。 サイバーちっくでかっこいいものから、ソーシャルに使えそうなボタンなど色々満載です。PSDなので少し加工して使うなんてことも容易です。 CSS3ボタンもええけど、Photoshopで作ったほうが簡単にデザインを自由に変えられるからええんや、という方は参考にしてみましょう。 関連エントリ コピペで使えるCSS3ボタン６つのレシピ CSS3で実装されたボタンのサンプルやチュートリアル総まとめ ボタン等を光らせて目立たせ、分り易くすることが出来るjQueryプラグイン「jQuery illuminate」 ステップで学べるCSS3ボタンのデザインチュートリアル
シンプル＆軽快なカラーピッカー実装ライブラリ「JSColor」:phpspot開発日誌
JSColor ? JavaScript / HTML Color Picker, Selector, Chooser シンプル＆軽快なカラーピッカー実装ライブラリ「JSColor」。 デザインとしては次のようなデザインで<input>ボックスにカーソルを合わせるとポップアップして軽快に動作します。 必要十分な機能になっていて無駄な機能がないのが特徴です。単純に色を選んでもらうにはこうした軽くて無駄な機能が少なく分かりやすいものが実用的なのかも。 実装は<script>タグでライブラリを読込、<iput class="color"> とやるだけでよいらしく超お手軽。 ピッカーの表示位置を<input>の左右上下に選べたりもするみたいです。 １つの選択肢として覚えておいてもよいですね 関連エントリ シンプルUIがいい感じのカラーピッカー実装jQueryプラグイン「simpleColorPic
オシャレでエレガントな使いやすいフリーフォント60個総まとめ
デザインと一緒にテキストを利用するとき、まずフォントを選び、そこからデザインを練っていくことありませんか。 フォントを変更するだけでがらりと印象が変わってしまうほど、重要なデザインパーツのひとつです。 海外デザインブログDeisgningMallで、エレガントでオシャレな使いやすいフリーフォン60個をまとめたエントリー「60+ Excellent, Elegant and Exceptional Free Fonts」が公開されていたので、今回はご紹介します。 なにかと時間のかかるフォント選びを楽に行うためにアルファベット順に並べています。お気に入りのフォントを見つけてみてはいかがでしょう。 詳細は以下から。 エレガントでオシャレなフリーフォントまとめ保存版 [note_box]まとめているフォントは全て無料ダウンロードすることが可能となっていますが、使用に関するライセンスは異なりますので
正規表現の限界 @ Shibuya.pm
swatmac.info Buy this domain. 2020 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
復習のタイミングを変えるだけで記憶の定着度は４倍になる
１，３，７……で復習する 一度に覚えるのと、分けて覚えるのでは、分けて覚えるほうが効果が高く、しかも長く続く。 これは、単純な暗唱ものから文章理解から技能習得に至るまで、あらゆるジャンルとコンテンツとシチュエーションで確認されている。 そして同じく学習を分散するにしても、その間隔を次第に広げる方が効果があることが知られている。 ・Glenberg AM & Lehmann TS. (1980). Spacing repetitions over 1 week. Memory & Cognition. 1980, Vol. 8 (6), 528-538. ・Glover JA & Corkill AJ.(1987). Influence of paraphrased repetitions on the spacing effect. Journal of Educational Psych
お絵かきでCAPTCHAできるようにするjQueryプラグイン「MotionCAPTCHA」:phpspot開発日誌
MotionCAPTCHA ? Stop Spam, Draw Shapes - Joss Crowcroft お絵かきでCAPTCHAできるようにするjQueryプラグイン「MotionCAPTCHA」がなかなかすごいです。 フォーム下に線画を用意しておいて、それをマウスでなぞってValidateするみたいです。 次のようになぞって正しい形だとパスできます 形がマッチしていないとやり直しになります。 必要なライブラリを読み込んでルール通りにHTMLを記述すれば $('#form-id').motioncaptcha(); で初期化が可能です。 内部的にどのぐらい強固になっているかは調べていませんが、ロボットに入力させるのはちょっと難しそうですね。 関連エントリ iPhoneのロック解除風UIでCAPTCHAするjQueryプラグイン「QapTcha」 PHPとGDを使ってCaptchaを
TwitterやFacebookの独自アイコンを作る場合に覚えておきたい「Picons」:phpspot開発日誌
Picons | Vector Icons and Pictograms TwitterやFacebookの独自アイコンを作る場合に覚えておきたい「Picons」 ベクター形式でロイヤリティフリーなので独自アイコン作成の際にはうってつけ。 デザイナーさんなら誰もが独自のアイコンを作りたいと思うのでこれをベースにするとよさそうです。 ６０種類のソーシャルアイコンが同梱 配布形式も色々で扱いやすいです。 アーカイブをDLすればそれぞれ収録されています 関連エントリ 選びたい放題のフリーのソーシャルアイコンセット色々 TwitterやFacebook等、フリーで使えるソーシャルメディアアイコンセット４０ シンプル白黒がいい感じのソーシャルアイコン37個セット「LinkDeck」 白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット
Node.js向けのPDF作成ライブラリ「PDFKit」:phpspot開発日誌
PDFKit ? A PDF Generation Library for Node Node.js向けのPDF作成ライブラリ「PDFKit」が公開されていました npmコマンドでインストールできるPDFライブラリです。 npm install pdfkit で入るそう。 HTML5のcanvas風APIで作れるみたいです。サンプルコードは以下。 かなり分かりやすいコードですね。JavaScript最高！というやつです。 今後もこうしたライブラリがどんどん充実していってほしいですね 関連エントリ node.jsに関する基礎や開発・チュートリアルのまとめ Node.js上でPHPを呼び出せる「NodePHP」 node.jsでシンプルなMVCを行うための仕組み色々
PDFをFlashのパラパラ本をめくるページフリップに変換する「FlipSnack」
電子書籍が一般的になりつつある中、ウェブ上で本をパラパラめくるページフリップ効果をつけて、PDFの資料を共有するサービスも増えていますよね。 今回は、PDFファイルをFlashのページフリップに無料で変換し、ウェブサイト上に埋め込むことができるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! PDFをFlashのページフリップに変換する「FlipSnack」 「FlipSnack」は、PDFファイルに、本をパラパラめくるような効果（ページフリップ）をつけるオンラインサービス。 GoogleやTwitter、Facebookアカウントでログイン可能、ブログやサイトにページフリップを埋め込むこともできます。 サンプル ページフリップ ↑このように、その場でもパラパラ本をめくれる
エラーページもグラフィカルに表現「30 Interesting 404 Pages」
webページが表示されない時に変わりに画面に登場する「404 error」。文字だけの味気ないタイプのものが一般的ですが、今回は「404 error」をグラフィカルに表現したwebデザインページ集「30 Interesting 404 Pages」を紹介したいと思います。 （Error | Brandstack） 一目見たら忘れられない、個性的なデザインの「404 error」ページが多数紹介されています。気になったデザインをいくつかピックアップしてみましたので、下記よりご覧ください。 詳しくは以下 ■Dailymotion Cloud – Page not found 雲のイラストが広がるバックグラウンドと、サイン風にデザインされた「404 page not found」が目を惹く、シンプルでありながらもインパクトのある作品です。 ■Nothing found for 404notfo
JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS
ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi
ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews - かちびと.net
クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ 今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。 サムネイルがナビゲーションとして付きます。画像のスライドと共にサムネイルもアニメーションスライドします。デモサイトでは1つしかありませんけど、実装出来る形は6種類から選択できます。IE6でもIE7でも問題なく動作しました。※IE6の透過処理は別途必要です。 デザインは6種 例として2つキャプチャ撮り
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
汎用性に優れた、ソーシャルメディアの全60種類のアイコン素材（AI, PSD付き） -Picons Social
IDEA * IDEA
スマートフォンで押しやすいボタン型リンクを作るCSS
[CSS]わずか1KBのスタイルシートでもここまで美しいレイアウトができる -CSS1K