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

芸術情報演習デザイン(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="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="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の分割から、様々な組合せが生まれる
!
!
!
!
!
!
!
!

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

‣ グリッドの考え方
‣ Bootstrap3からは、レスポンシブ対応で大きく変化

‣ たとえば、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フレームワークを使う

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

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

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

Mais de Atsushi Tadokoro

Mais de Atsushi Tadokoro (20)

Último

Último (8)

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