ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザイン - Bootstrapの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2016/12/25

Native Javascript for Bootstrap - jQuery非依存のBootstrap用JavaScript

Bootstrapを使っているプログラマーは多いと思いますが、大きな不満の一つにBootstrapのJavaScriptはjQueryが必須であるという点があります。先進的なデザインフレームワークを使っているのに、今なおjQueryを使い続けなければならないのが苦痛です。そこで使ってみたいのがNative Javasc...

List

  • 2016/09/11

jQuery Bootgrid - jQueryでBootstrapのテーブルをパワーアップ

テーブル(グリッド)は多くのシステムの中で使われます。そのため、利用者からは多くの要望が寄せられるポイントでもあります。場合によってはExcelのような表計算並の機能を求められることもあるでしょう。そんな機能を一つ一つ作り込んでいたら幾ら時間があっても足りません。そこで使ってみたいのがjQuery Bootgridです...

List

  • 2016/08/18

winstrap - Microsoft社公認のBootstrapテーマ

モダンなWebサイトを実現するためにはモダンなデザインフレームワークを使うべきです。そうすることで全体の統一感が生まれ、使い勝手の良いWebサイトが生まれます。継ぎはぎでは統一感を出すのは困難です。今回はMicrosoft公式のBootstrapテーマ、winstrapを紹介します。最近のMSらしい、モダンなWebデザ...

List

  • 2016/08/05

Material Kit - Bootstrapをベースにしたマテリアルデザインフレームワーク

マテリアルデザインが人気です。単なるフラットなデザインだとどこがボタンなのか、さらにクリックした時の反応がないためアクションを起こしたのかどうかも分かりづらいと言った問題があります。マテリアルによって反応が得られるようになればユーザビリティが高くなるでしょう。そこでBootstrapに対してマテリアルデザインを適用でき...

List

  • 2016/06/10

Bootstrap Clean Dashboard Theme - 管理画面に向いたBootstrap製ダッシュボードテンプレート

Bootstrapが最もよく使われるのは個人のWebサービス、そして企業の管理画面ではないでしょうか。そこまでデザインがよくある必要はないですが、見逃し防止の一覧性やグラフの見やすさなどが求められます。そんなBootstrapを使った管理画面テンプレート、Bootstrap Clean Dashboard Themeを...

List

  • 2016/04/09

jQuery-Tabledit - Bootstrapのテーブルでデータの編集を可能に

業務システムといえばテーブルによるデータの一覧表示ですよね。実装すると次に要望にあがるのはデータのフィルタリングであったり、一回更新だったりします。非常に厄介です。今回はその一部、一覧時におけるデータの編集を手助けしてくれるソフトウェア、jQuery-Tableditを紹介します。Bootstrapのテーブルに対応して...

List

  • 2016/04/05

Mobility - スマートフォン用Web/ハイブリッドアプリ向けUIフレームワーク

スマートフォン向けにWebサイトであったり、Cordovaを使ったハイブリッドアプリを作る場合にはデスクトップ向けとは異なるUIフレームワークを使うのがお勧めです。UIはもちろん、スワイプ操作などのUXも専用の方がユーザビリティが高いでしょう。今回紹介するのはMobility、軽量なスマートフォンブラウザ向けUIフレー...

List

  • 2016/04/02

AdminPlus Lite - Bootstrap4対応の管理画面テンプレート

Bootstrapは便利なUIフレームワークなのですが、進化がとても早いのが玉に瑕かも知れません(進化しないのも困るのですが…)。せっかく便利に作られたライブラリも本体が進化すると使えなくなってしまうことがあります。そうしたらどうするか。さらに最新版に合わせたライブラリを作るのです。ということで今回は最新のBootst...

List

  • 2016/03/02

Pingendo - Bootstrap専用オーサリングツール

Boostrapはプログラマーであっても規則に沿って書いていくだけでモダンなUIのWebアプリケーション、Webサイトが素早くデザインできます。しかし規則すら覚えるのが面倒、もっと手軽に作っていきたいと考える人も多いでしょう。そんな方にお勧めなのがPingendo、Bootstrap専用のオーサリングツールです。## ...

List

  • 2015/10/12

Grid Editor - Web上でBootstrapのグリッド設計

Bootstrapでは高機能なグリッドが提供されていますが、それを使いこなすのはなかなか難しいのではないでしょうか。特にスマートフォンやタブレットでの表示を想定したグリッドは困難です。そこで使ってみたいのがGrid Editorです。ビジュアル的にグリッドの設計ができるエディタです。## Grid Editorの使い方...

List

  • 2015/10/10

GOLD Bootstrap - Bootstrapに黄金比の魅力を

黄金比はご存じでしょうか。彫刻や絵画、さらにAppleの製品などでも使われている最も美しいと言われる比率のことです。縦横のバランスだけでなく、配置なども黄金比に沿っておくことで美しく仕上がると言われています。そんな黄金比に沿ったサイトを簡単に作れるのがGOLD Bootstrapです。そう、Bootstrapで作ったサ...

List

  • 2015/09/17

Bootlint - Bootstrapサイトの検証に!

BootstrapをベースにWebサイトを組む例が増えていますが、Bootstrapの流儀をちゃんと踏まえて作っている人がどれだけいるでしょうか。ちゃんと把握していないとウィンドウサイズが変化した時に思った表示にならない事態につながります。そこで使ってみたいのがBootlint、Bootstrap専用の検証ツールです。...

List

  • 2015/09/12

Summernote - シンプルなUIのBootstrap用WYSIWYGエディタ

ユーザにコンテンツを作ってもらう上で欠かせないのがWYSIWYGエディタです。HTMLでの記述に慣れた人にとっては邪魔くさいかも知れませんが、そうでない人のがたくさんいます。そうした人が自由に思い通りにコンテンツが作れるWYSIWYGエディタはとても大事です。今回紹介するSummernoteもそんなWYSIWYGエディ...

List

  • 2015/06/25

Gentallela – 多くのデザインパターンに対応したBootstrap製の管理画面テンプレート

Bootstrapを使った管理画面テンプレートはたくさんあります。今回もその一つ、Gentallela

List

  • 2015/06/10

Honoka - 日本語も綺麗に表示できるBootstrapテーマ

当たり前ですが、英語圏のソフトウェアは英語が綺麗に表示されるように調整されています。そのため日本語にした時に幅が足りなかったり、そもそもフォントが当たっていなくて汚い表示になったりします。Webのモックアップなどで多く使われているBootstrapについてもそうです。日本語を綺麗に表示するならBootstrapを日本向...

List

  • 2015/05/04

bootstrap-google-plus – Google+風のBootstrapテーマ

Bootstrapの良いところは構造が標準化されたことで、多くのテーマが作られていると言うことです。もし使っているデザインが時代遅れになってきたと思ったら、テーマを差し替えることで一気に新鮮みを出すことができます。今回はBootstrapをGoogle+風にしてくれるテーマ、bootstrap-google-plus

List

  • 2015/02/25

DevOOPS - 多数のパターンを用意したBootstrap管理画面

デザインでシステムの品質が決まるわけではありません。しかし、それでも全くデザインされていないシステムよりも見た目が整っている方が安心して使えるでしょう。それは管理画面でも同様です。通常、管理画面は利用者が限定的なため、デザインが適当になってしまいます。そんな寂しい管理画面もDevOOPSを使えば一気に見た目が向上するで...

List

  • 2015/01/14

Cluckles – Bootstrapテーマエディタ

Bootstrapを使ってWebサイトを手早く作っている人は多いと思います。しかしデフォルトのままではBootstrapの味が強く残ってしまいます。しかし色や線の太さを変えるだけでも印象はずいぶん変わるものです。そこで使ってみたいのがClucklesです。Clucklesはリアルタイムプレビュー付きのBoostrapテ...

List

  • 2014/12/25

Diversity - Bootstrapで作られたシングルページアプリケーションテンプレート

SPA(シングルページアプリケーション)が流行っています。通常のWebサイトと異なり、ランディングページやプロジェクトのトップページで使われることが多く、様々な情報を見やすく並べて表示する必要があります。Diversityはそんなシングルページアプリケーションに最適なテンプレートです。しかもBootstrapベースとあ...

List

  • 2014/11/24

Dashboards by Keen IO – グラフを多用したBootstrap管理画面テンプレート

Bootstrapが特に活かされている場面というと、管理画面ではないでしょうか。そこまで画面デザインにこだわらなくてよく、情報設計がきちんとできていれば見栄えの良いUIが作成できます。開発者自らが設計、デザインできるのが手軽で良いです。そんなBootstrapを使った管理画面デザインは多数ありますが、今回はビジュアル化...