Resource - コードスニペット

サンプルコード付きのUIをgifアニメーションにしてギャラリー形式で収集している・「CodeMyUI.com」

CodeMyUI.com CodeMyUI.comはサンプルコードも紹介しているUIチュートリアル記事等をGifアニメを使ってギャッリー形式でまとめているTumblrサイトです。参照元へのリンク、またはCodePenに投稿されたよさ気...

リダイレクトやセキュリティ、パフォーマンスの向上など、.htaccessで使えるスニペットをまとめている「.htaccess Snippets」

.htaccess Snippets .htaccess Snippetsは.htaccessで使える小技をまとめたスニペット集です。リダイレクトやリライト、セキュリティ向上やパフォーマンスの向上など、よく使うものをサクッとまとめてく...

Dribbbleに投稿されたデザインをCodopenで再現、比較している・「Give ’n’ Go」

Give ’n’ Go Give ’n’ GoはDribbbleに投稿されたものとCodepenで再現されたものを比較しているWebギャラリーサイトです。デザイナーの方がDribbbleに投稿したデザインコンセプトと、そのデザインをC...
Ads

jsfiddleライクにブラウザ上でJavaScriptの動作テストができるオープンソースのソフトウェア・「Codemagic」

Codemagic Codemagicはブラウザ上でJavaScriptの開発・動作テストを行えるツールです。jsfiddleと同じようなものですが、こちらはOSSとしてGithubにてソースが公開されています。ライセンスはMITとの...

OSSとして公開されている、正規表現の動作テストをブラウザ上で行えるツール・「RegExr」

RegExr RegExrはブラウザ上で正規表現のテストができるツールです。GithubにてOSSとしてもソースが公開されています。refiddleとほぼ同じ性能になりますが、RegExrの方が個人的には若干使いやすい印象でした。ライ...

jsFiddleのようにブラウザでJavaScriptを書いて動作を確認出来るOSS・「tmpltr」

tmpltr tmpltrはOSSで公開されているjsFiddleライクな開発ツールです。ブラウザ上でJavaScriptを開発、実行テストができます。完全なクローンではありませんが、JavaScriptとHTMLで作られている為、軽...

GitHub製のテキストエディタ・「Atom」

Atom AtomはGithub製のテキストエディタです。CSS、JavaScript、HTML向けのもののようですね。スクリーンショットや詳細を読む限りではなかなか良さそうです。TextMateのテーマ等をインポートする事もできるみ...

コードスニペットの共有サイトを構築する為のオープンソースソフトウェア・「canSnippet」

canSnippet canSnippetはコードスニペットを共有できるWebサイトを構築する為のOSSです。動作環境はPHP+SQLite+JavaScriptとの事。保存できるスニペットの対応言語はhtml、css、javascr...

.NETのコードスニペットをオンラインで動作テストできる・「.NET Fiddle」

.NET Fiddle .NET Fiddleはオンラインで.NETのコードスニペットをテストできるツールです。JSFiddleをリスペクトして作ったそうです。言語はC#とVB.netに対応しています。手軽にテストできるのは嬉しいです...

アニメーションエフェクトの掛かったフォントと実装コードを公開しているWebギャラリー・「Anitype」

Anitype Anitypeはアニメーションするフォントを実装する為のコードを募集、公開している参加型のWebギャラリーです。文字ごとに複数投稿されており、様々なタイポグラフィーを参考にする事が出来ます。フォントごとのタイポグラフィ...

Flashを使わずに実装しているプリローダーアニメーションのギャラリー・「Preloaded」

Preloaded PreloadedはFlashを使わずに実装しているプリローダーのアニメーションを収集しているTumblrです。他サイトの例や、Codepenで書かれたモノなどがありますので一部のプリローダーはコードも参考に出来ま...

ChromeやFiredoxなどのデベロッパーツールのコンソールで使えるスニペットをまとめた・「DevTools Snippets」

DevTools Snippets DevTools Snippetsは、ChromeやFirefoxなどのデベロッパーツールのコンソールで使えるスニペットをまとめているプロジェクトサイト。画像をData URI schemeに変換し...

Gistに書いたコードの管理が可能なソフトウェア・「Gisto」

Gisto GistoはGistのコードスニペットを管理するためのソフトウェアです。Gistoでコードを変更するだけで自動的にGist上のコードも更新されます。OSもWin、Mac、Linuxに対応しています。手軽に使えるのでスニペッ...

CSS3を手軽に試せるジェネレーター・「CREATE CSS3」

CREATE CSS3 CREATE CSS3は手軽にCSS3を試せるツールです。数値を入力すると、要素に反映され、コードも表示してくれます。シンプルなのでちょっと試したい、という時は便利かもしれません。 CREATE CSS3

コードスニペットを管理する為のシンプルなCMS・「codejab」

codejab codejabはコードスニペットを管理する為のシンプルなCMS。オープンソースとして公開されています。たまに見かけるスニペットの共有サイトを作れる、みたいなイメージでしょうか。Embed機能も付いてるのはちょっと素敵か...

CSSで装飾されたチェックボックスのコードをダウンロード出来る・「CSS Checkbox」

CSS Checkbox CSS CheckboxはCSSで装飾されたチェックボックスのソースコードをダウンロードできるサービスです。Checkbox CSS Styleで装飾の種類を選択してソースをコピペするだけ。ラベルの背景の画像...

SASS/Compassで構築されたCSSボタンライブラリ・「Buttons」

Buttons ButtonsはSASS/Compassで構築されたCSSボタンのプロジェクトです。classを振るだけで様々なボタンに装飾する事が出来る様になっています。Font Awesomeを使ってアイコンを加えたりCSS3でぼ...

CSSのみで書かれたアイコンのセット・「CIKONSS」

CIKONSS CIKONSSはCSSのみで書かれたアイコンのソースを配布するWebサイトです。IE8までなら同じ表示が可能のようです。アイコンの種類もそれなりにあるみたい。実用性は置いておいて、どこかでコードが役に立つかもしれないと...

Gistに書いたコードを管理するアプリ・「GistBox」

GistBox GistBoxはGistに書いたコードを管理、編集しやすくする為のアプリケーションです。インストールして認証を終えれば起動します。見やすいレイアウトでラベルによるソートも可能です。結構便利。 GistBox

JavaScript、HTML,CSSを書いてその場で動作確認出来る環境を作れるOSS・「Editr」

Editr Editrは、ブラウザでJavaScriptやHTML、CSSを動作確認出来るオープンソースのソフトウェアです。jsfiddleライクな環境を作成出来ますが、ユーザー登録、保存、Gist等に送るなどの機能の無い、シンプルな...

正規表現をブラウザ上で実行テスト・「refiddle」

refiddle refiddleはWeb上で正規表現をテストできるツールです。jsfiddleライクに正規表現を試すことが出来ます。上にコード、下にテキストを書いて、マッチした部分がハイライトされる仕組み。 refiddle

CSSを書いてリアルタイムでプレビューできる・「CSSDesk」

CSSDesk CSSDeskはその場でCSSを書くと、すぐに結果が反映されるインタラクティブなWebツールです。背景の変更や書いたコードをHTMLでダウンロードする事も可能。 CSSDesk
Ads