第 19 回　松戸 WordPress 部勉強会CSS 特集 〜 CSS 設計・フレームワーク〜

SESSION2

BOOTSTRAP を使ってみよう

2015/07/29 　松戸 Banana Cluster

川路正樹 from トリックスタジオ

自己紹介

川路　正樹（かわじ　まさき）

● 株式会社トリックスタジオ

●デザイナー／アートディレクター

＜経歴＞

・建築設計　 3 年

・個人事務所や制作会社で DTP ・印刷物

・ジョブダイレクトなどで WEB デザイン

・現在に至る

Bootstrap使ったことあります？

CSS フレームワークを代表するひとつ。

HTML+CSS と jquery プラグインを用いたデザインテンプレートが用意されています。

Bootstrap とは

http://getbootstrap.com/

最新バージョンは 3.3.5 （ 2015/07/29 時点）

ひっそりとバージョンアップしているので気をつけましょう。

Bootstrap

対応ブラウザと対応デバイス

下記プロパティが反映されません。

IE8-9 での注意点

1 ：ダウンロードする　→ Bootstrap をダウンロードして、　　いつもどおりのコーディング。

2 ： CDN を利用する　→ Bootstrap をダウンロードする必要なし！　　 Bootstrap CDN のソースをコピペで完了。

Bootstrap の実装方法

コンテンツデリバリネットワーク (Contents Delivery Network, CDN) とは、 Web コンテンツをインターネット経由で配信するために最適化されたネットワークのことである。※ wikipedia より抜粋

世界中に張り巡らされたサーバ（ CDN 配信プラットフォーム）を通して、コンテンツにアクセスしようとするエンドユーザに最も近いサーバから効率的に配信する仕組みのことです。※ CDNetworks 「 CDN の仕組み」より抜粋　 http://www.cdnetworks.co.jp/about/

CDN とは？

http://getbootstrap.com/getting-started/

Bootstrap CDN

とても便利なのでぜひ CDN を活用しましょう！

アイコンフォントがたくさん！これもぜひ！ http://fortawesome.github.io/Font-Awesome/

おすすめ Font Awesome

http://fortawesome.github.io/Font-Awesome/get-started/

CDN あります

Bootstrap のグリッドシステム

必ず次のどちらかを設定します固定幅レイアウトは container

全幅レイアウトは container-fluid

レイアウトの基礎

<header><div class=“container”> ～ </div></header>

<header><div class=“container-fluid”> ～ </div></header>

カラムにするときは、 .row でくくります。

中を 9+3 ＝ 12 　となるように設定します。

カラムレイアウトの基本記述

<div class=“container”> <div class="row"> <div class="col-sm-9"> メイン部分 </div> <div class="col-sm-3"> サイド部分 </div> </div></div>

入れ子も同じ構造で追加します。その中で合計が 12 になるように設定します。

入れ子の場合

div class="row"> <div class="col-sm-9"> メイン部分 </div> <div class="col-sm-3"> <div class="row">

<div class="col-sm-4"> 入れ子の中その 1</div><div class="col-sm-4"> 入れ子の中その 2</div><div class="col-sm-4"> 入れ子の中その 3</div>

</div> </div></div>

Bootstrap のサイトを確認してみよう

Bootstrap Expohttp://expo.getbootstrap.com/FIFA.com や NASA 、 ING も Bootstrap!

Bootstrap で作られたとは思えないほど洗練されたデザインの Web サイトのまとめ（コリス） http://coliss.com/articles/build-websites/operation/design/awesome-websites-used-bootstrap.html

Bootstrap の活用事例

まとめ

・実装はとっても簡単です。

・グリッドシステムを活用すれば、　既存サイトもレスポンシブ化しやすい、かも。

・アイコンフォントだけでも利用価値大！

ご清聴ありがとうございました