40種以上の画像のマウスホバーエフェクトを使いやすくまとめたスタイルシート・「imagehover.css」
imagehover.css imagehover.cssは画像のホバーエフェクトをclass付与などで手軽に扱えるようにしたスタイルシートです。上記のように画像にマウスを乗せた際のエフェクトを40種以上まとめて一つのCSSにしたもの...
Resource - Webデザイナー向け
UI / UXデザイナー向けの、紙にデバイスの形状を印刷する為のテンプレートのまとめ・「Sketchsheets」
Sketchsheets Sketchsheetsはモバイルやタブレットデバイスの形状を印刷するためのテンプレートです。UI/UXデザイナー向けに作成したそうで、スケッチ等の為に紙にタブレットやモバイルデバイスを用紙に印刷出来るように...
スマフォアプリのUIを動画で紹介するシンプルなギャラリーサイト・「Appealing」
Appealing AppealingはスマフォアプリのUIを動画で紹介しているWebデザインギャラリーです。Tumblrで更新、その場で動画の閲覧が可能です。一応タグで分けられていますが、そこまでしっかりカテゴライズされている訳では...
オープンソースのフォントを厳選して収集、公開している・「open-foundry.com」
open-foundry.com open-foundry.comはOSSとして公開されているフォントをプロの目で厳選、収集しているWebサイトです。ノイズの無いオープンソースのフォントプラットフォームを目指しているそうで、選ばれたフ...
製品等のデータ比較のためのtable要素にフィルタ機能を付与する・「Products Comparison Table」
Products Comparison Table Products Comparison Tableはよくある製品情報の比較tableにフィルタ機能を付与するためのコードです。上記のようなUI。比較対象が沢山ある場合、ユーザーが任意...
リストやテーブルにフィルタリング機能やソート、検索機能を付与するスクリプト・「List.js」
List.js List.jsは既存のHTMLリストやテーブルに検索やソート、フィルタリング機能を付与するスクリプトです。他スクリプトを追加する事になりますが、ページネーションにも対応しているみたいです。他ライブラリに依存せず、シンプ...
VSCOのようなフィルターを実装する為のスタイルシート・「CSSCO」
CSSCO CSSCOはスマフォの写真加工/共有アプリ、VSCOで出来るようなフィルターを画像にかけるためのスタイルシートです。InstagramのフィルタをかけられるCSSGramにインスパイアされたらしく、そのVSCO版を作成した...
メニュー等で利用されるハンバーガーアイコンから別のアイコンにアニメーションしながら変化させる為のCSS・「Hamburgers」
Hamburgers Hamburgersは、ハンバーガーアイコンから別のアイコンにシフトする際にアニメーションエフェクトを加える為のCSSです。スマフォ等のUIではおなじみのハンバーガーアイコンから矢印やxアイコンなどに変える際にア...
レスポンシブWebデザインにも対応した、APIのドキュメント作成キット・「Slate」
Slate SlateはAPIのドキュメントを作成する為のテンプレートです。RWD対応で、基本的には目次、説明、サンプルコードの3カラム構成になっているようです。このタイプの仕様書が個人的には一番見やすいです。ナビゲーションもよく見か...
Bootstrapで使えるコードスニペットを集めている・「CodeLab」
CodeLab CodeLabはBootstrapで使えるコードスニペットを集めているWebサイトです。jQueryの情報を配信するjqueryRainというWebサイトで作っているコンテンツのようです。スニペットは動作デモも用意され...
シンプルでフレキシブルなCSSグリッドシステム・「Pintsize」
Pintsize PintsizeはシンプルでフレキシブルなRWD対応のCSSグリッドシステムです。flexboxを使ったグリッドシステムで特定のclassを付与する事でネストやボックスの配置を手軽に設定出来るようになっている様です。...
WordPressの管理画面をクリーンでシンプルなスタイルに変更するプラグイン・「Slate Admin Theme」
Slate Admin Theme Slate Admin ThemeはWPの管理画面のスタイルをシンプルでクリーンなスタイルに変更してくれるプラグインです。上記のようなスタイルになります。公式とあまり変わらないように見えますが、メニ...
Semantic UIライクなスタイルのBootstrapテーマ+コンポーネント集・「Semantic UI Bootstrap」
Semantic UI Bootstrap Semantic UI BootstrapはSemantic UIライクなスタイルのBootstrapテーマと、そのコンポーネント集です。Semantic UIのスタイルをBootstrap...
ピクセルアートを描けてCSSで作れるコードも排出してくれるオープンソース・ソフトウェア・「Pixel Art to CSS」
Pixel Art to CSS Pixel Art to CSSはピクセルアートを描けてCSSコードも排出してくれるOSSです。エディタでピクセルアートを作って、そのピクセルアートを実装出来るCSSを提供してくれる、というもの。以前...
CSSのみで上からスライドダウンする開閉コンテンツを作る・「Headermessage」
Headermessage HeadermessageはCSSのみで開閉コンテンツを作るスタイルシートです。よくある上からスライドダウンするやつをCSS3を使って実現しよう、というもの。上記デモはこのページではうまく動かせないかも...
tableにフィルタ機能+αを加えるスクリプト・「TableFilter」
TableFilter TableFilterは任意のtableにフィルタ機能を加えるスクリプトです。他、ページャ、ソート、列の計算機能など機能の追加も出来るみたい。フィルタは任意のキーワードだけでなく、selectで対象を選べるよう...
食品関係の写真素材をCC0ライセンスで提供するフード専門のストックフォトサイト・「FOODSHOT」
FOODSHOT FOODSHOTは食品専門の写真素材配布サイトです。パスタや卵、ドリンクからスイーツまであらゆる食品の素材が提供されています。提供、といっても、こちらはあくまでキュレーションサイトらしく、CC0で且つフード関係の写真...
Flexboxを使ったUIのサンプルコードを紹介する・「Flexbox Patterns」
Flexbox Patterns Flexbox PatternsはFlexboxを使ったUIパターンをコードと共に紹介するWebサイトです。display:flexプロパティを使って何が出来るのか、使い方や実際にUIとして実装するコ...
Markdown記法で書けるライトなOSSブログエンジン・「nemex」
nemex nemexはMarkdown記法に対応のライトに使えるブログエンジンです。OSSとして公開されています。PHP製で、DBは不要、Markdown記法でコンテンツを更新する事が出来ます。勿論スマフォからでも利用可能です。まだ...
コーディング不要でWebサイトのテンプレートを作成する為のオープンソースソフトウェア・「GrapesJS」
GrapesJS GrapesJSはコーディングせずに直感でWebサイトのテンプレートを作成出来るエディタです。OSSとしてソースコードが公開されています。JS製でjQueryにのみ依存しています。必要なコンテナやテキスト、画像等をマ...
軽量でカスタマイズ性を重視したCSSフレームワーク・「Reindeer.css」
Reindeer.css Reindeer.cssは軽量でカスタマイズ性を重視したCSSフレームワークです。まだ触っていませんがパッと見、UIもシンプルでよさ気ですね。現在は必要なコンポーネントが若干不足しているものの、後で追加するそ...
ブラウザで動くスプレッドシートの為のスクリプト・「jQuery.sheet」
jQuery.sheet jQuery.sheetはブラウザで動くスプレッドーシートの為のスクリプトです。jQueryに依存しており、OSSとして公開されています。HTML、JSON、XMLもサポートされています。他にもこの手のものは...