デザイン - Bootstrapの記事一覧
jQuery Smart Wizard 4 - jQuery製のウィザードライブラリ
たくさんの入力欄があるフォームをまとめて入力するのは苦痛です。果てしなく続く入力欄を見ただけで気分が萎えてしまいます。そこで使えるのがウィザードです。入力欄をグルーピング、分割することで心理的負担を下げられます。そこで使ってみたいのがjQuery Smart Wizard 4です。jQuery/Bootstrapをサポ...
Sufee Admin - Bootstrap4対応の多機能ダッシュボードデザインテンプレート
Bootstrap4がそろそろ本格的に導入されるようになっています。後方互換性がないため、これまでのテンプレートが使えなくなってしまったのが残念です。しかし、これによって新しいチャンスが生まれたとも言えるでしょう。Sufee AdminはBootstrap4向けの管理ページテンプレートになります。今後のことを考えるなら...
Shards - Bootstrap4に対応したデザインテーマ
Bootstrapは有名なUIデザインフレームワークですが、先日バージョン4が正式にリリースされました。その結果、これまで使われてきた多くのテーマが使えなくなっています。3を使い続けても良いですが、徐々に情報は増えていくのでバージョン4を追いかける方が良いでしょう。ということでテーマも新しいものに乗り換える必要がありま...
Bootstrap Page Builder - Bootstrapを使った画面設計ツール
WebのUIは自由度が高い分、イチから作るのは手間がかかります。そうした状況だからこそ、Bootstrapのように見栄えの良いUIが作れるフレームワークに人気が集まりました。しかし、Bootstrapの記法に沿ったHTMLの手打ちすら面倒に感じてきます。そこで使ってみたいのがBootstrap Page Builder...
BootLeaf - Bootstrap/Leafletを使った地図テンプレート
地図とWebは相性が良いです。移動中に地図を見たいと思うことは多いですし、旅行や出張前に計画を立てる上でも地図が必要です。それもあり、Googleマップをマッシュアップする地図サービスは無数に存在します。今回紹介するBootLeafはそんな地図マッシュアップのベースになるようなソフトウェアです。様々な情報を地図に載せや...
Froala Design Blocks - コーポレートサイトやサービスサイトを作るのに使えるBootstrapコンポーネント集
Bootstrapを使ってWebサイトを構築する例は多いですが、凝ったデザインを考えると足りない部品が出ることがあります。また、色やサイズについてもっとこだわりたいと考えることもあるでしょう。そうした時に使えるのがFroala Design Blocksです。実に170を超えるデザイン要素を提供しています。## Fro...
Sirius UI - Bootstrap/Vue.jsを組み合わせたUIデザインテンプレート
UIライブラリは幾つ知っておいても役立つものです。Webサイトの雰囲気に合わせてピックアップしたり、機能によって差別化もできるでしょう。すべての要件を一つのUIフレームワークで達成できる訳ではありませんので、色々知っておくとぴたりと当てはまる場面があるはずです。今回はSirius UIというUIフレームワークを紹介しま...
Propeller - Bootstrapベースのマテリアルデザインテンプレート
ちょっとしたWebサイトであればBootstrapをベースにすればデザインを一から作る必要がなくなっています。プロトタイプはもちろんのこと、数多あるBootstrap用テーマを使えば、十分高品質なWebサイトが作れるでしょう。今回はそんなBootstrapのテーマを紹介します。マテリアルデザインになっているPropel...
Native Javascript for Bootstrap - jQuery非依存のBootstrap用JavaScript
Bootstrapを使っているプログラマーは多いと思いますが、大きな不満の一つにBootstrapのJavaScriptはjQueryが必須であるという点があります。先進的なデザインフレームワークを使っているのに、今なおjQueryを使い続けなければならないのが苦痛です。そこで使ってみたいのがNative Javasc...
jQuery Bootgrid - jQueryでBootstrapのテーブルをパワーアップ
テーブル（グリッド）は多くのシステムの中で使われます。そのため、利用者からは多くの要望が寄せられるポイントでもあります。場合によってはExcelのような表計算並の機能を求められることもあるでしょう。そんな機能を一つ一つ作り込んでいたら幾ら時間があっても足りません。そこで使ってみたいのがjQuery Bootgridです...
winstrap - Microsoft社公認のBootstrapテーマ
モダンなWebサイトを実現するためにはモダンなデザインフレームワークを使うべきです。そうすることで全体の統一感が生まれ、使い勝手の良いWebサイトが生まれます。継ぎはぎでは統一感を出すのは困難です。今回はMicrosoft公式のBootstrapテーマ、winstrapを紹介します。最近のMSらしい、モダンなWebデザ...
Material Kit - Bootstrapをベースにしたマテリアルデザインフレームワーク
マテリアルデザインが人気です。単なるフラットなデザインだとどこがボタンなのか、さらにクリックした時の反応がないためアクションを起こしたのかどうかも分かりづらいと言った問題があります。マテリアルによって反応が得られるようになればユーザビリティが高くなるでしょう。そこでBootstrapに対してマテリアルデザインを適用でき...
Bootstrap Clean Dashboard Theme - 管理画面に向いたBootstrap製ダッシュボードテンプレート
Bootstrapが最もよく使われるのは個人のWebサービス、そして企業の管理画面ではないでしょうか。そこまでデザインがよくある必要はないですが、見逃し防止の一覧性やグラフの見やすさなどが求められます。そんなBootstrapを使った管理画面テンプレート、Bootstrap Clean Dashboard Themeを...
jQuery-Tabledit - Bootstrapのテーブルでデータの編集を可能に
業務システムといえばテーブルによるデータの一覧表示ですよね。実装すると次に要望にあがるのはデータのフィルタリングであったり、一回更新だったりします。非常に厄介です。今回はその一部、一覧時におけるデータの編集を手助けしてくれるソフトウェア、jQuery-Tableditを紹介します。Bootstrapのテーブルに対応して...
Mobility - スマートフォン用Web/ハイブリッドアプリ向けUIフレームワーク
スマートフォン向けにWebサイトであったり、Cordovaを使ったハイブリッドアプリを作る場合にはデスクトップ向けとは異なるUIフレームワークを使うのがお勧めです。UIはもちろん、スワイプ操作などのUXも専用の方がユーザビリティが高いでしょう。今回紹介するのはMobility、軽量なスマートフォンブラウザ向けUIフレー...
AdminPlus Lite - Bootstrap4対応の管理画面テンプレート
Bootstrapは便利なUIフレームワークなのですが、進化がとても早いのが玉に瑕かも知れません（進化しないのも困るのですが…）。せっかく便利に作られたライブラリも本体が進化すると使えなくなってしまうことがあります。そうしたらどうするか。さらに最新版に合わせたライブラリを作るのです。ということで今回は最新のBootst...
Pingendo - Bootstrap専用オーサリングツール
Boostrapはプログラマーであっても規則に沿って書いていくだけでモダンなUIのWebアプリケーション、Webサイトが素早くデザインできます。しかし規則すら覚えるのが面倒、もっと手軽に作っていきたいと考える人も多いでしょう。そんな方にお勧めなのがPingendo、Bootstrap専用のオーサリングツールです。## ...
Grid Editor - Web上でBootstrapのグリッド設計
Bootstrapでは高機能なグリッドが提供されていますが、それを使いこなすのはなかなか難しいのではないでしょうか。特にスマートフォンやタブレットでの表示を想定したグリッドは困難です。そこで使ってみたいのがGrid Editorです。ビジュアル的にグリッドの設計ができるエディタです。## Grid Editorの使い方...
GOLD Bootstrap - Bootstrapに黄金比の魅力を
黄金比はご存じでしょうか。彫刻や絵画、さらにAppleの製品などでも使われている最も美しいと言われる比率のことです。縦横のバランスだけでなく、配置なども黄金比に沿っておくことで美しく仕上がると言われています。そんな黄金比に沿ったサイトを簡単に作れるのがGOLD Bootstrapです。そう、Bootstrapで作ったサ...
Bootlint - Bootstrapサイトの検証に！
BootstrapをベースにWebサイトを組む例が増えていますが、Bootstrapの流儀をちゃんと踏まえて作っている人がどれだけいるでしょうか。ちゃんと把握していないとウィンドウサイズが変化した時に思った表示にならない事態につながります。そこで使ってみたいのがBootlint、Bootstrap専用の検証ツールです。...