0
芸術情報演習デザイン(Web)
第8回: CSSフレームワークを使う
Twitter Bootstrap
2013年11月28日
東京藝術大学 芸術情報センター(AMC)
担当:田所淳
今日の内容
‣ より本格的なWebデザインヘ
‣ 「CSSフレームワーク」をつかってみる
‣ 今回は、Twitter Bootstrapを題材に
Twitter Bootstrapとは
Twitter Bootstrapとは
‣ http://getbootstrap.com/
Twitter Bootstrapとは
‣ Twitter Bootstrap:
‣ Twitter社が開発/提供するオープンソースな「CSSフレームワー
ク」
‣ 簡単に高度なWebデザインをすることが可能
‣ 2013年11月現在のバージョ...
Twitter Bootstrapとは
‣ Bootstrapを使用したサイト
‣ http://builtwithbootstrap.com/ で多数紹介
Twitter Bootstrapとは
‣ Bootstrapを利用したサイトの一例
‣ http://logobro.com/
Twitter Bootstrapとは
‣ Bootstrapを利用したサイトの例
‣ http://demo.color-theme.com/?theme=NewsTrick
Twitter Bootstrapとは
‣ Bootstrapを利用したサイトの例
‣ https://dotvita.com/
Twitter Bootstrapを使ってみる
Twitter Bootstrapを使ってみる
‣ まずは、Bootstrapをダウンロード
‣ http://getbootstrap.com/
!

‣ Download Bootstrap ボタンから
Twitter Bootstrapを使ってみる
‣ Zipファイルを解凍すると、以下のような内容になっている
‣ この「bootstrap」フォルダにページを作成していく

bootstrap/
├── css/
│
├── bootstrap...
Twitter Bootstrapを使ってみる
‣ Bootstrapのテンプレート
‣ 以下のテンプレートから開始する
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</...
Twitter Bootstrapを使ってみる
‣ Bootstrapのテンプレート
‣ 以下のテンプレートから開始する
<!DOCTYPE html>
<html>
<head>
レスポンシブ対応
<title>Bootstrap 101 T...
Twitter Bootstrapを使ってみる
‣ Bootstrapのテンプレート
‣ 以下のテンプレートから開始する
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</...
Twitter Bootstrapを使ってみる
‣ Bootstrapのテンプレート
‣ 以下のテンプレートから開始する
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</...
Twitter Bootstrapを使ってみる
‣ Bootstrapのテンプレート
‣ 以下のテンプレートから開始する
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</...
Twitter Bootstrapを使ってみる
‣ Bootstrapのテンプレート
‣ 以下のテンプレートから開始する
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</...
Twitter Bootstrapを使ってみる
‣ Twitter Bootstrapでのレイアウトは「グリッドシステム (Gryd
Systems)」が基本となっている
‣ Grid Systems in Graphic Design/Ras...
Twitter Bootstrapを使ってみる
‣ 画面上に架空の縦横線をガイドラインとして引き、そのブロッ
クごとに文字や図版を配置する
Twitter Bootstrapを使ってみる
‣ グリッドシステム
‣ エディトリアル (出版) デザインの分野では、レイアウトの基本
となっている
‣ Webデザインにおいても、グリッドシステムはデザインやレイ
アウトの基本
Twitter Bootstrapを使ってみる
‣ グリッドシステムの例
Twitter Bootstrapを使ってみる
‣ Webサイト http://www.thegridsystem.org/
Twitter Bootstrapを使ってみる
‣ Twitter Bootstrapにおけるグリッドは、12コラムが基本
‣ 12の分割から、様々な組合せが生まれる
!
!
!
!
!
!
!
!

‣ このシステムを利用してレイアウトしてい...
Twitter Bootstrapを使ってみる
‣ グリッドの考え方
‣ Bootstrap3からは、レスポンシブ対応で大きく変化
Twitter Bootstrapを使ってみる
‣ たとえば、4 + 4 + 4の3コラムを組んでみる
‣ まず全体を、 container クラスで囲む
<!DOCTYPE html>
<html>
<head>
<title>Bootstr...
Twitter Bootstrapを使ってみる
‣ グリッドレイアウトする1行分を row クラスで区切る
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
...
Twitter Bootstrapを使ってみる
‣ 例えば、4 + 8 (= 12) でコラムを区切ってみる
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>...
Twitter Bootstrapを使ってみる
‣ 4 + 4 + 4 で区切った例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name=...
Twitter Bootstrapを使ってみる
‣ 3段組のレイアウトが簡単に実現!!
Twitter Bootstrapを使ってみる
‣ いろいろなパターンの段組に挑戦してみる!
Twitter Bootstrapを使ってみる
‣ 冒頭のH1をよりヘッダーらしく
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="...
Twitter Bootstrapを使ってみる
‣ サンプルページの完成!!
Twitter Bootstrapを使ってみる
‣ 今日はここまで
‣ 次回はデザインをカスタマイズして、より洗練されたデザイン
にしていきます
Upcoming SlideShare
Loading in...5
×

芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う

812

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
812
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う"

  1. 1. 芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap 2013年11月28日 東京藝術大学 芸術情報センター(AMC) 担当:田所淳
  2. 2. 今日の内容 ‣ より本格的なWebデザインヘ ‣ 「CSSフレームワーク」をつかってみる ‣ 今回は、Twitter Bootstrapを題材に
  3. 3. Twitter Bootstrapとは
  4. 4. Twitter Bootstrapとは ‣ http://getbootstrap.com/
  5. 5. Twitter Bootstrapとは ‣ Twitter Bootstrap: ‣ Twitter社が開発/提供するオープンソースな「CSSフレームワー ク」 ‣ 簡単に高度なWebデザインをすることが可能 ‣ 2013年11月現在のバージョンは、Version 3.0.2
  6. 6. Twitter Bootstrapとは ‣ Bootstrapを使用したサイト ‣ http://builtwithbootstrap.com/ で多数紹介
  7. 7. Twitter Bootstrapとは ‣ Bootstrapを利用したサイトの一例 ‣ http://logobro.com/
  8. 8. Twitter Bootstrapとは ‣ Bootstrapを利用したサイトの例 ‣ http://demo.color-theme.com/?theme=NewsTrick
  9. 9. Twitter Bootstrapとは ‣ Bootstrapを利用したサイトの例 ‣ https://dotvita.com/
  10. 10. Twitter Bootstrapを使ってみる
  11. 11. Twitter Bootstrapを使ってみる ‣ まずは、Bootstrapをダウンロード ‣ http://getbootstrap.com/ ! ‣ Download Bootstrap ボタンから
  12. 12. Twitter Bootstrapを使ってみる ‣ Zipファイルを解凍すると、以下のような内容になっている ‣ この「bootstrap」フォルダにページを作成していく bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
  13. 13. Twitter Bootstrapを使ってみる ‣ Bootstrapのテンプレート ‣ 以下のテンプレートから開始する <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src=“https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src=“https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
  14. 14. Twitter Bootstrapを使ってみる ‣ Bootstrapのテンプレート ‣ 以下のテンプレートから開始する <!DOCTYPE html> <html> <head> レスポンシブ対応 <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src=“https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src=“https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
  15. 15. Twitter Bootstrapを使ってみる ‣ Bootstrapのテンプレート ‣ 以下のテンプレートから開始する <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> BootstrapのCSS読込 <!--[if lt IE 9]> <script src=“https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src=“https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
  16. 16. Twitter Bootstrapを使ってみる ‣ Bootstrapのテンプレート ‣ 以下のテンプレートから開始する <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src=“https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src=“https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <![endif]--> </head> IE対策 <body> <h1>Hello, world!</h1> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
  17. 17. Twitter Bootstrapを使ってみる ‣ Bootstrapのテンプレート ‣ 以下のテンプレートから開始する <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src=“https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src=“https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="https://code.jquery.com/jquery.js"></script> JQuery必須 <script src="js/bootstrap.min.js"></script> </body> </html>
  18. 18. Twitter Bootstrapを使ってみる ‣ Bootstrapのテンプレート ‣ 以下のテンプレートから開始する <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src=“https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src=“https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> Bootstrap読込 </body> </html>
  19. 19. Twitter Bootstrapを使ってみる ‣ Twitter Bootstrapでのレイアウトは「グリッドシステム (Gryd Systems)」が基本となっている ‣ Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung
  20. 20. Twitter Bootstrapを使ってみる ‣ 画面上に架空の縦横線をガイドラインとして引き、そのブロッ クごとに文字や図版を配置する
  21. 21. Twitter Bootstrapを使ってみる ‣ グリッドシステム ‣ エディトリアル (出版) デザインの分野では、レイアウトの基本 となっている ‣ Webデザインにおいても、グリッドシステムはデザインやレイ アウトの基本
  22. 22. Twitter Bootstrapを使ってみる ‣ グリッドシステムの例
  23. 23. Twitter Bootstrapを使ってみる ‣ Webサイト http://www.thegridsystem.org/
  24. 24. Twitter Bootstrapを使ってみる ‣ Twitter Bootstrapにおけるグリッドは、12コラムが基本 ‣ 12の分割から、様々な組合せが生まれる ! ! ! ! ! ! ! ! ‣ このシステムを利用してレイアウトしていく
  25. 25. Twitter Bootstrapを使ってみる ‣ グリッドの考え方 ‣ Bootstrap3からは、レスポンシブ対応で大きく変化
  26. 26. Twitter Bootstrapを使ってみる ‣ たとえば、4 + 4 + 4の3コラムを組んでみる ‣ まず全体を、 container クラスで囲む <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet"> <![endif]--> </head> <body> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> ! ! <div class="container"> </div> </body> </html>
  27. 27. Twitter Bootstrapを使ってみる ‣ グリッドレイアウトする1行分を row クラスで区切る <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet"> <![endif]--> </head> <body> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <div class="container"> ! ! <div class="row"> </div> </div> </body> </html>
  28. 28. Twitter Bootstrapを使ってみる ‣ 例えば、4 + 8 (= 12) でコラムを区切ってみる <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet"> <![endif]--> </head> <body> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> </div> </body> </html>
  29. 29. Twitter Bootstrapを使ってみる ‣ 4 + 4 + 4 で区切った例 <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Hello Bootstrap!!</h1> </div> </div> <div class="row"> <div class="col-md-4"> <h2>4 Column</h2> <p>…</p> </div> <div class="col-md-4"> <h2>4 Column</h2> <p>…</p> </div> <div class="col-md-4"> <h2>4 Column</h2> <p>…</p> </div> </div> </div> </body> </html>
  30. 30. Twitter Bootstrapを使ってみる ‣ 3段組のレイアウトが簡単に実現!!
  31. 31. Twitter Bootstrapを使ってみる ‣ いろいろなパターンの段組に挑戦してみる!
  32. 32. Twitter Bootstrapを使ってみる ‣ 冒頭のH1をよりヘッダーらしく <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <div class="jumbotron"> <div class="container"> <h1>こんにちは、Bootstrap!</h1> <p>あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で 飾られたモーリオ市、郊外のぎらぎらひかる草の波。</p> <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</ a></p> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Hello Bootstrap!!</h1> </div> </div> …(後略)…
  33. 33. Twitter Bootstrapを使ってみる ‣ サンプルページの完成!!
  34. 34. Twitter Bootstrapを使ってみる ‣ 今日はここまで ‣ 次回はデザインをカスタマイズして、より洗練されたデザイン にしていきます
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×