情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ

情報編集(Web)
第9回: CSSフレームワークを使う - 2
Twitter Bootstrapのカスタマイズ
2013年6月4日
東京藝術大学芸術情報センター(AMC)
担当：田所淳

Twitter Bootstrap
‣ http://twitter.github.com/bootstrap/

Twitter Bootstrapのダウンロード
‣ まずは、Bootstrapをダウンロード
‣ http://twitter.github.com/bootstrap/index.html
‣ Download Bootstrap ボタンから

Twitter Bootstrapのダウンロード
‣ Zipファイルを解凍すると、以下のような内容になっている
‣ この「bootstrap」フォルダにページを作成していく
bootstrap/
!"" css/
# !"" bootstrap.css
# !"" bootstrap.min.css
!"" js/
# !"" bootstrap.js
# !"" bootstrap.min.js
$"" img/
!"" glyphicons-halflings.png
$"" glyphicons-halflings-white.png

Twitter Bootstrapを使ってみる
‣ Twitter Bootstrapにおけるグリッドは、12コラムが基本
‣ 12の分割から、様々な組合せが生まれる
‣ このシステムを利用してレイアウトしていく

<!DOCTYPE HTML>
<html>
! <head>
! ! <link rel="stylesheet" href="css/bootstrap.css" />
! ! <meta charset="utf-8" />
! ! <title>Bootstrapのテスト</title>
! </head>
! <body>
! ! <div class="container">
! ! ! <h1>Twitter Bootstrapのテスト</h1>!! !
! ! ! <div class="row-fluid">
! ! ! </div>
! ! </div>
! </body>
</html>
‣ たとえば、4 + 4 + 4の3コラムを組んでみる
‣ まずコラムの先頭を<div class="row-ﬂuid">で囲む

...
! ! ! ! <div class="span4">
! ! ! ! </div>
! ! ! ! </div>
! ! ! ! </div>
! ! ! </div>
...
‣ <div class="row-ﬂuid">の中に
‣ 3つの<div class="span4">を入れる

...
! ! ! ! ! <h2>Span 4</h2>
! ! ! ! ! <p> このコラムは、4つのスパン... </p>
! ! ! ! </div>
! ! ! ! ! <h2>Span 4</h2>
! ! ! ! ! <p> このコラムは、4つのスパン... </p>
! ! ! ! </div>
! ! ! ! ! <h2>Span 4</h2>
! ! ! ! ! <p> このコラムは、4つのスパン... </p>
! ! ! ! </div>
! ! ! </div>
...
‣ それぞれの<div class="span4">の中に、内容を記述

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

‣ 完成したページのサンプル

‣ 段組の完成したサンプルを以下からダウンロード
‣ 実際にコードをみながら復習します
http://goo.gl/iFj4f

ページを改良
レスポンシブなページに

‣ レスポンシブ(Responsive)なWebサイトへ

‣ レスポンシブWebデザイン（Responsive Web Design）
‣ 現在、WebサイトはPCで見るものとは限らない
‣ スマートフォン
‣ タブレット
‣ サイネージ ..etc.
‣ あらゆるデバイスに最適化したWebサイトを、単一のHTML
で実現する制作手法を「レスポンシブ」なWebデザインとい
う

‣ レスポンシブなWebに!!

Twitter Bootstrap
ページサンプルを解析する

‣ オフィシャルページに、実際の活用例のテンプレートが公開さ
れている
‣ これを参考にすると、実際にページのイメージが掴みやすい

‣ Starter template

‣ Basic marketing site
‣

‣ Fluid layout
‣

‣ Fluid layout

‣ Sticky footer

‣ Carousel jumbotron

Twitter Bootstrap
デザインをカスタマイズ

‣ BootstrapのCSSはかなり複雑
‣ 直接編集するのはちょっと大変…

‣ Bootstrapのページにカスタマイズ用メニューがある
‣ 好みに応じて変更して、CSSダウンロードして入れ替える

‣ 例えば、背景と文字の色を変更

‣ さらに、Twitterのオフィシャルとは別に、様々なカスタマイ
ズ用テンプレートが存在する
‣ 効果的に利用してみる

‣ Bootswatch
‣ http://bootswatch.com/

‣ StyleBootstrap.info
‣ http://stylebootstrap.info/

‣ wrapbootstrap
‣ https://wrapbootstrap.com/

中間課題発表!!
‣ Twitter BootstrapでWebページをデザイン
‣ テーマ: 展覧会の告知ページを作る
‣ 架空の展覧会もしくは、もうすぐ開催予定の「マテリアライジ
ング展」の展覧会の告知ページの表紙ページ(1ページ)を
Twitter Bootstrapを使用してデザインする
‣ 締切: 再来週のこの授業(6/18)まで!

情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ

More Related Content

Viewers also liked

Similar to 情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ

More from Atsushi Tadokoro

情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ