レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」:phpspot開発日誌
VenoBox - responsive jQuery modal window plugin レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 LightBox派生スクリプトは多々ありますが、レスポンシブでクールなフラットデザインで、地図、動画、画像、iframeなどなんでも埋め込めるので、今の時代にかなり使いやすそう。 関連エントリ フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」 LightBoxはここまで進化したよ「VisualLightBox」
フリーで使えるフラットでハンサムなBootstrapテンプレ集「Black Tie」:phpspot開発日誌
皆様、あけましておめでとうございます。 今年は徐々にタブレットが盛り上がりを見せており、ますますスマホ、タブレットファーストなWEBサイト作りが主流になっていくかと思っております。 それにより、今年も引き続き、HTML5,CSS3,レスポンシブデザインが重要になり、Bootstrap,jQueryプラグイン等もどんどんリリースされ、WEB作りに関する物は今後も複雑化、高度化、リッチ化が進んでいくのでしょう。そういったものを意識して皆様のWEB制作能力が向上するようアンテナをはり、今年も更新をしていきたいと思います 今年も本ブログをよろしくおねがいします。 早速ですが、最初のエントリです。 Black Tie - Free Handsome Bootstrap Themes フリーで使えるフラットでハンサムなBootstrapテンプレ集「Black Tie」 フラットでクールなBootstr
パスワード表示のON・OFFをユーザ自信が切替えられるjQueryプラグイン「hideShowPassword」:phpspot開発日誌
パスワード表示のON・OFFをユーザ自信が切替えられるjQueryプラグイン「hideShowPassword」 2013年07月02日- cloudfour/hideShowPassword GitHub パスワード表示のON・OFFをユーザ自信が切替えられるjQueryプラグイン「hideShowPassword」。 パスワードの入力はpasswordフィールドにすれば伏せられて、誰かが同じ画面を見ていた場合にも安全性が高まりますが、逆に何を打ったのか分からなくなってしまうという面もあります。 そこで、ON/OFFが切替えられるといいねということで、いくつかのサイトでは導入されてきています。 こちらのjQueryプラグインを使えばそれが簡単に実現できます。 非表示：目のアイコンに注目 目のアイコンをクリックすればパスが表示されるという分かりやすいUIのデモです デモページ 他にも、目の
Yahooが作ったピュアCSSのUIライブラリ「Pure」:phpspot開発日誌
Pure Yahooが作ったピュアCSSのUIライブラリ「Pure」 グリッド、フォーム、ボタン、テーブル、メニュー等を実現するCSSモジュールです。 なんとなくBootstrapっぽい感じがしますが、JavaScriptレスというのが特徴なんでしょうか。 今時JavaScriptは普通に動くでしょ、という方もいるかもしれませんが、CSSのみなので5.7KBという軽量さがアドバンテージになるのかもしれませんね。 レスポンシブサイトをつくる際にも使えるということで、選択肢の１つとして評価検証してみてもよいのかも。 関連エントリ レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「Fla
テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable」:phpspot開発日誌
jQuery.FilterTable Sample テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable」 シンプルにテーブルを出力してJSで絞り込めるというUIは実装も使うのも楽、ということでこういうUIにしたい場合は選択肢の１つとして。 複数列に対応しており、例えば、列1にマッチすれば列1がハイライトされるし、列２にマッチならば列２がハイライトされます 関連エントリ テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」
LightBoxはここまで進化したよ「VisualLightBox」:phpspot開発日誌
jQuery Image Lightbox: Prime Time DEMO LightBoxはここまで進化したよ「VisualLightBox」 CSS3等を使ってかなりオシャレに進化したLightBoxが実装できます。LightBoxはもう８年ぐらいまえに登場して、今オリジナルをみるとなんか古い感じがするということで時の流れを感じます クリックするとオシャレに拡大。 テーマが大量にあって好みのデザインを選びたい放題 Windowsっぽいスキン。LightBoxが出たのってポップアップを禁止するツールが多く出てきたことが背景にありますが、ページ内ポップアップされていて面白い。 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 今こそ知っておくLightbox風プラグイン20+
高機能なHTML5お絵かきツールを実装できるjQueryプラグイン「jquery.deviantartmuro」:phpspot開発日誌
jquery.deviantartmuro by deviantART 高機能なHTML5お絵かきツールを実装できるjQueryプラグイン「jquery.deviantartmuro」 レイヤー機能、フィルタ機能の他、様々な機能が実装されており、１つのアプリケーションのような画像編集ツールを実装できます HTML5ベースではいまだかつてない程の高機能っぷりかもしれません。 サイトにお絵かき機能を実装したくなったら参考にしてみましょう 関連エントリ オープンソースのHTML5お絵かきウィジェット「Literally Canvas」 Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」 お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」
普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」:phpspot開発日誌
ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 ありきたりなカッコいい、とはいえないような以下のテーブルがあったとします プラグインで初期化すれば、ソータブル、エディタブル、なクールなテーブルに早がわり これは5,6年前でいえば魔法だと思う方は少なくないでしょう。 関連エントリ レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 テーブルをグラフに変換してくれるjQueryプラグイン レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table So
単色のエレメントを立体的に美しくできるjQueryプラグイン「Add Shine」:phpspot開発日誌
Add Shine - a jQuery Plugin 単色のエレメントを立体的に美しくできるjQueryプラグイン「Add Shine」。 次のような単色ベースで味気ないページを、このjQueryプラグインを使って初期化してみます すると、次のようにゴージャスなグラデーションで立体的に美しく、手のかかった風のサイトにすることが可能 $(element).addShine() のようにしてエレメントに輝きを与えるわけですね 関連エントリ Photoshopのグラデーションツールの操作感でCSSグラデーションを作れるツール テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」 ストックしておくと楽できそうなPhotoshop用グラデーション392種類 CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル
動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン:phpspot開発日誌
動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン 2012年12月10日- Make an HTML5 video a background - body bg demo 動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン。 Youtubeの動画を背景にするjQueryプラグインがあったりしますが、今回は自前の動画を背景に使ったサイトが簡単に作れます。 動画フォーマットも各種指定することで色々な端末に対応することができそう 実装コード。各種動画ファイルをフォーマットベースにオプション指定 若干重いですが、将来的にはこういったサイトも当たり前のように登場していることでしょう。 関連エントリ フリーのオープンソースなHTML5動画プレイヤーいろいろ
どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」:phpspot開発日誌
どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」 2012年11月21日- any list scroller - jQuery scrolling plugin by musings.it to scroll any list with any content - musings.it web design and development どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」。 <ul><li>なリストを初期化すれば次のようなスクロールするUIに変化するみたい。 表示アイテム数の他、アイテムの間隔など細かい所もオプションやCSSで制御できるようです 動作原理は以下のようになっているらしい。 このてのスクロール系ライブラリは豊富にありますが、１つの選択肢として覚えておいてもよさそう。
WEBサイト制作に使えるベクターアイコンセットｘ２５:phpspot開発日誌
25 Free Vector Icons Pack For Web and Graphic Designers | Icons | Graphic Design Junction WEBサイト制作に使えるベクターアイコンセットｘ２５。 綺麗なアプリケーションアイコンを中心に手書き風のアイコン等がまとまっています。 これだけあればアイコンに困らないってぐらいありますが、作りたい物の印象に合うアイコンを選ぶ際に使えそう 関連エントリ ６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」 iOSのAppアイコン作成用PSDテンプレート 超気合の入ったiOSアプリケーションアイコン４０ RetinaディスプレイOKなアプリ用PSDアイコン350
Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」:phpspot開発日誌
FullCalendar - Full-sized Calendar jQuery Plugin Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」 カレンダー実装のスクリプトは色々とありますが、UIが綺麗に作られているカレンダー実装jQueryプラグインの１つとしてご紹介 ドキュメントが充実しておりカスタマイズ制が高いものとなっています 関連エントリ Google Calendar風に使えるカレンダー実装jQueryプラグイン「jquery-frontier-calendar」 これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム
カスタマイズ自由自在の多機能スライドショー実装ライブラリ「Cycle2」:phpspot開発日誌
Cycle2 カスタマイズ自由自在の多機能スライドショー実装ライブラリ「Cycle2」 全ブラウザ対応、レスポンシブ、カスタマイズ自由、エフェクト多数、スライドのブックマーク等、他のスライドショーで出来るような事は殆ど対応しているそうです。 とりあえず、既存のライブラリを使ってみたけどどうも自分の作りたいものと違う、といった場合にこうしたカスタマイズ出来るもので好みに作れそうです キャプションをつけたり ページ送りをしたり 関連エントリ CSS3で画像を分割スライドする超クールなパネル実装例 一枚の画像を高速にスライドさせてアニメーション表示する「JZoopraxiscope」 紙芝居のようなアニメーションでスライドするスライダー実装jQueryプラグイン「Innovation Slide」
HTML内にPDFを埋め込めるJSプラグイン集:phpspot開発日誌
7 Best jQuery & JavaScript PDF Viewer plugin with examples HTML内にPDFを埋め込めるJSプラグイン集。 通常PDFというとPDFページにリンクして直接開くというものが多いですが、こうしたプラグインを使うことで、HTMLの中にIFrameのようにPDFを埋めこんで表示が可能です。 ブラウザプラグインを使うものや、GoogleDocを使うもの、直接JSでレンダリングしてしまうものなど様々まとまっています。 リンク先PDF、というとちょっと躊躇してしまう時がありますが、こうしてHTML内に埋め込まれていると抵抗が個人的には少ないです。 関連エントリ ブラウザ上でPDFを表示するJSライブラリ「PDF.js」
色んなデータを便利に表示できる「Recline.js」:phpspot開発日誌
Home - Recline Data Explorer and Library 色んなデータを便利に表示できる「Recline.js」 データをExcel表風にしたり、グラフを描画したり、タイムラインにしてみたり、データを地図上にプロットしてみたりといったことが出来るライブラリだそう。 テーブルビュー。ソートなんかもできてこれだけでもリッチです このデータからグラフにしたいモノを選んでグラフ化も可能 データを元にタイムライン表示もできるみたい データを元に、地図上にプロットするなんていうこともできます なかなか面白いですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」
レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」:phpspot開発日誌
レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 2012年07月10日- PHPImageWorkshop - PHP class using the GD library for image processing レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」。 画像生成のサービス等を作る際には押さえておきたいライブラリかも。WEBサービスにおいては画像生成はよく使われるものですから、覚えておいて損はないでしょう。 以下に行える処理の概要をご説明します。 画像合成 複数の画像を組み合わせて簡単に合成する機能。透過pngの画像を合成します。 合成結果。透過PNGによって綺麗に合成されていますね。 実装コードが分かりやすくて、次のように addLayer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PHP製で自分のサーバで使えるリッチなWEBメーラー「RainLoop Webmail」:phpspot開発日誌
ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」:phpspot開発日誌
カレンダーやDateピッカー関連のjQueryプラグイン20:phpspot開発日誌