2015.06.03
Bootstrap CSS HTML5 jquery webデザイン サンプル フレームワーク モバイル 基本
Bootstrapで利用できるjQueryプラグイン Layout Bootstrapで簡単に利用可能なjQueryのプラグインをご紹介します。 今回はLayout編です。 レイアウトといっても、テーブルの機能拡張やスクロールの調整など色々なプラグインがあります。 DataTables | Tabl …More Read
2015.05.27
Bootstrap CSS jquery webデザイン サンプル フレームワーク モバイル 基本
Bootstrapで利用できるjQueryプラグイン Animate Bootstrapで簡単に利用可能なjQueryのプラグインをご紹介します。 今回はAnimate編です。 数字をカウントアップするなどの簡単なものなど、ちょっとしたことで見た目に動きをつけられます。 大抵の場合 「必要？」などと …More Read
2015.04.06
Bootstrap CSS jquery Twitter Bootstrap webデザイン サンプル フレームワーク モバイル 基本
Twitter Bootstrap 3 の基本 ボタンのサンプル 今回はボタンの作成をしていきます。１から綺麗なボタンを作成しようとすると、画像を作成しなければならなかったり、JavaScriptを組まなければならなかったり、色々と手間がかかります。 Bootstrapを使用すると、どの程度簡単にな …More Read
2015.04.06
Bootstrap CSS jquery Twitter Bootstrap webデザイン サンプル フレームワーク モバイル 基本
Twitter Bootstrap 3 の基本 フォームのサンプル３ 前回作成したフォームのサイズ変更をしていきます。 基本的にクラスを指定することでフォームサイズの変更ができます。 グリッドシステム同様に、横幅をグリッド数指定で決めることが可能です。 それでは早速サンプルを見ていきましょう。 サン …More Read
2015.03.31
Bootstrap CSS jquery Twitter Bootstrap webデザイン サンプル フレームワーク モバイル 基本
Twitter Bootstrap 3 の基本 フォームのサンプル２ 前回作成したフォームタグを、今回はカスタマイズしていきます。 今回のサンプル 今回作成するサンプルは以下の通り。 フォームのレイアウトを変更する方法 フォームのステータスに応じた表示にする方法 固定値を表示する方法 それでは早速み …More Read
2015.03.31
Bootstrap CSS jquery Twitter Bootstrap webデザイン サンプル フレームワーク モバイル 基本
Twitter Bootstrap 3 の基本 フォームのサンプル HTMLのフォームタグというのは、多種多様なログイン画面や登録画面で使用されています。 今回はこのフォームタグをBootstrapを使って表示するとどのようにUIに変化があるのかをみていきたいと思います。 フォームのサンプル では早 …More Read
2015.03.31
Bootstrap CSS jquery Twitter Bootstrap webデザイン サンプル フレームワーク モバイル 基本
Twitter Bootstrap 3 の基本 Grid Systemのサンプル３ 「グリッドデザイン」の３回目です。グリッドシステムに慣れてきましたでしょうか。 今回は次のようなサンプルを作成します。 今回のサンプル 要素同士の間に隙間をグリッド数で指定する方法 要素のネストを指定する方法 要素の …More Read
2015.03.31
Bootstrap CSS jquery Twitter Bootstrap webデザイン サンプル フレームワーク モバイル 基本
Twitter Bootstrap 3 の基本 Grid Systemのサンプル２ 「グリッドデザイン」の2回目。前回は基本的なグリッドの作り方を見てみましたが、要は以前のテーブル組みのようなことを、 クラスを指定するだけでレスポンシブ対応もした上で設定できる、ということでした。 今回は、このグリッ …More Read
2015.03.30
Bootstrap CSS jquery Twitter Bootstrap webデザイン サンプル フレームワーク モバイル 基本
Twitter Bootstrap 3 の基本 Grid Systemのサンプル 「グリッドデザイン」。グリッド(格子)上に様々な要素を配置することで、見やすく美しいレイアウトにする、という２Dデザインの考え方です。 これをBootstrapで如何に実現するのか、ということを今回は見ていきたいと思い …More Read
2015.03.30
Bootstrap CSS jquery Twitter Bootstrap webデザイン サンプル フレームワーク モバイル 基本
Twitter Bootstrap 3 の基本 レスポンシブWebデザインの話 ちょっと今回はBootstrapから少し脱線して、「レスポンシブウェブデザイン」の話から始めましょう。 皆さんは、「レスポンシブウェブデザイン」という言葉を、聞いたことがあるでしょうか。 最近ではすっかり一般的になり、W …More Read
