情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap

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

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

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

‣ Twitter Bootstrap：
‣ Twitter社が開発／提供するオープンソースな「CSSフレーム
ワーク」
‣ 簡単に高度なWebデザインをすることが可能
‣ 2013年5月現在のバージョンは、Version 2.3.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://twitter.github.com/bootstrap/index.html
‣ Download Bootstrap ボタンから

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

<!DOCTYPE HTML>
<html>
! <head>
! ! <link rel="stylesheet" href="css/bootstrap.css" />
! ! <meta charset="utf-8" />
! ! <title>Bootstrapのテスト</title>
! </head>
! <body>
! </body>
</html>
‣ では早速、Bootstrapを入れたHTMLのベースを作成

<!DOCTYPE HTML>
<html>
! <head>
! </head>
! <body>
! ! <div class="container">
! ! </div>
! </body>
</html>
‣ 次に、Bootstrapのコンテント全体を、
class="container"のdiv要素で囲む

<!DOCTYPE HTML>
<html>
! <head>
! </head>
! <body>
! ! ! <h1>Twitter Bootstrapのテスト</h1>
! ! </div>
! </body>
</html>
‣ H1で見出しをつくってみる

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

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

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

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

<!DOCTYPE HTML>
<html>
! <head>
! </head>
! <body>
! ! ! <h1>Twitter Bootstrapのテスト</h1>!! !
! ! ! <div class="row">
! ! ! </div>
! ! </div>
! </body>
</html>
‣ たとえば、4 + 4 + 4の3コラムを組んでみる
‣ まずコラムの先頭を<div class="row">で囲む

...
! ! ! ! <div class="span4">
! ! ! ! </div>
! ! ! ! </div>
! ! ! ! </div>
! ! ! </div>
...
‣ <div class="row">の中に
‣ 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段組のレイアウトが簡単に実現!!

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

<!DOCTYPE HTML>
<html>
! <head>
! </head>
! <body>
! ! <div class="container">!! !
! ! ! <div class="hero-unit">
! ! ! ! <h1>Hello Twitter Bootstrap!!</h1>
! ! ! ! <p>このページは、Twitter Bootstrapを利用して作成し
たページのサンプルです。</p>
! ! ! ! <p><a class="btn btn-primary btn-large">もっと
詳しく</a></p>
! ! ! </div>
...
‣ 冒頭のH1をよりヘッダーらしく

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

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

情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap

More Related Content

Viewers also liked

Similar to 情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap

More from Atsushi Tadokoro

情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap