ピクセルアートを作成、CSSも吐き出す・「piCSSel-art」 piCSSel-art piCSSel-artはブラウザ上でピクセルアートを作成し、その絵を実装できるCSSも吐き出すツールです。GithubにてOSSとして公開されています。ツール自体は至ってシンプルなので大掛かりなピクセルアート向...2014.04.24 | 10時25分26秒
Bootstrapベースの管理画面向けテンプレート・「AdminLTE」 AdminLTE AdminLTEはBootstrap 3をベースとしたコンロールパネル向けのデザインテンプレートです。BootstrapベースなのでRWDにも対応しているのは楽でいいですね。サンプルをざっと見た感じは、かなり良くでき...2014.04.23 | 10時30分04秒
スマフォ向けWebアプリの為のシンプルなコンポーネント集・「Ratchet」 Ratchet Ratchetはスマフォ向けWebアプリの為のシンプルなコンポーネント集です。Bootstrapと同じ開発元で公開されていました。スマフォ専用のBootstrapなのかもしれないですね。基本的なものは一通り揃っています...2014.04.21 | 10時25分09秒
jsfiddleライクにブラウザ上でJavaScriptの動作テストができるオープンソースのソフトウェア・「Codemagic」 Codemagic Codemagicはブラウザ上でJavaScriptの開発・動作テストを行えるツールです。jsfiddleと同じようなものですが、こちらはOSSとしてGithubにてソースが公開されています。ライセンスはMITとの...2014.04.20 | 10時37分57秒
CSSのみで作られたUIコンポーネント集・「Pure CSS Components」 Pure CSS Components Pure CSS ComponentsはCSSのみで作られたUIコンポーネント集です。タブやモーダルウィンドウ、カルーセル、アコーディオン、ドロップダウンメニューなどの実装コードが紹介されていま...2014.04.17 | 9時46分38秒
スピード構築に拘ったRWD対応のグリッドシステム・「Jeet」 Jeet Jeetは高速構築を目指したレスポンシブWebデザイン対応のCSSグリッドシステムです。柔軟性、使いやすさを重視した、との事。SASSにも対応しています。使いやすいかどうかは個人差があるでしょうけど、個人的には良さそうな印象...2014.04.15 | 10時05分56秒
CSSで書かれたフラットデザインなiPhoneやiPad・「devices.css」 devices.css devices.cssはフラットデザインなiPhoneやiPadをCSSで書くためのコードです。シンプルで見やすいので、モニタ部分に画像をはめ込んでモックアップにしたりもできそうですね。利用シーンは多くはないで...2014.04.11 | 10時52分52秒
CSS3によるユニークなホバーエフェクトをまとめた・「iHover」 iHover iHoverはCSS3によるユニークなアニメーションホバーエフェクトをまとめて、パックにして配布するWebサイト。サークルタイプで20種類、スクエアタイプで15種類のエフェクトとソースが紹介されています。CSS3なので使...2014.04.10 | 10時19分22秒
WebベースのiOS7アプリ向けHTMLフレームワーク・「Framework7」 Framework7 Framework7はWebベースのiOS7アプリ向けに開発されたHTMLフレームワークです。iOS7のようなフラットなデザインで各UIコンポーネントもiOS7を意識した作りとなっています。ライセンスはMITとの...2014.04.02 | 10時32分19秒
Flexboxを使ったCSSグリッドシステム・「Flexbox Grid」 Flexbox Grid Flexbox GridはCSS3のFlexboxを使用したRWD対応のグリッドシステムです。flexible boxを使う事により、軽量でシンプルな設計を実現できそうですね。対応ブラウザはCan I Use...2014.03.23 | 10時34分22秒
シンプルなプリローダーを実装するCSS・「(cs)spinner」 (cs)spinner (cs)spinnerはCSSのみで作るシンプルなプリローダーを実装するCSSです。CSSで描かれたエレメントをアニメーション表示させています。非常に軽量なので、少しでも軽くしたいモバイルサイト等に良さそうです...2014.03.21 | 11時48分01秒
レスポンシブWebデザイン対応のシンプルなHTMLメールのフレームワーク・「CERBERUS」 CERBERUS CERBERUSはRWD対応のシンプルなHTMLメールのフレームワークです。GmailやYahoo!メールからOutlookやThunderbird、iOSやAndroidのメールに対応可能です。レイアウトのみで装飾...2014.03.09 | 10時25分29秒
CSS3のkeyframesを容易に設定出来る・「CSS3 Keyframes Animation Generator」 CSS3 Keyframes Animation Generator CSS3 Keyframes Animation GeneratorはCSS3のkeyframesを容易に設定出来るツールです。数値を各項目に設定するだけでコードを...2014.02.23 | 10時15分24秒
複数のアイコンフォントから任意のアイコンを検索出来る・「GlyphSearch」 GlyphSearch GlyphSearchは複数のアイコンフォントから任意のアイコンを検索出来るWebサービスです。フォントはFont Awesome、Glyphicons、Ionicons、Iconicの4種で、この中から任意の...2014.01.31 | 10時43分13秒
Font Awesomeのアイコンフォントにアニメーションエフェクトを加える為のCSS・「Font Awesome Animation」 Font Awesome Animation Font Awesome AnimationはFont Awesomeのアイコンフォントにアニメーションエフェクトを加える為のCSSです。CSSを読み込んで指定されたclassを加えればア...2014.01.30 | 10時07分21秒
オープンソースの電子書籍作成フレームワーク・「Bookshop」 Bookshop BookshopはOSSで配布されている電子書籍作成フレームワークです。フォーマットはPDF、ePub、HTMLなどに対応しているみたい。ライセンスはMITとBSDです。詳細は本サイトでご確認下さい。 Book...2014.01.05 | 10時32分34秒
軽量でシンプルなCSSフレームワーク・「Bijou」 Bijou Bijouはシンプルで軽量なCSSフレームワークです。圧縮版で2KBほどと、かなり軽量化されています。グリッドレイアウトにも対応できますが、12カラムではなく10カラムで設計されていますね・・なんとなく珍しい気がしました。...2013.12.30 | 10時18分31秒
Intel®開発のHTML5/CSS3/JavaScript向けIDE・「XDK」 XDK XDKはIntel®が開発したIDEです。HTML5やCSS3、JSなどを使ったWebアプリを構築する方をターゲットとして開発したそうです。Windows7、8、Mac、Linuxで動作するとの事。 XDK2013.12.27 | 11時11分39秒
CSSで作られたアニメーションロードインジケーターのキット・「SpinKit」 SpinKit SpinKitはCSSによるアニメーションロードインジケーターのキット。Githubにてソースが公開されています。スマフォ用/一部ブラウザのみ対応のWebサイトのみになってしまいそうですがデザインもシンプルで動きも滑ら...2013.12.18 | 10時26分01秒
アニメーションエフェクトの掛かったフォントと実装コードを公開しているWebギャラリー・「Anitype」 Anitype Anitypeはアニメーションするフォントを実装する為のコードを募集、公開している参加型のWebギャラリーです。文字ごとに複数投稿されており、様々なタイポグラフィーを参考にする事が出来ます。フォントごとのタイポグラフィ...2013.12.15 | 10時45分29秒
送信ボタンにプログレスバーを表示させる・「PROGRESS BUTTON STYLES」 PROGRESS BUTTON STYLES PROGRESS BUTTON STYLESは送信ボタンにプログレスバーを表示させる、というスタイルです。たまに見かけたスタイルですが、ユーザーにとっても分かりやすくて素敵です。スタイルは...2013.12.14 | 11時36分25秒
モバイル向けのWebアプリ開発用に作られた軽量フレームワーク・「Zoey」 Zoey Zoeyはスマフォ向けのWebアプリの開発用に作られた軽量なフレームワークです。zepto.jsに依存しています。HTML5とCSS3ベースで各種コンポーネントが揃えられています。ライセンスはMITです。 Zoey2013.12.11 | 10時27分08秒