時間が無いお客様や上司に、5分でCSSフレームワーク導入のメリットを説明するための資料です。

1. 開発コスト削減
統一感のあるデザイン
レスポンシブウェブデザイン
クロスブラウザ対応
Created by
Hiroyuki Horigome
@ Computer Management Co.,Ltd.
CSSフレームワークの導入

2. 本日のキーワードは、
１．レスポンシブウェブデザイン
２．クロスブラウザ対応
３．開発コスト削減
４．統一感のあるデザイン

3. 最近はパソコンだけでなく
タブレットやスマートフォンで
WEBサイトを利用するのが当たり前。

4. 従来のWEB開発
パソコン用サイト スマートフォン用サイト
それぞれに対応したWEBサイトを構築するため
開発工数は倍々ゲームで増加。
HTML/CSS HTML/CSS

5. しかも…
デスクトップ ノートパソコン タブレット スマートフォン
そして…

6. めっちゃコストかかる。

7. 改めて、本日のキーワード
１．レスポンシブウェブデザイン
２．クロスブラウザ対応
３．開発コスト削減
４．統一感のあるデザイン

8. CSSフレームワークとは
汎用的で統一感のあるデザインのCSSをまとめて提供し、
WEBアプリケーションの土台として機能するソフトウェア
のこと。
開発に利用することで効率良くWEBサイトを構築する
ことができ、フレームワークに沿った記述をするだけで、
レスポンシブウェブデザインに対応した
WEBサイトが作成できる。

9. レスポンシブウェブデザイン
画面サイズに応じてデザインを動的に切り替えることで、
複数のデバイスに柔軟に対応することができる。
一つのソースで複数のデバイス・ブラウザに対応できる。
HTML/CSS

10. つまり、
今までと同じか多少のコスト増で
今まで以上にカッコイイWEBサイト
が作れる。（個人差はあります）

11. 現在、一番メジャーなCSSフレームワークは
Twitter社発のBootstrap（ブートストラップ）。

12. 他にも、
Foundation（ZURB） Pure（Yahoo!）
など、様々なCSSフレームワークがある。

13. しかし、Boostrapは
圧倒的な
人気で
入門サイトや書籍の豊富のため学習コストが低く、
導入が非常に容易。

14. BoostrapはMITライセンスのオープンソースなので
無償で使用することが出来ます。
CSSフレームワークを導入して
効率の良いWEB開発を始めましょう！