データを分かりやすくスタイリッシュに可視化できる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
アコーディオンまとめ8選！ | 株式会社LIG
(……きこえますか……きこえますか) Σ(◉◒◉)ん？ (……どうもです……はやちです(:3_ヽ)_) ？？？(◉◒◉)三(◉◒◉)？？？ (いま……あなたの……心に……直接……呼びかけています…(:3_ヽ)_) (◉◒◉;)お 俺にか……？？ (以前「スマホサイトに入れると使いやすくなる！おすすめjQuery4選！」の中でアコーディオンメニューを紹介しましたが、他にも参考になるデザインとUIはないかなと思い集めてみました。ご紹介します……(:3_ヽ)_) (◉◒◉;)ほ ほほう Flexible Slide-to-top Accordion （矢印がくるっと回ってアコーディオンが開くタイプ。矢印の動きがおもしろいですね。_(:3」∠)_) (◉◒◉)ほほう DEMO http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/ SI
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
iPhoneのON/OFFスイッチっぽいものを実装するjQueryプラグイン「Toggles」:phpspot開発日誌
jQuery Toggles - Simon Tabor iPhoneのON/OFFスイッチっぽいものを実装するjQueryプラグイン「Toggles」 次のようなiPhoneっぽいデザインは勿論、独自デザインでも同じようなスイッチを実装できます。 実装コードは以下のように簡単に実装できます。 $('.toggle').toggles({click:$('.clickme')}); こういうデザインもアップル発という気がしますが、UI におけるアップルの影響はいつも高いなぁと思ってしまいますね 関連エントリ iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート 立体感がリアルなON・OFFスイッチ実装jQueryデモ
jQueryでクールなボリュームコントロールを作成するチュートリアル:phpspot開発日誌
Creating a Volume Controller with jQuery UI Slider jQueryでクールなボリュームコントロールを作成するチュートリアル。 次のようなAppleっぽいデザインのボリュームコントロールを作るチュートリアルです。 デモページ ボリュームコントロールじゃなくてもこの作り方を覚えておけば、プログレスバーなり、１〜１００のパラメータ調整なり応用が効きそうです。 画像を使ったデザイン性の高い物を作っているので思ったデザインのコントロールは作れるようになりそうですね 関連エントリ パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル Googleマップ関連のjQueryプラグインとチュートリアル集
selectボックスを超カッコよくするjQueryプラグイン「Chosen」:phpspot開発日誌
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
