芸術情報演習デザイン(web) 第8回: cssフレームワークを使う
TRANSCRIPT
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap2013年11月28日 東京藝術大学 芸術情報センター(AMC) 担当：田所淳
今日の内容‣ より本格的なWebデザインヘ ‣ 「CSSフレームワーク」をつかってみる ‣ 今回は、Twitter Bootstrapを題材に
Twitter Bootstrapとは
Twitter Bootstrapとは‣ Twitter Bootstrap： ‣ Twitter社が開発／提供するオープンソースな「CSSフレームワーク」
‣ 簡単に高度なWebデザインをすることが可能 ‣ 2013年11月現在のバージョンは、Version 3.0.2
Twitter Bootstrapとは‣ Bootstrapを使用したサイト ‣ http://builtwithbootstrap.com/ で多数紹介
Twitter Bootstrapとは‣ Bootstrapを利用したサイトの例 ‣ http://demo.color-theme.com/?theme=NewsTrick
Twitter Bootstrapを使ってみる
Twitter Bootstrapを使ってみる‣ まずは、Bootstrapをダウンロード ‣ http://getbootstrap.com/ !
‣ Download Bootstrap ボタンから
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
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>
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>
レスポンシブ対応
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>
BootstrapのCSS読込
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>
IE対策
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>
JQuery必須
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>
Bootstrap読込
Twitter Bootstrapを使ってみる‣ Twitter Bootstrapでのレイアウトは「グリッドシステム (Gryd Systems)」が基本となっている
‣ Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung
Twitter Bootstrapを使ってみる‣ 画面上に架空の縦横線をガイドラインとして引き、そのブロックごとに文字や図版を配置する
Twitter Bootstrapを使ってみる‣ グリッドシステム ‣ エディトリアル (出版) デザインの分野では、レイアウトの基本となっている
‣ Webデザインにおいても、グリッドシステムはデザインやレイアウトの基本
Twitter Bootstrapを使ってみる‣ グリッドシステムの例
Twitter Bootstrapを使ってみる‣ Twitter Bootstrapにおけるグリッドは、12コラムが基本 ‣ 12の分割から、様々な組合せが生まれる !!!!!!!!
‣ このシステムを利用してレイアウトしていく
Twitter Bootstrapを使ってみる‣ グリッドの考え方 ‣ Bootstrap3からは、レスポンシブ対応で大きく変化
<!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>
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 class="row"> </div> ! </div> </body> </html>
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 class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> </div> </body> </html>
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" /> </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>
Twitter Bootstrapを使ってみる‣ 4 + 4 + 4 で区切った例
Twitter Bootstrapを使ってみる‣ 3段組のレイアウトが簡単に実現!!
Twitter Bootstrapを使ってみる‣ いろいろなパターンの段組に挑戦してみる!
<!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 »</a></p> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Hello Bootstrap!!</h1> </div> </div> …(後略)…
Twitter Bootstrapを使ってみる‣ 冒頭のH1をよりヘッダーらしく
Twitter Bootstrapを使ってみる‣ サンプルページの完成!!
Twitter Bootstrapを使ってみる‣ 今日はここまで ‣ 次回はデザインをカスタマイズして、より洗練されたデザインにしていきます