がくぞうのアイデアブログ

思いついたアイデア、試したことを公開していきます。

誰でも簡単にレスポンシブWEBデザインできる「Twitter Bootstrap」のまとめ

【スポンサーリンク】

WEBデザインがあまり得意ではない人にとって、
キレイにクールなサイトを構築することは難しい。

なおかつ、PC・タブレット端末・スマートフォンなど
環境に応じて見せれるデザインを構築しようと考えたら、
一気にやる気がなくなってしまう。

ところが、「Twitter Bootstrap」というCSSフレームワーク
利用すると、簡単に誰でも1つのソースで環境に応じて
見せ方を自動的に変えてくれるデザインを作れる。

しかも、キレイにクールなサイトをである。

というわけで、これは使わないでおくにはもったいない。

1.はじめに

まずは、わからない言葉の意味を知りましょう。

「レスポンシブ」とは

レスポンシブWebデザインとは編集

レスポンシブwebデザインとは?|Tips*Blog|株式会社コプロシステム

2.Twitter Bootstrapの導入

それでは、「Twitter Bootstrap」を導入していきましょう。
大丈夫です。簡単です。
ダウンロードして、フォルダをコピーするだけです。
導入が簡単なことは、とても重要なことです。

Bs3 Document | Greenapple-room


3.Twitter Bootstrapの使い方をざっと認識

環境の準備ができましたので、ざっと「Twitter Bootstrap」を使うと
どんなことができるのかを認識しましょう。
細かいことは気にせず、ざっと全体を知りましょう。

http://dotinstall.com/lessons/basic_twitter_bootstrap_v3


4.Twitter Bootstrapの細かい使い方を知りましょう

全体のことがだいたいわかったら、次は細かい使い方を知りましょう。
どんなことができて、どんな風にコーディングすれば実現するかを知りましょう。

Bs3 Document | Greenapple-room


5.Twitter BootstrapをCakePHPで利用する

サイト構築時に1からコーディングすることはあまりないと思います。
人気のPHPフレームワークCakePHP)に導入する方法を理解しましょう。

CakePHPのデザインをTwitter Bootstrapに変更する作業のメモ – asklife

TwitterBootstrapプラグインを利用しましょう。
http://wp.endo.jp.net/?p=158


6.Twitter Bootstrapを応用利用する

最後に、Twitter Bootstrapを拡張したり、
他のCSSフレームワークを利用して見たくなると思います。

http://matome.naver.jp/odai/2134113785949975001

そこに風俗があるから…