Twitter公開の絵文字のtwemojiをFont Awesomeライクに使える・「Twemoji Awesome」 Twemoji Awesome Twemoji AwesomeはTwitterがOSSとして公開している絵文字、twemojiをFont Awesomeライクに使えるようにする為のプロジェクトです。カナダに在住されている日本の方(El...2016.09.07 | 9時59分16秒
CSSをショートハンドにしてくれるジェネレーター・「SHRTHND」 SHRTHND SHRTHNDはCSSをショートハンドにしてくれるジェネレーターです。ショートハンドにする事で軽量化、可読性の向上に繋がります。左カラムにコードを入力すれば右カラムにショートハンドにしたCSSショートハンドが出力されま...2016.09.03 | 10時33分08秒
モバイルサイトの為の軽量でフレキシブルなCSSフレームワーク・「Mobi.css」 Mobi.css Mobi.cssはモバイルサイトの為のCSSフレームワークです。よくあるモバイルファーストよりもよりモバイルにフォーカスして作成されているようで、PCサイトではQRコードを表示するスペースを用意出来るclassが用意...2016.09.02 | 10時32分31秒
小規模なプロジェクトのための軽量でミニマルなCSSフレームワーク・「Siimple」 Siimple Siimpleは軽量、ミニマルなレスポンシブWebデザイン対応のCSSフレームワークです。フロントエンド開発のキックスタートに貢献出来るように作成したそう。フォームやテーブル、アラート、ボタンやグリッドなど必要最低限の...2016.08.31 | 10時45分38秒
基本的な部分だけ抑えたモダンでミニマルなCSSリセット・「minireset.css」 minireset.css minireset.cssは基礎部分だけ抑えたモダンなCSSリセットです。各見出しのフォントサイズのリセット、ブロック要素のmargin、paddingリセット、全要素へのbox-sizingの導入、各メデ...2016.08.29 | 10時14分38秒
Web制作のスピードを早める為に作られたモジュール式の軽量CSSフレームワーク・「BlazeCSS」 BlazeCSS BlazeCSSはモジュール形式のモバイルファーストなCSSフレームワークです。Web製作スピードを早めるために設計、公開されたそう。各コンポーネントは必要なものだけ該当のCSSを読み込むモジュール式でモノリシックな...2016.07.30 | 10時41分54秒
Webサイトのテキストのスタイルを作成、CSSでダウンロードできる・「Type Nugget」 Type Nugget Type NuggetはWebサイトのテキストを直感的なUIでスタイル、CSSをダウンロードできるWebアプリです。見出しやパラグラフ、リスト、リンクなどのテキストスタイルを設定、CSSをジェネレートしてくれる...2016.07.15 | 10時32分28秒
カルーセルやアコーディオン、ドロップダウンメニューなどをCSSのみで実装するコードを集めた・「You Don’t Need JavaScript」 You Don't Need JavaScript See the Pen Without JavaScript Carousel by SitePoint (@SitePoint) on CodePen. You Don't Ne...2016.07.10 | 9時47分51秒
要素をシェイクさせるスタイルシート・「CSShake」 CSShake CSShakeは要素にシェイクするようなエフェクトを付与するスタイルシートです。小刻みに震えたり大きく揺れたり縦揺れ、横揺れなどいろいろ用意されていますが、これらのエフェクトをclassで管理しよう、というもの。多用す...2016.07.09 | 11時14分49秒
UIコンポーネントに特化したCSSフレームワーク・「modulr.css」 modulr.css modulr.cssはUIコンポーネントに特化したCSSフレームワークです。多彩で豊富なカラーパレット、テキストの装飾、細かく設定できるグリッド、様々な種類のナビゲーション、各シーンに対応出来るボタンスタイル、フ...2016.07.08 | 9時54分16秒
いろいろなオプション付きのツールチップ作成CSSライブラリ・「Tootik」 Tootik Tootikは色々なオプション付きのツールチップ実装CSSライブラリです。CSSのみでツールチップを作成、オプションとして位置の設定や「成功」「注意」などの通知用、表示遅延、テキストの複数行、矢印の有無、フェードエフェク...2016.07.05 | 11時17分25秒
Electronアプリの為のOSXライクなUIフレームワーク・「Photon」 Photon PhotonはElectronで作られたアプリのためのデザインフレームワークです。OSX風に作られているようです。Electronは御存知の通りGithub製でHTML,JS,CSSで作れるクロスプラットフォームなデスク...2016.06.25 | 11時12分28秒
モバイルフレンドリーで軽量、シンプルなCSSフレームワーク・「Wing」 Wing Wingはモバイルフレンドリー且つ軽量シンプルなCSSフレームワークです。RWD対応で圧縮版4kbと軽量、グリッドやボタン、フォームやリストなどのUIが揃えられています。ライセンスはMIT。よくあるフレームワークですが、個人...2016.06.15 | 9時35分36秒
Bootstrap 4ベースのすっきりしたデザインな管理画面向けテーマ・「Modular Admin」 Modular Admin Modular AdminはBootstrap 4ベースの管理画面テンプレートです。すっきりしたデザインで見やすい印象でしたのでメモ。ボタンやカード、アイコン、テーブルやチャートなどのUIも揃っています。ラ...2016.06.11 | 11時11分02秒
CSSアニメーションのループ間にdelayを挿入してくれるWebツール・「WAIT! Animate」 WAIT! Animate WAIT! Animateはkeyframesを使ったCSSアニメーションでループに待機時間を指定して挿入、CSSコードを吐き出してくれるWebサービスです。delayさせたい時間を入力すればパーセンテージ...2016.06.07 | 10時19分21秒
レスポンシブWebデザインにも対応のシンプルで軽量なCSSグリッドシステム・「Pills」 Pills PillsはRWD対応のシンプルで軽量なグリッドシステムです。4kbほどのファイルサイズでモバイルファーストな設計となっています。よくあるフレームワークのような.col-md-6といったclass名が分かりやすいとは思えな...2016.06.06 | 9時43分04秒
Webアプリの為に設計されたシンプル軽量なCSSフレームワーク・「Vital」 Vital VitalはWebアプリケーションの為に開発されたCSSフレームワークです。Webアプリの開発を妨げないように、極力軽量(CSS自体は圧縮版で6KB、アイコンフォントは2KB分用意されています。)に、JavaScriptは...2016.06.04 | 10時30分00秒
Bootstrapの代替として作られたコンパクトなCSSフレームワーク・「Cutestrap」 Cutestrap CutestrapはコンパクトなBootstrap代替CSSフレームワークです。肥大化したBootstrapをもっとコンパクトに、というニーズはよく見かけますので結構この手のCSSは出回っていますが、本フレームワー...2016.05.22 | 9時57分02秒
checkboxにアニメーションエフェクトを付与するCSS・「Checkbox.css」 Checkbox.css Checkbox.cssはcheckboxにアニメーションエフェクトを付与する為のスタイルシートです。上図のようにチェックを入れるとボックスがアクションを起こす、というもの。通常のWebサイトのお問い合せフォ...2016.05.21 | 9時40分57秒
レスポンシブWedデザイン対応のシンプルで軽量なグリッドレイアウト・「Simple Grid」 Simple Grid Simple GridはRWD対応のCSSグリッドレイアウトです。シンプルで軽量、ネストにも対応しています。これといった機能はなく、シンプルさ、軽量さを重視していますので一から構築するフレームワークとは異なり、...2016.05.15 | 10時35分20秒
スタイリッシュなBootstrap向け管理画面テンプレート・「Blur Admin」 Blur Admin Blur AdminはBootstrapベースの管理画面テンプレートです。jQuery及びAngularJSをサポートしており、管理画面に必要なUIは一通り揃えられている印象です。チャートライブラリはamChar...2016.04.22 | 10時31分23秒
input要素にフォーカスした際のアニメーションエフェクトをいろいろまとめた・「Awesome input focus effects」 Awesome input focus effects Awesome input focus effectsはinput要素にマウスフォーカスした際のエフェクトのまとめです。borderやbackground、placeholder...2016.04.21 | 9時49分39秒