任意の要素にマウスの動きに合わせてパララックス効果を表現出来るスクリプト・「Tilt」 Tilt Tiltは任意の要素にパララックス効果を与えられるスクリプトです。jQueryに依存しますので軽量なスクリプトとは言えないかもですが、本スクリプト自体は圧縮版で1.45kbほどのようです。オプションもいろいろ揃えられていまし...2017.02.04 | 10時37分46秒
Pinterest風でレスポンシブWebデザイン対応のレイアウトを作れてドラッグで位置移動やソートも出来るスクリプト・「MUURI」 MUURI MUURIはPinterestライクなレイアウトを構築出来るスクリプトです。MUURIという名はフィンランドの言葉で壁を意味するそう。レスポンシブWebデザインにも対応しており、任意のキーワードでソートも可能。Hammer...2017.02.03 | 10時19分47秒
地図と連動して任意のテキストや画像をスライド表示するスクリプト・「StoryMapJS」 StoryMapJS StoryMapJSは地図と連動して任意のテキストや画像をスライド式に表示できるスクリプトです。地図はOpenStreetMapが使われ、ストーリー形式でスライドを作成する事ができる、というもの。地図にはアイコン...2017.02.02 | 9時54分30秒
よく出来たHTMLメールを紹介するデザインギャラリー・「Really Good Emails」 Really Good Emails Really Good Emailsは出来の良い企業のHTMLメールを紹介するデザインギャラリーです。レスポンシブなHTMLメールを紹介しています。SSのみではなく、コードをCodePenで書いて...2017.02.01 | 10時38分30秒
スクロールに合わせてナビゲーションに現在地を明示するスクリプト・「Progress Nav」 Progress Nav Progress Navはスクロールとともにナビゲーションに現在地を明示するスクリプトです。上の動作サンプルのようにスクロールに合わせてナビゲーションに用意したバーが動いて現在地を教えてくれる、というもの...2017.01.31 | 10時30分17秒
レスポンシブWebデザイン対応の棒グラフ、折れ線グラフ、円グラフを作れる・「Pizza Amore!」 Pizza Amore! Pizza Amore!は様々なデバイスで折れ線グラフや円グラフ、棒グラフ等を表示出来るスクリプトです。Foundationを提供するZURBが開発、公開しています。マークアップは簡単なリストにカスタムデータ...2017.01.30 | 10時30分47秒
Bootstrapベースで作られたオープンソースの管理画面UIフレームワーク・「CoreUI」 CoreUI CoreUIはBootstrapベースのUIフレームワークです。レスポンシブな管理画面の基礎を用意してくれており、開発スピードを補うものとして公開されています。各コンポーネントも揃えられており、キレイめで見やすい印象でし...2017.01.29 | 10時01分40秒
レスポンシブなEメール向けのCSSフレームワーク・「Foundation for Emails」 Foundation for Emails Foundation for EmailsはRWD対応のHTMLメール用フレームワークです。名前の通り、多数の方に愛用されるCSSフレームワーク、Foundationを提供するZURBが公開...2017.01.28 | 10時25分21秒
ブラウザでSVGを編集、ダウンロード出来るWebサービス・「Vecteezy Editor」 Vecteezy Editor Vecteezy EditorはブラウザでSVGを編集、ダウンロード出来るWebサービスです。操作も簡単でわかりやすい印象です。本ツールは、無料のベクター素材を配布するvecteezyが提供しているWe...2017.01.27 | 10時46分06秒
さまざまなタイプのチャートの特徴や用途、目的など、使い方を解説してくれる・「Chartopedia」 Chartopedia Chartopediaはいろいろなタイプのグラフの使い方を解説してくれるWebサイトです。本サイトはインタラクティブなチャートライブラリを提供するAnyChartが公開した情報で、棒グラフや円グラフ、ドットチャ...2017.01.24 | 10時01分27秒
WordPressに関するツールやリソース等をコレクションしているキュレーションサイト・「WordPress Stash」 WordPress Stash WordPress StashはWordPressに関わるツールやリソース、テーマやプラグインの開発情報等をキュレーションしているWebサイトです。よくあるキュレーションサイトと同じ構造で、カテゴリに分...2017.01.23 | 10時31分28秒
小規模チームで使うことを想定したオープンソースのシンプルなWiki・「Matterwiki」 Matterwiki Matterwikiは小規模なチームで使うことを想定したシンプルなWikiソフトです。先発のWikiソフトは小さなチームで使うには複雑すぎて使いにくいと考え、少人数で使いやすいシンプルなWikiツールの設計を目指...2017.01.22 | 10時21分07秒
過去に存在したページが404等を返した際に、Internet Archiveへ誘導してくれるChrome拡張・「Wayback Machine」 Wayback Machine Wayback Machineは過去に存在したページが404や503、500などのエラーを返してきた際に、Internet Archiveに誘導してくれるChromeエクステンションです。Interne...2017.01.21 | 10時26分07秒
Photoshopのツールやリソースを公開する・「UberPlugins」 UberPlugins UberPluginsはPhotoshopのプラグインを紹介するWebサイトです。まぁいわゆるプラグイン販売サイトなんですが、無料のものもちらほらあったので紹介してみます。公開されているプラグインはアバター挿入...2017.01.19 | 10時14分48秒
BootstrapとUnderscoresを組合せたモバイルファーストなWordPressテーマフレームワーク・「UnderStrap」 UnderStrap UnderStrapはBootstrapとUnderscoresを組合せたモバイルファーストなWordPressテーマフレームワークです。UnderscoresはAutomattic社の社員さんが開発、公開してい...2017.01.18 | 10時02分03秒
商用でも無料で使える顔写真を提供するプロジェクト・「TinyFaces」 TinyFaces TinyFacesは商用でも無料で使える人物顔写真を提供するプロジェクトです。目的に賛同してくれる方から提供してもらった顔写真、性別等を、JSONで提供してくれています。顔写真はFacebookで設定されているアバ...2017.01.17 | 10時26分22秒
フルスクリーン動画からスムーズにスマフォのモックアップに移行するイントロテンプレート・「Immersive Video Template」 Immersive Video Template Immersive Video Templateはcodyhouseで紹介された、動画を使ったWebサイトのイントロのサンプルです。フルスクリーン動画で始まり、スムーズにスマフォのモッ...2017.01.14 | 10時38分02秒
Webページとして公開もできるjsfiddleライクなコードテストツール・「PLAYCODE」 PLAYCODE PLAYCODEはWebページとして公開もできるjsfiddleライクなコードテストツールです。jsfiddleのようにHTML、CSS、JavaScriptをブラウザで動作テストできる、というツールですが、本ツール...2017.01.09 | 10時25分04秒
いろいろなスタイルのボタンを実装出来るスタイルシート・「bttn.css」 bttn.css bttn.cssはいろいろなスタイルのボタンを実装出来るスタイルシートです。種類はそこまで多くないですが、それぞれのボタンは最小、小、中、大の太さが用意されており、ブロック要素/インライン要素、5色のカラーが用意され...2017.01.05 | 10時13分47秒
CSSで作る様々なメニューを大量にまとめた・「110 CSS Menu」 110 CSS Menu 110 CSS MenuはCSS(と、少しのJavaScript)で作るメニューを大量にまとめたWebページです。110個あるかは明記されてないし数えてもないので分かりませんが、読み込みがやたら重いので結構な...2017.01.04 | 10時13分12秒
ブラウザでアニメーションや簡単なゲーム等を作成出来るOSS・「Wick」 Wick Wickはブラウザでアニメーションや簡単なゲーム等を作成出来るエディタです。マルチメディアエディタというものだそう。デモがあるので詳細は本プロジェクトページにて。今日は大晦日ゆえ、簡単ですがこれで本年の更新は終わらせて頂きま...2016.12.31 | 10時58分29秒
軽量で非依存のパララックス実装スクリプト・「Rellax.js」 Rellax.js Rellax.jsは軽量で他ライブラリに依存しないパララックス実装スクリプトです。少し前に流行って今は割と普通に見かけるようになった視差効果のあるWebページの制作をサポートしてくれる、というもの。ファイルサイズは...2016.12.30 | 10時40分31秒