このサイトは、TwitterBootstrap2を使って制作しています！

BootstrapというのはCSSフレームワークの一つなのですが、ようは最初から準備されているCSSを使って、簡単にサイトをコーディングできてしまう、すごいツールなのです！
（現在はBootstrap3もあるようなのですが、クトゥルフWEBダイスを最初に作ったのが約２年前でしたので、そのままBootstrap2で制作しました）

このTwitterBootstrapの特徴は、とても簡単にレスポンシブサイト、つまりPC・スマホの両方から見てもOKなデザインのサイトを作ることができることです。
時間がなくても、わずかな時間でシンプルなレスポンシブサイトが作れちゃうんですね！
Bootstrapは個人・商用問わず無料で利用できるのも魅力です。
詳しいライセンスについては、下記をご確認下さい。

ライセンス形式：Apache License 2.0
http://sourceforge.jp/projects/opensource/wiki/licenses%2FApache_License_2.0

TwitterBootstrapのススメ

それでは、簡単にBootstrapの魅力と、使い方をご紹介します！
詳しい使い方については、下記のサイトをご覧ください！

参考サイト：
TwitterBootstrapの使い方 – コンポーネント – v2.0.4
http://php-fan.org/sample_code_demo/bootstrap.html

Bootstrapの使い方

Bootstrapの公式サイト（http://getbootstrap.com/2.3.2/）からBootstrapのCSS、JS等をダウンロードし、自分のサイトのcss、JSフォルダに入れ込みます。
あとは、上記で紹介した「TwitterBootstrapの使い方 – コンポーネント – v2.0.4」に書いてあるフレームワークからやりたいことを選んで、見たとおりにコードをHTMLに書き込んでいくと、BootstrapのCSS、JSが適用されます！
詳しい使い方については「Bootstrap 導入方法」などで検索するといっぱい出てきますので、今回は割愛します。

おススメは、ドットインストール様の「Bootstrap入門」です！
動画で簡単に、導入から使い方までを解説して下さっています（今はBootstrap3の講座になっています）
http://dotinstall.com/lessons/basic_twitter_bootstrap_v4

簡単にレスポンシブサイトが作れる「グリッドシステム」

Bootstrapでは、簡単にレスポンシブサイトが作れます。
たとえば、このサイトは、PCのブラウザで見るときは左にメインカラム、右にサイドバーがありますよね。
ためしに、ブラウザの右端を掴んで、ぎゅ～っと横幅を狭めてみてください。
どうですか？
ヘッダーは折りたたまれてアコーディオンメニューに、右のサイドバーは、左にあったメインカラムの下に、自動的に移動しましたね！
スマートフォンでこのサイトを見るときは、自動的に後者の見た目に変更されています！
同じように、タブレットから見るときも、タブレットから見やすい見た目に変更されます。

これは、Bootstrapの「グリッドシステム」を利用しています。
どうなっているのか、ソースを見てみましょう。

このサイトの全体のコーディングをざっくりとみると、このような骨組みになっています。
見ていただきたいのは、左メインコンテンツと、右サブメニューの部分です。
この部分は、PCで見ると左右に分かれていますが、左右の幅を縮めると自動的に１列になる部分ですね。

まず、グリッドシステムを使いたいコンテンツ全体をdiv class="row"で囲みます。
このdiv class="row"は、div class="container"の中にある必要がありますので、さらにdiv class="container"で囲んでいます。

次に、コンテンツ全体を、左右の二つのカラムに分けます。
Bootstrapのグリッドシステムは、横12列のグリッドで構成されています。
このうち9列を左メインコンテンツに、3列を右サブメニューに割り当てることにします。
左メインコンテンツをdiv class="span9で、
右メインコンテンツをdiv class="span3で囲みます。

なんと、たったこれだけです！
これだけで、PCでも、スマホでも、タブレットでも見やすいように、勝手に整形してるレスポンシブサイトが完成しちゃうんです！
12列を4列×3にしたら、３カラムのサイトも簡単に作れますね。

簡単にシンプルなボタンやページネーションを設置できる！

個人的にとても便利だな～と思ったのは、ちょっとクラスを追加するだけで、簡単にシンプルなボタンやページネーションを設置できることです！

たとえばボタンはこのようなコードを書くと、

ボタン
↑こんなボタンになります！a要素にclass="btn"をつけるだけです！
ボタンは他にも色々なクラスが用意されていて、たとえば下記のようなコードを書くと

Primary

Info

Success

Warning

Danger

Inverse

こんなかんじになります！超簡単でしょう？

ページネーションも簡単です！
↓このコードを描くと……

↑こうなります！
div class="pagination"で囲まれたリストが、勝手に綺麗なページネーションになってくれるんですね～！
また、class="active"をつけると、現在ページになります。

他にも色々と便利なことができるので、ぜひコンポーネントをご覧下さい！
http://php-fan.org/sample_code_demo/bootstrap.html

シンプルで見やすいタイポグラフィ

Bootstrapは、シンプルで見やすいタイポグラフィを持っています。
このサイトの見出しなんかも、すべてBootstrapのデフォルトのタイポグラフィを使っています。

とくによく使うのはcodeですね！
文字列をcodeで囲むと……

hoge←このように、コードが見やすくスッキリします！

シンプルで分かりやすいアイコン

また、Bootstrap2では、fontAwesomeのアイコンセットを使うことができます。
こちらもまた、使い方は超簡単！

↓こちらから、使いたいアイコンを選んで……
http://php-fan.org/sample_code_demo/bootstrap.html#icons

タグ

ユーザ

コンフィグ

i要素にclass="icon-tag"などの、表示させたいアイコンのクラスを付けるだけです！
アイコンはWEBフォントですので、どんな環境でも同じ見た目のフォントを表示することができます。
ボタンと一緒に使うと、さらに可愛いですね！

HOME

ただし、このアイコンは、Bootstrap3ではクラス名が異なったりするらしいので、詳しくはBootstrap3の使い方のサイトをご確認くださいね！

ほかにもたくさん！

ほかにも、簡単に見やすいテーブルが作れたり……

このサイトのヘッダーのような、スマホから見るとアコーディオンメニューになるナビバーを設置したりすることができます！

詳しくは、何度かご紹介したBootstrapのコンポーネントを見たり、
http://php-fan.org/sample_code_demo/bootstrap.html

「Bootstrap 使い方」で検索すると色々でてきます！！
ぜひチャレンジしてみてくださいね！