芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 890 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
890
On Slideshare
812
From Embeds
78
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
4

Embeds 78

http://yoppa.org 78

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap 2013年11月28日 東京藝術大学 芸術情報センター(AMC) 担当:田所淳
  • 2. 今日の内容 ‣ より本格的なWebデザインヘ ‣ 「CSSフレームワーク」をつかってみる ‣ 今回は、Twitter Bootstrapを題材に
  • 3. Twitter Bootstrapとは
  • 4. Twitter Bootstrapとは ‣ http://getbootstrap.com/
  • 5. Twitter Bootstrapとは ‣ Twitter Bootstrap: ‣ Twitter社が開発/提供するオープンソースな「CSSフレームワー ク」 ‣ 簡単に高度なWebデザインをすることが可能 ‣ 2013年11月現在のバージョンは、Version 3.0.2
  • 6. Twitter Bootstrapとは ‣ Bootstrapを使用したサイト ‣ http://builtwithbootstrap.com/ で多数紹介
  • 7. Twitter Bootstrapとは ‣ Bootstrapを利用したサイトの一例 ‣ http://logobro.com/
  • 8. Twitter Bootstrapとは ‣ Bootstrapを利用したサイトの例 ‣ http://demo.color-theme.com/?theme=NewsTrick
  • 9. Twitter Bootstrapとは ‣ Bootstrapを利用したサイトの例 ‣ https://dotvita.com/
  • 10. Twitter Bootstrapを使ってみる
  • 11. Twitter Bootstrapを使ってみる ‣ まずは、Bootstrapをダウンロード ‣ http://getbootstrap.com/ ! ‣ Download Bootstrap ボタンから
  • 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. 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. 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. 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. 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. 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. 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. Twitter Bootstrapを使ってみる ‣ Twitter Bootstrapでのレイアウトは「グリッドシステム (Gryd Systems)」が基本となっている ‣ Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung
  • 20. Twitter Bootstrapを使ってみる ‣ 画面上に架空の縦横線をガイドラインとして引き、そのブロッ クごとに文字や図版を配置する
  • 21. Twitter Bootstrapを使ってみる ‣ グリッドシステム ‣ エディトリアル (出版) デザインの分野では、レイアウトの基本 となっている ‣ Webデザインにおいても、グリッドシステムはデザインやレイ アウトの基本
  • 22. Twitter Bootstrapを使ってみる ‣ グリッドシステムの例
  • 23. Twitter Bootstrapを使ってみる ‣ Webサイト http://www.thegridsystem.org/
  • 24. Twitter Bootstrapを使ってみる ‣ Twitter Bootstrapにおけるグリッドは、12コラムが基本 ‣ 12の分割から、様々な組合せが生まれる ! ! ! ! ! ! ! ! ‣ このシステムを利用してレイアウトしていく
  • 25. Twitter Bootstrapを使ってみる ‣ グリッドの考え方 ‣ Bootstrap3からは、レスポンシブ対応で大きく変化
  • 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. 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. 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. 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. Twitter Bootstrapを使ってみる ‣ 3段組のレイアウトが簡単に実現!!
  • 31. Twitter Bootstrapを使ってみる ‣ いろいろなパターンの段組に挑戦してみる!
  • 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. Twitter Bootstrapを使ってみる ‣ サンプルページの完成!!
  • 34. Twitter Bootstrapを使ってみる ‣ 今日はここまで ‣ 次回はデザインをカスタマイズして、より洗練されたデザイン にしていきます