html5

HTML5 Twitter Bootstrap はじめに見るべき10サイトまとめ

Posted 10月 15 2012 by Teachers  , , with 0 コメント

Twitter Bootstrapを始める時に見ておく10サイトを紹介

HTML5でのサイト構築をはじめて、Twitter Bootstrap(以下Bootstrap)をやり始める方も多くなりました。

Bootstrap初心者でも大丈夫!

初めてBootstrapにふれる方に向けたサイトをご紹介しますので、是非一読ください。

まとめ10サイト

Bootstrap from Twitter

http://getbootstrap.com/2.3.2/

Bootstrap from Twitter →

家サイトです。まず始める前にここからダウンロードします。
ジェネレータサイトなどからダウンロードする場合は不要になるのですが、本家サイトの場所はこちらになります。

Bootstrap CSSリファレンス

http://getbootstrap.com/2.3.2/base-css.html

Bootstrap CSSリファレンス →

家サイトのドキュメントです。CSSの各要素に関しての説明が載っており、一番見るところだと思います。
以外にはScaffoldingにRWDやレイアウトグリッドの説明、Componentsにコンポーネントの説明があり、サンプルもありコピペで簡単に作成できます。

ブートストラップスターターテンプレート

http://php-fan.org/sample_code_demo/bootstrap.html

ブートストラップスターターテンプレート →

本語のサンプルテンプレート配布サイトです。
ドキュメントが日本語で書かれているので、英語が苦手な方は、こちらをみてみましょう。

Bootstrapで使える便利なスニペット

http://bootsnipp.com/

Bootstrapで使える便利なスニペット →

使えそうなUIセットをコピペで作成できます。
formのサンプル、NavBarのサンプルなど、機能毎にサンプルをそろえており、見ているだけでも楽しいです。

Bootswatch

http://bootswatch.com/

Bootswatch →

BootStrap用のカスタマイズCSSを配布しています。
WebFontを利用している部分は日本語に対応していない部分もありますが、簡単に配色を変えることが出来ます。

StyleBootstrap.info

http://stylebootstrap.info/

StyleBootstrap.info →

BootStrap用のカスタマイズCSSを作成しています。
Bootswatchで配色が見つからなく、CSSを変更したい場合はこちらで変更すると便利です。

Twitter Bootstrap jQuery Mobile Theme

http://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme

Twitter Bootstrap jQuery Mobile Theme →

jQuery Mobileのテンプレートを提供しています。
Exampleの下に色のパターンが見れ、Exampleのすぐ下の「View a simple demo of this theme」をクリックするとサンプルが見れます。

jetstrap

http://jetstrap.com/

jetstrap →

ンプレートをドラックアンドドロップで作成するWEBサービスです。
RWDにも対応しており、簡単に確認することができ、作成したテンプレートはダウンロードして利用できます。

これだけ覚えれば誰でも使えるTwitter Bootstrap2.0

http://w.builwing.info/2012/08/14/%E3%81%93%E3%82%8C%E3%81%A0%E3%81%91%E8%A6%9A%E3%81%88%E3%82%8C%E3%81%B0%E8%AA%B0%E3%81%A7%E3%82%82%E4%BD%BF%E3%81%88%E3%82%8Btwitterbootstrap2-0/

これだけ覚えれば誰でも使えるTwitter Bootstrap2.0 →

心者向けに簡単に書かれています。
サンプルもありコピペで利用できます。分からなくなったら読んでみましょう。

TWITTER BOOTSTRAP 3 RC1 モバイルファーストでフラットデザイン

http://www.sakc.jp/blog/archives/30829

TWITTER BOOTSTRAP 3 RC1 モバイルファーストでフラットデザイン →

Bootstrapは2.x系と3.x系は随分と異なります。
デザイン、グリッドシステムなど利用用途に合わせて選択するのが良いかと思いますが、
今後は3.x系の利用が進みそうです。

Bootstrap以外にもあるCSS フロントエンドフレームワーク

http://www.sakc.jp/blog/archives/42160

Bootstrap以外のCSS Frameworkを知らない人必見!CSSフレームワーク44選 →

Bootstrap以外にもCSSのフレームワークはあります。
単機能のものもありますが、使い勝手の良いものもあります。まずは一通り見てみることをお勧めします。

Bootstrap関連書籍

はじめてのBootstrap (I・O BOOKS)
実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック
Bootstrap


Bootstrap CSS Framework HTML5



  未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





メールアドレス
ご質問・問い合わせ等、ご自由にお書きください。