venn.jsはベン図・オイラー図を描くためのJavaScriptライブラリです(参照:ベン図・オイラー図)。D3.jsに依存しています。上図のように、複数の集合同士の関係や範囲を視覚的に図式化は勿論、各円とその共通部分の数値をツールチップで表示する事が可能です。ライセンスはMITとの事。 venn.js
![ベン図やオイラー図を作成出来るライブラリ・「venn.js」](https://cdn-ak-scissors.b.st-hatena.com/image/square/3818b643b77aaf5f72a83bce26ea3970ed70d23b/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2015%2F08%2Fvennjs01.jpg)
venn.jsはベン図・オイラー図を描くためのJavaScriptライブラリです(参照:ベン図・オイラー図)。D3.jsに依存しています。上図のように、複数の集合同士の関係や範囲を視覚的に図式化は勿論、各円とその共通部分の数値をツールチップで表示する事が可能です。ライセンスはMITとの事。 venn.js
jsGridはデータグリッドを実装する為の軽量スクリプトです。jQueryに依存しています。データテーブルのセル内のデータ編集やソート、ページングにも対応しています。スタイルコンポーネントのカスタマイズもし易いように設計したとの事。シンプルで良さ気です。ライセンスはMIT。 jsGrid動作サンプル
フラットでシンプルなデザインのアイコンを大量に配布しているIcons DBのご紹介。全て商用利用が可能で、帰属表示も不要との事です。サイズもかなりの種類で用意してくれているので、テイストが合うならいいかもですね。 フラットなデザインのアイコンを大量に配布してくれているサイト。著作権は以下のような感じらしいです。 All icons can be used freely in both personal and commercial projects with no attribution required, but always appreciated. 全てのアイコンは商用利用も可能で帰属表示も要らないそうですが、著作権を放棄したわけではないとの事なのでその辺だけご注意です。 使いやすそうなアイコンが沢山あります。カテゴリもかなり多い。 サイズも8種、フォーマットも4種揃っていて、色違い
JSライブラリのまとめサイトの ご紹介。既知の方も多いかもし れませんが、探すのに便利なの で改めてご紹介します。カテゴ リ分けもしてくれているので探 しやすいです。 様々なJSライブラリがまとめられています。探し物がある際は覗いてみるといいかも。 UIやメディア、グラフィック、ユーティリティなどのカテゴリに分けられています。現在は900ほどのライブラリがまとめられています。 シンプルで探しやすいのではないかと思います。ライブラリはそれぞれ簡単な説明もしてくれています。 パッと見たところ、評価の高い印象のライブラリに絞ってくれている・・・気がしました。(気がするだけかも 困ったら覗いてみようと思います。 Jster
jQueryをうまく取り入れた良デザインなWebサイトを収集しているデザインギャラリー・Best jQueryのご紹介。jQueryを使用するWeb制作者さんには、インスピレーション向上だけでなく、コードやUIも参考になるかもですね。 普通にWebデザインギャラリーとしても良さそうですが、jQueryを使用している、という共通点を持っていますのでそちらの面でも参考に出来そうです。 jQueryを利用している良デザインなサイトを収集しています。AWWWARDSで見かけるようなサイトが多い印象です。 以下のようなWebサイトが紹介されています。 Tatchies EVB Nerisson 他にもいろいろ。100サイトほど紹介されています。 Webサイトのコンテンツでのカテゴリ分けしかされていないのでギャラリーの機能としては探すのに少し弱いかもですけど、選択肢の一つとしてはありじゃないかなと思い
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
使いそうだったので備忘録。Facebook で恐らく最も利用されてると思われる ソーシャルプラグインのLikeboxと似た ようなものを、Twitterアカウントで 作成するjQueryプラグインです。デザ イン的にもバランスが取れるので覚え ておいて損は無いのでは。 と言うわけでLikeboxライクなTwitterウィジェットです。自身のアカウント、フォローボタンと、フォロワーさんのアイコンを表示する事が出来ます。 よく見かけるアレのTwitter版です。以下サンプル。 Sample 一部日本語に変えました。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script src="jquery.followb
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
CSS-TRICKSが公開している CSS3 Button Makerを構成し ているファイルが丸ごと配布 されています。ちょっと驚きで した。HTML+JSで作られてい たんですね・・ CSS-TRICKSが公開している CSS3 Button Makerを構成し ているファイルが丸ごと配布 されています。ちょっと驚きで した。HTML+JSで作られてい たんですね・・ PHPSPOTさんの記事やはてブに上がっていたので存在は知っていましたが、無料で配布されてるとは思いませんでした。DLすればブラウザだけでCSS3のボタンを作成出来ますよ。 JavaScriptとHTMLだけで作ってたんですね・・・まるっと配布されていますのでいつでも誰でも使用できますね。
分かりやすいタイトルが思い浮かばない ので適当な感じになりましたが。jQuery UIのデザインをちょっと今風に変更した サンプルが配布されていたので備忘録。 jQuery UI、凄く機能的で良いんですが、 用意されているデザインが若干使いにく いんですよね。 jQuery UIのデザインを変更するやつです。正直、公式で用意してくれているデザインは沢山あるんですが、どれも少々使いにくい感じなので自分で作るしか無いわけですが、結構面倒です。 で、今日紹介するサンプルはBootstrapっぽい感じで割りと使いやすいのではないかと思ってメモがてら記事にします。 Selene こんな感じ。以下動作サンプルです。 Sample 使い方は変わらないです。CSSだけSeleneっていうのを使えばいいだけ。 <link type="text/css" href="ui-selene/jquery-ui-1
使えそうだったので参考にしました。 JavaScriptを使わず、CSSのみで動作 させるレスポンシブWebデザイン対応 のコンテンツスライダーのサンプル です。軽量化にも繋がりそうですね。 CSSのみで作られたレスポンシブなコンテンツスライダーです。これはちょっと覚えておきたい。 ちょっとこの発想は無かったですけど、確かに簡単なコンテンツスライダーならCSS3使えばJSはいりませんし、そのままレスポンシブWebデザインに対応させれば、あとはCSS3が使えないブラウザ向けにjsを書くだけ、という手もありますね。 以下サンプルです。レスポンシブWebデザイン対応の確認はresponsivepxでどうぞ。 Sample ※responsivepxで簡単に確認出来ます。 jsfiddle iPhoneのキャプチャ ナビゲーションのサイズはモバイルの際は大きくしないとですね。 まず、スライドの作成
ちょこちょこ見かけるので最近に なって見かけた、ゲーム感覚で 楽しく学べるWebサービス的なもの をご紹介。Webアプリのアイデア の参考にもなればなぁとの気持ち も込めて。 ゲーム感覚で学べる、みたいなWebサービスは昔からありますので、ここ最近見かけたものを中心に少しまとめてみます。暇つぶししながら学べるって考えるとお得かもしれませんね。 Web制作に関わるものが中心です。 Kern Type カーニングをゲーム感覚で楽しく学べます。ドラッグで文字詰めしてください。 Kern Type Shape Type ベジェ曲線を学べるサイト。デザイナーさんは勿論、非デザイナーさんもこういうのでデザインがいかに難しく時間がかかるものか理解できるのではないかと。こういうの体感しておくとデザインなんて安売り出来ないし、簡単に学べない事が分かるかと思います。 Shape Type Color — Me
ここ最近、この手のフォントがかなり増えてき ましたが、こちらも良い感じでしたのでご紹介。 Webフォントにも使用できる、アイコンフォント です。シンプルで汎用的なのでなかなか使い 易いのではないかなと思いました。セマンティ ック的側面では反対の声も見かけますけど。。 こういう、アイコンタイプのフォントもかなり目立ち始めましたね。以前、同じくWebフォントに使えるWeb Symbols typefaceというフォントをご紹介しました。また、先日公開されたソーシャルメディアアイコンのフォント・Socialicoも素敵でした。※Webフォントに使えるかは調べてません。 今日ご紹介するModern Pictogramsも汎用的なデザインで、Webフォントにも利用可能です。 シンプルで使いやすい感じです。Webフォントにも使用できますので、CSS3と合わせてスマートフォンアプリで応用したり、管理画面
CSS3でこんなクオリティのボタンが作れる! みたいな記事をよく見かけると思うんですが、 そういったものだけを集めたデザインギャラ リーがありましたのでシェア。CSSの勉強に 如何でしょう。さもPhotoshopで作ったかの ようなエレメントが豊富にあります。 タイトルよく分からんですねw CSS3のグラデーションやbox-shadowなどを駆使して、今まではPhotoshopで作成していたかのようなクオリティのボタンなどを作った!みたいな記事を多々見かけてきたかと思いますが、そういったものだけを集めたデザインギャラリーです。 一見よくあるパーツデザインギャラリーや、dribbbleっぽい感じですが、これらのボタン等は全てcssで作成されています。それだけでなく、ソースも公開されていますので結構重宝しそうなサイトですね。 こんな立体感のあるボタンとか。 こんなソーシャルボタンとか。 ソース
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く