3 column control panelAdmin at Bootply.com is a device-agnostic, modern responsive design that is customizable. It's designed to work well on desktops, laptops, tablets and mobile phones. LicenseMIT VersionBootstrap 3.3.2 This is a starter template for a admin, control panel or dashboard. This template has a collapsible tree menu, and a variety of panels that can be used as dashboard widgets. Like

今回、WEBCRE8.jpの優さん企画の#LOVEFONT Advent Calendar 2012というイベントにお誘いいただきました。 愛するフォントの魅力を語る・詳しくなくても構わない、と優しい声をかけていただいて勇気がでたので、私も参加させていただくことになりました。 今回の企画、Advent Calendarと#LOVEFONTについては、WEBCRE8.jpさんの記事をご覧ください。 2012年、今年こそはAdvent Calendarに参加しよう！！ ｜WEBCRE8.jp#LOVEFONT ｜ WEBCRE8.jp#LOVEFONT Advent Calendar やさしさゴシックって…？その名の通り、やさしい雰囲気の「やさしさゴシック」。 好きなポイントはいろいろあるのに、そのフォントについて知っていることは、とても少なかったので調べてみることにしました。 やさしさゴシッ

かなり人気のあるjQueryですが、そんなjQueryの私個人が選ぶ素敵なプラグインとチュートリアル10選。 とりあえず定番的なものをどうぞ。 ちなみにjQueryを自作できるレベルまで手軽になりたい人は以下記事参照。 web制作の現場で使うjQueryデザイン入門が激しくお勧めな件 タグクラウドの細分化 jquery Hover Sub Tag Cloud - Noupe サンプルデモ これかなり好き。 タグクラウドをさらに細分化させて表示させてます。 こういう発想は今までなかったので最初見たときちょっと感動しましたね。 ローディングページ How to Load In and Animate Content with jQuery | Nettuts+ サンプルデモのメニュー部分をクリックしてみてください。 右上にローディングのマークが若干出て、さらにアコーディオン風に内容が変わります

Googleから、また新しいサービスが展開された。 その名も GoogleWebElement 何が凄いのかって言うのは使ってみればわかりますが、ブログやなんかに 驚くほど手軽にGoogleサービスを埋め込める という代物です。 で、実際はこのサービス自体、他のGoogleドキュメントの方にも実装されて、貼り付け用コードがかなり手軽に作成できるようになったのです。 今回はこの新しいウィジェットである、グラフとプレゼンテーションを中心に解説していきます。 とりあえず用意するもの Googleアカウント のみ ちなみにGoogleサービスを手軽に貼れるサービスっていうのは、各ドキュメントからも普通に出来るようになっているみたいなので、ほぼ各ドキュメントサービスからコードを貼り付けることが可能です。 Googleドキュメントを作成し、プレゼンをウェブ化 Google ドキュメント へようこそ こ

Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，

正直、Webデザインは苦手だ。システムは構築できても、その後のデザインで行き詰まって頓挫したサービスは数知れない。最近ではWebデザインテンプレートを使うようになったが、汎用性の低いものが多くカスタマイズも困難な場合が多い。 Basecampにも似たWebアプリケーションテンプレート 例えばWebシステムの管理画面を考えた場合、ユーザ向けの画面は気合いが入っているのに管理画面は酷いものが多い。そこで使ってみたいのがWeb App Themeだ。 今回紹介するオープンソース・ソフトウェアはWeb App Theme、テーマにも対応した汎用的テンプレートだ。 Web App ThemeはLighthouse、Basecamp、RadiantCMSにインスパイアされたWebアプリケーション向けテンプレートだ。右上のユーザ情報、タブを使った機能の振り分け、個別のタブの中にさらにセカンダリーのタブを

Performing image editing and applying picture effects to any image is a time consuming exercise that is fit only for an avid photoshop user. If you’re looking for a quick and professional picture effects online service, then PhotoFunia is the solution you’ve been looking for. With PhotoFunia you can edit photos online for free in a matter of seconds resulting in high quality photo collages. Not on

なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。 整ったデザインが簡単に手に入るのはすばらしい！ Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。 今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基本として、グリッド化されてページの幅に応

業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと

Webサイトの開発をする上で、JavaScriptライブラリの選定やCSSのフレームワークを採用するなどある程度決まりきった作業が発生する。だが、ついつい途中を抜かしてしまったり、後で気がついて入れ直すなんてことがある。 ウィザード形式でWebサイトのスケルトンを生成する Webサイトのスケルトンモデルを適切に生成すれば、スタートがスムーズになる。そのためのソフトウェアがdeploy*だ。 deploy*はWebベースのオープンソース・ソフトウェアで、Webサイトのベースになるライブラリや設定をウィザード形式で行ってくれる。 deploy*で行えるのはHTMLのDOCTYPE宣言の設定、CSSの設定（ブランクまたはreset）、jQueryの利用有無とプラグインの選択、そして画像ディレクトリやインクルードディレクトリ等を作成するかどうかの設定だ。 その他オプション それらを順番に指定してい

ウェブサービスを作ってみることがよく (たまに？) あるのですが、毎回探してしまうのでメモしておきます。デザインって苦手です……。特に、色遣いやレイアウトは参考になります。 webサービスを作る前に読みたいデザイン系エントリまとめ - 遥か彼方の彼方から Color Palette Generator [http://wellstyled.com/tools/colorscheme2/index-en.html:title=[ws] Color Scheme Generator 2] Web 2.0 Colour Palette 死ぬまでに見ておくべきCSSデザインサイト集まとめ プロっぽくて編集しやすいフリーのウェブサイト用テンプレート配布サイト「TemplateYes」 高品質でフリーのウェブサイトテンプレート集「TemplatesBox.com」 無料でウェブサイトのテンプレートを配