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
2015.03.30
Bootstrap CSS jquery Twitter Bootstrap webデザイン サンプル フレームワーク モバイル 基本
Twitter Bootstrap 3 の基本 navbarのサンプル 大抵のWebサイトについているナビゲーション。特にヘッダー部分に位置するナビゲーションは、 サイト全体を行き来する上でよく使い、グローバルナビゲーションなんて言われていたりしますね。 今回はそのナビゲーションを実装することができ …More Read
2015.03.30
Bootstrap CSS jquery Twitter Bootstrap webデザイン サンプル フレームワーク モバイル 基本
Twitter Bootstrap 3 コンポーネントの使い方サンプル いまさらという感もあるBootstrapですが、逆に今更過ぎて新たに学習するのを敬遠しちゃっている人もいるかもしれません。 沢山ある機能からピックアップし、Webサイトを作っていきたいと思います。それでは早速始めましょう。 準備 …More Read
