デザイン - Bootstrapの記事一覧
Bootstrapの善し悪し
Twitterが開発したHTML5テンプレートBootstrapをMOONGIFTで紹介したのは2011年9月1日
Tocify - Boostrap対応の目次生成ライブラリ
お。これはプロジェクトサイトのヘルプや説明ページに使えそうですね。BootstrapをベースにWebサイトを構築するメリットとして、多彩なプラグイン/ウィジェットの存在があります。こんなこと実現できるかな、と思って調べてみれば大抵そういったソフトウェアが存在するのが強みです。例えばメインコンテンツの左側に見出しを目次と...
Free PixelKit Bootstrap UI Kits - Bootstrapを一変させるフラットUIテーマ
Bootstrapは良いのだけれど、Bootstrapっぽさが如実に感じられるのが嫌だなぁと思っているプログラマーの方は多いはず。そこで使ってみて欲しいのがFree PixelKit Bootstrap UI Kitsです。フラットなUIでがらっと雰囲気を変えてくれること請け合いです！見てもらうのが一番だと思うので、ま...
Bootstrap Markdown - 使おう！BootstrapにマッチしたMarkdownエディタ
Markdownでコンテンツを編集するサイトでは採用必須ですね！最近はテキスト編集をさせようと思うとまずMarkdownが筆頭に上がってくるようになりました。さらにWebサービス開発にBootstrapをベースにする人たちもたくさんいます。であればその二つが合わさって欲しいと思っている人は多かったはず。Bootstra...
Fancyboot - Bootstrapのカラーリングをはじめ自在にカスタマイズしよう
ほほーこれはますますBootstrapにハマってしまいそうです。Bootstrapはデザインが苦手なプログラマー（筆者のような）にとって救世主のようなライブラリになっています。しかしそれだけにカスタマイズは苦手でどれも似たような雰囲気になってしまいます。そこでFancybootを使ってみましょう。Fancybootでは...
Bootstrapで物足りなく感じているウィジェットをまとめて提供「Fuel UX」
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまい...
緑を基調としてレスポンシブなテーブルを備えたBootstrapテーマ「GreenMind」
GreenMindは緑を基調として幾つかの機能を追加したBootstrapテーマです。Bootstrapを使ったプロジェクトが増えていますが、問題はぱっと見た瞬間にBootstrapを使ったと分かってしまうことです。そこを気にする方は別なテーマを使ってみると良いでしょう。今回はGreenMindを紹介します。トップペー...
Bootstrapで使えるWYSIWYGエディタ「bootstrap-wysiwyg」
bootstrap-wysiwygはBootstrap用のリッチなWYSIWYGエディタです。使い勝手の良さもあってBootstrapを使ったWebサイトが増えています。より便利に使うためには多彩なウィジェットが欠かせません。今回はBootstrap用WYSIWYGエディタ、bootstrap-wysiwygを紹介しま...
哀愁漂う懐かしのデザインを現在の技術で再現「Geo」
GeoはBootstrapを使って懐かしのジオシティーズ風デザインを施すテーマです。かつてホームページホスティングの代表として知られたジオシティーズ。Yahoo!に買収された後、2009年に解散していますが、そんなジオシティーズ風ホームページを現在の技術で作り上げたのがGeoです。おお、このカオスっぷり。まさに90年代...
CSSだけでトグルスイッチを実現するUI「CSS Toggle Switches with Bootstrap」
CSS Toggle Switches with BootstrapはCSSのみでトグルスイッチを実現するBootstrap用ライブラリです。JavaScriptを使えば簡単にできることをCSSだけでどう実現するか、そんな取り組みはとても面白いです。今回はCSSだけで実装されたトグルスイッチUIのCSS Toggle ...
Bootstrapベースのサイトに素敵なチュートリアルを「Bootstro.js」
Bootstro.jsはBootstrapを使ったWebサイトにチュートリアル機能を提供するライブラリです。Bootstrapを使ったWebサイトを作って、そこにチュートリアルによる説明を追加したいならば使って欲しいのがBootstro.jsです。カスタマイズも対応した素敵なチュートリアルが実現します。チュートリアル開...
Windows8アプリを開発する際に使える？BootstrapをWindows8 Style UIに「metro-bootstrap」
metro-bootstrapはBoostrapをWindows8 Style UIに変更するデザインテーマです。正直言ってWindows8はインストール以来全然使っていない筆者ですが、Windows8 Style UI（旧Metro UI）は好きです。あのすっきりとしたデザインはタブレットやWebでこそ活きるのではな...
BootstrapベースのWebアプリケーションウィザード「Bootstrap Application Wizard」
Bootstrap Application WizardはBootstrap用のアプリケーションウィザードフローを提供するライブラリです。Bootstrapを使ってWebサービスを提供するサイトが多くなってきました。今回はその一つ、Bootstrapを使ってウィザード風の流れを実現してくれるライブラリ、Bootstra...
2013/01/29
業務で使えるオープンソース・ソフトウェア（63）「デザインフレームワーク」
今回のテーマはデザインフレームワークです。Bootstrapを筆頭に様々なデザインフレームワークが登場しています。それらを使ったときの利点や問題点について取り上げ、Bootstrap以外のデザインフレームワークも多数紹介します。
その場でデータを編集。BootstrapやjQuery UIに対応した「X-editable」
X-editableはBoostrapやjQuery/jQuery UIで使えるIn-place Editorです。表示されている内容を編集する際にその場ですぐに編集できるようにするのがIn-place Editorです。それをBootstrap、jQuery UIなどに対応させたのがX-editableになります。こ...
MarkdownをTwitter Bootstrap上で使うなら「PageDown Bootstrap」
PageDown BootstrapはBootstrapで使えるMarkdown用の編集補助ツールです。最近、ライトなマークアップ言語が増えていますが、その中で有力なのがMarkdownです（異論はあるでしょうが）。そんなMarkdownフォーマットをBootstrap上で書きやすくしたのがPageDown Boots...
BootstrapのUIをWindows8のModern UI Style風に「BootMetro」
BootMetroはBootstrapをベースにWindows8のModern UI Style風にしたソフトウェアです。ついにWindows8が発売になりました。機能的なことはもちろん、注目を集めているのはModern UI Style（旧Metro UI）でしょう。そんなUIをWeb上でBoostrapをベースに作...
お手軽！Bootstrapのカラーテーマを画像から作成する「Lavish」
Lavishは任意の画像を解析してカラーパターンを抽出し、それをBootstrapに適用するソフトウェアです。Bootstrapは便利なデザインフレームワークですが、色のバランスが特徴的なのでかなり臭いが残ってしまいます。そこで色合いをがらっと変える際に使ってみたいのがLavishです。トップページです。右側に画像が表...