狠狠撸

芸術情報演習デザイン(Web)
第8回: CSSフレームワークを使う
Twitter Bootstrap
2013年11月28日
東京藝術大学芸術情報センター(AMC)
担当：田所淳

今日の内容
? より本格的なWebデザインヘ
? 「CSSフレームワーク」をつかってみる
? 今回は、Twitter Bootstrapを題材に

Twitter Bootstrapとは
? http://getbootstrap.com/

? Twitter Bootstrap：
? Twitter社が開発／提供するオープンソースな「CSSフレームワー
ク」
? 簡単に高度なWebデザインをすることが可能
? 2013年11月現在のバージョンは、Version 3.0.2

? Bootstrapを使用したサイト
? http://builtwithbootstrap.com/ で多数紹介

? Bootstrapを利用したサイトの一例
? http://logobro.com/

? Bootstrapを利用したサイトの例
? http://demo.color-theme.com/?theme=NewsTrick

? Bootstrapを利用したサイトの例
? https://dotvita.com/

Twitter Bootstrapを使ってみる

? まずは、Bootstrapをダウンロード
? http://getbootstrap.com/
!

? Download 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

? 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>
<h1>Hello, world!</h1>
<script src=/slideshow/web-8-css/28661638/"https:/code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
レスポンシブ対応


</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>

<link href="css/bootstrap.min.css" rel="stylesheet"> BootstrapのCSS読込

</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>


</head>
IE対策
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>


</head>
<body>
<script src=/slideshow/web-8-css/28661638/"https:/code.jquery.com/jquery.js"></script> JQuery必須
</body>
</html>

<!DOCTYPE html>
<html>
<head>


</head>
<body>
Bootstrap読込
</body>
</html>

? Twitter Bootstrapでのレイアウトは「グリッドシステム (Gryd
Systems)」が基本となっている
? Grid Systems in Graphic Design/Raster Systeme Fur Die
Visuele Gestaltung

? 画面上に架空の縦横線をガイドラインとして引き、そのブロッ
クごとに文字や図版を配置する

? グリッドシステム
? エディトリアル (出版) デザインの分野では、レイアウトの基本
となっている
? Webデザインにおいても、グリッドシステムはデザインやレイ
アウトの基本

? グリッドシステムの例

? Webサイト http://www.thegridsystem.org/

? Twitter Bootstrapにおけるグリッドは、12コラムが基本
? 12の分割から、様々な組合せが生まれる
!
!
!
!
!
!
!
!

? このシステムを利用してレイアウトしていく

? グリッドの考え方
? 叠辞辞迟蝉迟谤补辫3からは、レスポンシブ対応で大きく変化

? たとえば、4 + 4 + 4の3コラムを組んでみる
? まず全体を、 container クラスで囲む
<!DOCTYPE html>
<html>
<head>
<![endif]-->
</head>
<body>

!
!

<div class="container">
</div>

</body>
</html>

? グリッドレイアウトする1行分を row クラスで区切る
<!DOCTYPE html>
<html>
<head>
<![endif]-->
</head>
<body>

!
!

<div class="row">
</div>

</div>
</body>
</html>

? 例えば、4 + 8 (= 12) でコラムを区切ってみる
<!DOCTYPE html>
<html>
<head>
<![endif]-->
</head>
<body>
<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>

? 4 + 4 + 4 で区切った例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="row">
<div class="col-md-12">
<h1>Hello Bootstrap!!</h1>
</div>
</div>
<div class="row">
<h2>4 Column</h2>
<p>…</p>
</div>
<h2>4 Column</h2>
<p>…</p>
</div>
<h2>4 Column</h2>
<p>…</p>
</div>
</div>
</div>
</body>
</html>

? 3段組のレイアウトが簡単に実現!!

? いろいろなパターンの段組に挑戦してみる!

? 冒頭のH1をよりヘッダーらしく
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="jumbotron">
<h1>こんにちは、Bootstrap!</h1>
<p>あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で
飾られたモーリオ市、郊外のぎらぎらひかる草の波。</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more »</
a></p>
</div>
</div>
<div class="row">
<h1>Hello Bootstrap!!</h1>
</div>
</div>
…(後略)…

? サンプルページの完成!!

? 今日はここまで
? 次回はデザインをカスタマイズして、より洗練されたデザイン
にしていきます

狠狠撸

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

More Related Content

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