すっきりしたデザインのギャラリーライブラリ·Galleria MOONGIFT
GalleriaはレスポンシブWebデザイン対応を謳ったJavaScriptイメージギャラリーです。 デジカメで撮影した多量の写真も見せなければHDDの肥やしでしかありません。そこでWebサーバ、Flickr、Picasaなどにアップロードした後はGalleriaを使ってギャラリー化してみましょう。 サムネイルが下に並び、上で写真の表示を行います。 フローティングで説明も表示できます。 縦の写真も問題ありません。 大きな写真もぴったり表示されます。 Picasa/Flickrといった外部リソースの表示も行えます。 Galleriaはレスポンシブなイメージギャラリーとなっていますが、MIT Licenseの範囲で公開されているテーマでは対応していないように見えます。また、プレミアムなテーマは販売されており、より多様なデザインのギャラリーが展開できるようになっています。 GalleriaはJa
人気のWYSIWYGエディタ - おおらかにいこう
WYSIWYGエディタとは、一種のHTMLエディタです。WYSIWYGエディタを使用すると、実際のページレイアウトと同じように表示され、ページを編集できます。ブログ書く人はわかると思うのですが、ブログ記事を書く画面によく使用されていますね。 WYSIWYGエディタは、いくつも開発されており、高機能すぎて少し重たかったりと贅沢な不満もあります。そこで今回は、人気のWYSIWYGエディタのご紹介です。 ・Redactor Redactorは、すっきりとした美しいデザインが特徴です。私は一番好きです。残念ながら有償なんですね。高機能で他のWYSIWYGエディタより美しいデザインなので有償なのも納得です。 Redactor ・CKEditor CKEditorは、高機能でカスタマイズが容易です。日本語に対応してくれていますので、ボタンの説明が日本語で表示されます。 CKEditor ・CLEdit
データを分かりやすくスタイリッシュに可視化できるJavascriptライブラリ「D3.js」
どんなに情報をまとめても、それを可視化して見ている人にうまく伝えるのは至難の技です。そんな時にデータをスタイリッシュかつ見やすいグラフにしてくれるのが、様々なデザインのJavascriptがダウンロード可能なライブラリ「D3.js」です。 D3.js - Data-Driven Documents http://d3js.org/ D3.jsを使って作ったグラフの事例を公式ギャラリーから見ることが可能で、これらのグラフにもとになる素材(スクリプトのソース)がGitHubで入手可能です。 Gallery · mbostock/d3 Wiki · GitHub デザインの一例は以下から。 ◆:Bubble Chart 作成例によっては、ページに直接コードが記載されているものもあります。 ◆:Four Ways to Slice Obama’s 2013 Budget Proposal - In
NYタイムズも注目！「データ×デザイン」を実現するデータビジュアリゼーション ライブラリ「d3.js デザイン会社 ビートラックス: ブログ
世界中でデータがどんどん増えていく中でデータをうまく扱うことはとても重要になってきています。そんな中、New York Timesが積極的に活用していたり、Githubのwatch数ランキングで上位にランクインしていたりと最近人気急上昇中のデータをビジュアライズする為の「d3.js」というライブラリがあります。 本日はこの「データｘデザイン」をwebサイト上で実現する為のjavascriptライブラリ”d3.js”について紹介したいと思います。 このライブラリを使うことで、今までなかなか難しくてできなかったウェブ上での「データの可視化」が手軽にできるようになり、複雑なデータを直感的に理解できるようなサイトが作りやすくなります。早速ですがこのd3.jsというものがどういうものかをなんとなく感じるには実際に動いているデモを見て頂くのが早いので以下をご覧下さい。 オバマ大統領の国家予算案詳細 (
BootstrapのCSSを簡単にいい感じにカスタマイズできる厳選サービス２＋１つ紹介 | DevelopersIO
Bootstrapいいよね Bootstrapです。大人気の見た目系フレームワークですね。いろんなサイトで見かけます。 自分もそうなのですが、エンジニアでコードは書くけどデザインの事はよく知らない。だけど「使いやすくて、いい感じにしたい」という欲求を満たしてくれてます。ただ、デフォルトは見やすいんだけど、ちょっとカスタマイズしたいなとか、色指定があった場合など困りますね。例えばありそうなのが「コンテンツ管理画面を作りたい、デザインは特にこだわらない、けど使いやすいのがいいな。」とかさらに「イメージカラーが青だからそれベースで」とか。 そんなあなたにぴったりな厳選ツールを紹介しちゃいまっくすぅ〜！ Lavish 〜 画像から配色を生成してくれます 〜 このサービスは画像を解析してBootstrapの配色を捻り出します。 何処かの企業向けに作る場合に企業のロゴなどから配色してみるといい感じにな
JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
自由度高く部品を配置するちょっと不思議なWebアプリケーション·Morphic.js MOONGIFT
Morphic.jsはWeb上に部品を配置して自由にデザインを決められるWebアプリケーションです。 ちょっと不思議なWebアプリケーションの紹介です。Morphic.jsはWeb上に独自のコンポーネントを配置できるWebアプリケーションです。モックアップを作ったり、ドローアプリケーション的に使えそうです。 トップページです。右クリックでメニューが出ます。 ドラッグして動かしたりできます。 ボックスを追加しました。 さらにスライダーやフレームを追加しました。 モバイルモードにするとメニューが大きくなります。 色設定もあります。 複数のmorphic.jsを埋め込めます。 Morphic.jsでは右クリックから部品を配置して、それを動かしたりリサイズしたりできます。ラベルを描画してフォントサイズを変更し、Webサイトのワイヤーフレームを作ったりすることもできるでしょう。いろいろな使い道が考え
テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」 – bl6.jp
結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけてくれるjQueryプラグイン「jqIsoText」です。テキストを中央に向かうにつれて大きくしたり、またはその逆にしたりすることができます。画像ではなくてテキストなのでちょっとした変更も簡単にできるのでいいですね。以下使い方です。 [ads_center] 使い方 使い方はこれ以上ないくらい簡単です。jQueryとプラグインを読み込みます。 <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jqIsoText.js" type="text/javascript"></script> エフェクトをかけたいテキストです。 <div class="sample">sampletextsampletext</div> あとはプ
Webアプリケーションを作るのに便利そうなコンポーネント群·UIKit MOONGIFT
UIKitはWebアプリケーション向けのダイアログ、カラーピッカーといったコンポーネント群を提供するライブラリです。 最近、TwitterのBootstrapが人気ですが、同じようにWebアプリケーションをデザインする際に使えそうなコンポーネント群がUIKitです。 まずダイアログ系のコンポーネントです。 閉じるボタン付き。 グレーアウトしたダイアログ。 HTML埋め込みもできます。 カラーピッカーコンポーネント。 確認ダイアログ。 通知（右上）。自動的に消える設定もできます。 コンテクスト（右クリック）メニュー。 主なコンポーネントとしては、ダイアログ、確認ダイアログ、カラーピッカー、クリックで回転するカード、通知、メニュー、ボタン式のドロップダウンとなっています。デザインがすっきりとしているので今風のWebアプリケーションに似合いそうです。 UIKitはHTML5/JavaScript
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ごりゅご.com