tableから複数キーワードでフィルタリングできるjQueryのプラグイン・Multifilterのご紹介です。非圧縮でも2KB以下と、とても軽量です。大量な情報を含むtableにあると便利そうですね。 tableコンテンツのフィルタリング用スクリプトです。プラグイン自体はとっても軽量で、導入も楽なのでなかなか使いやすい気はします。 こういうの。デモを用意しました。 尚、データはなんちゃって個人情報を利用させて頂いています。 $('.foo').multifilter()使い方もシンプル。上記のようにtableを指定。 <div class='filters'> <div class='filter-container'> <input autocomplete='off' class='filter' name='名前' placeholder='名前' /> </div> <div c

ecomm.designはECサイト専門のWebデザインギャラリーサイトです。単純にスタイルだけでなく、使用している解析ツールや決済サービス、A/Bテスト等に使用しているテクノロジーも紹介されています。プラットフォームも紹介されています。ギャラリーサイトとしてはちょっと珍しい感じですね。 ecomm.design

Awesome input focus effectsはinput要素にマウスフォーカスした際のエフェクトのまとめです。borderやbackground、placeholderをcss3と少しのjQueryコードでアニメーションエフェクトを付与しています。よくあるホバーエフェクトではなくフォームのフォーカス時なのでスマフォでも実用可能ですね。 Awesome input focus effects動作サンプル

Hamburgersは、ハンバーガーアイコンから別のアイコンにシフトする際にアニメーションエフェクトを加える為のCSSです。スマフォ等のUIではおなじみのハンバーガーアイコンから矢印やxアイコンなどに変える際にアニメーションエフェクトを加えやすくする、みたいなの。この手のはあまり使いませんけど楽といえば楽かもしれませんね。ライセンスはMITとの事です。 Hamburgers

CodeLabはBootstrapで使えるコードスニペットを集めているWebサイトです。jQueryの情報を配信するjqueryRainというWebサイトで作っているコンテンツのようです。スニペットは動作デモも用意されています。100近い量があるのでBootstrapを使っている方はご覧になってみては如何でしょうか。 CodeLab

PintsizeはシンプルでフレキシブルなRWD対応のCSSグリッドシステムです。flexboxを使ったグリッドシステムで特定のclassを付与する事でネストやボックスの配置を手軽に設定出来るようになっている様です。MITライセンスのもとでソースコードが公開されています。 Pintsize

bookizaはRWD対応の書籍具現化フレームワークです。ちょっとうまく説明できないのですが、よくあるPDFやePubビューア等ではなく、HTMLで書いたコンテンツを書籍のように扱えるようにするフレームワークです。予めテンプレートが用意されており、そのルールに従って書籍を作成するので、巷で一般的とされているWeb書籍とは少し異なるかもしれません。スマフォにも対応したページをめくるようなエフェクトや書籍の表紙/裏表紙の作成及び360度ビューアなどが特徴的でした。試みとしてはなかなか面白い気がします。ちょっと覚えておこう。ライセンスはMIT。 bookiza

WEB FIELD MANUALはWeb制作時に役立ちそうな様々な分野のリソースを大量にまとめたハブサイトです。Webデザインパ－トではインスピレーションやスタイル、ワークフローやツールボックスなどのリソースを、コーディングパートではビギナー向けの入門サイトやリファレンス、パフォーマンスやCSS、SVGやライブラリ等をまとめています。このWebサイト自体、一部の色覚異常の方には見にくそうなカラースキームなので集められたリソースに若干の不安も無くはないですが・・暇な時にでもざっと見直すのも良いかもしれません。 WEB FIELD MANUAL

Creative TimはWebサイトのテンプレートやUIキット、スニペットを配布/販売するリソースサイトです。Bootstrap向けがやや多そうな印象ですね。ログインフォームや管理画面のテンプレートなどなど様々です。有料と無料があり、フィルタリングも可能です。個人的にはPAPER KITというUIキットが素敵でした。 Creative Tim

ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.jsのご紹介です。メールやソーシャルサイトなどで最近よく見かける、ファビコン通知バッジを実装します。 メールを受信したり、投稿があったらファビコンに数字を表示させる、というもの。アニメーションエフェクトもあるので目が行きやすいかも。対応ブラウザは若干限られます。 更新があると数値が増える。増える時にアニメーションで数値が変わる、みたいなの。動作デモはスクリプトの配布サイトで確認出来ます。 var favicon=new Favico({ animation:'slide' //アニメーションエフェクトの指定 }); favicon.badge(1);エフェクトは上記のようにセッティングします。 var favicon=new Favico({ bgColor : '#5CB85C',//背景色 te

WebPlatformTools.orgはWeb制作に役立ちそうな様々なツールをまとめているWebサイトです。カテゴリ分けもしっかりされていてサムネイルもあるので探しやすいかも。 WebPlatformTools.org

フラットでシンプルなデザインのアイコンを大量に配布しているIcons DBのご紹介。全て商用利用が可能で、帰属表示も不要との事です。サイズもかなりの種類で用意してくれているので、テイストが合うならいいかもですね。 フラットなデザインのアイコンを大量に配布してくれているサイト。著作権は以下のような感じらしいです。 All icons can be used freely in both personal and commercial projects with no attribution required, but always appreciated. 全てのアイコンは商用利用も可能で帰属表示も要らないそうですが、著作権を放棄したわけではないとの事なのでその辺だけご注意です。 使いやすそうなアイコンが沢山あります。カテゴリもかなり多い。 サイズも8種、フォーマットも4種揃っていて、色違い

CSS BeautifyはCSSを入力するだけで即時整形してくれるツール。SENCHAから提供されたソフトウェアです。 CSS Beautify

Wikipediaのように、ページ内の目次を自動で作成するWordPressのプラグイン・Table of Contents Plusのご紹介です。長いコンテンツが多いサイトでは結構便利なんじゃないかなと思います。セッティングも色々と出来ますよ。 Wikipediaライクなページ内の目次を作成するWPプラグイン。自動で見出しを探して目次を作ります。小見出し>孫見出しもネストしてくれます。 ↑ ページ内に見出しを自動生成します。投稿やカスタムポストタイプなどにも作れます。 ↑ セッティング項目はいろいろ。目次を表示/隠すでスイッチできたり、デザインをスタイルしたり。見れば大体分かると思います。 ↑ 何もレイアウト設定してないのでアレですが、このように自動作成されます。作成したくないページではショートコードで非表示にする事も出来ます。 ご利用は以下よりどうぞ。 Table of Content

タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox();使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a>マークアップもclassを振るだけ。 詳細は以下で確認できます Swipebox

よく見かける、Pinterestのようなレンガを積み重ねた感じのレイアウトを実装するためのスクリプトのご紹介です。既に先発スクリプトは沢山あるので選択肢の一つとして、という感じですね。 マルチカラムなグリッドレイアウトを構築する為のスクリプトです。jQueryに依存します。 このようにPinterestっぽいレイアウトをつくれるやつです。何度も似たようなものを紹介してきていますので珍しくは無いかもですけど・・ ウィンドウ幅に合わせて構成してくれます。 $('#foo').nested();使い方はいつも通りです。難しくないので詳細はソースをご覧下さいー Nested