情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
28
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap 2013年5月28日 東京藝術大学 芸術情報センター(AMC) 担当：田所淳
-
Upload
atsushi-tadokoro -
Category
Documents
-
view
1.652 -
download
0
Transcript of 情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
情報編集(Web) 第8回: CSSフレームワークを使うTwitter Bootstrap2013年5月28日東京藝術大学 芸術情報センター(AMC)担当：田所淳
今日の内容‣ より本格的なWebデザインヘ‣ 「CSSフレームワーク」をつかってみる‣ 今回は、Twitter Bootstrapを題材に
Twitter Bootstrapとは
Twitter Bootstrapとは‣ http://twitter.github.com/bootstrap/
Twitter Bootstrapとは‣ Twitter Bootstrap：‣ Twitter社が開発／提供するオープンソースな「CSSフレームワーク」
‣ 簡単に高度なWebデザインをすることが可能‣ 2013年5月現在のバージョンは、Version 2.3.2
Twitter Bootstrapとは‣ Bootstrapを使用したサイト‣ http://builtwithbootstrap.com/ で多数紹介
Twitter Bootstrapとは‣ Bootstrapを利用したサイトの一例‣ http://logobro.com/
Twitter Bootstrapとは‣ Bootstrapを利用したサイトの例‣ http://demo.color-theme.com/?theme=NewsTrick
Twitter Bootstrapとは‣ Bootstrapを利用したサイトの例‣ https://dotvita.com/
Twitter 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
<link rel="stylesheet" href="css/bootstrap.css" />
Twitter Bootstrapを使ってみる‣ 導入は簡単、下記のリンクを入れるだけ
<!DOCTYPE HTML><html>! <head>! ! <link rel="stylesheet" href="css/bootstrap.css" />! ! <meta charset="utf-8" />! ! <title>Bootstrapのテスト</title>! </head>! <body>
! </body></html>
Twitter Bootstrapを使ってみる‣ では早速、Bootstrapを入れたHTMLのベースを作成
<!DOCTYPE HTML><html>! <head>! ! <link rel="stylesheet" href="css/bootstrap.css" />! ! <meta charset="utf-8" />! ! <title>Bootstrapのテスト</title>! </head>! <body>! ! <div class="container">! ! </div>! </body></html>
Twitter Bootstrapを使ってみる‣ 次に、Bootstrapのコンテント全体を、class="container"のdiv要素で囲む
<!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>! </body></html>
Twitter Bootstrapを使ってみる‣ H1で見出しをつくってみる
Twitter Bootstrapを使ってみる‣ Twitter Bootstrapでのレイアウトは「グリッドシステム」が基本となっている
‣ Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung
Twitter Bootstrapを使ってみる‣ 画面上に架空の縦横線をガイドラインとして引き、そのブロックごとに文字や図版を配置する
Twitter Bootstrapを使ってみる‣ グリッドシステム‣ エディトリアル (出版) デザインの分野では、レイアウトの基本となっている
‣ Webデザインにおいても、グリッドシステムはデザインやレイアウトの基本
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">! ! ! </div>! ! </div>! </body></html>
Twitter Bootstrapを使ってみる‣ たとえば、4 + 4 + 4の3コラムを組んでみる‣ まずコラムの先頭を<div class="row">で囲む
...
! ! ! <div class="row">! ! ! ! <div class="span4">! ! ! ! </div>! ! ! ! <div class="span4">! ! ! ! </div>! ! ! ! <div class="span4">! ! ! ! </div>! ! ! </div>
...
Twitter Bootstrapを使ってみる‣ <div class="row">の中に‣ 3つの<div class="span4">を入れる
...
! ! ! <div class="row">! ! ! ! <div class="span4">! ! ! ! ! <h2>Span 4</h2>! ! ! ! ! <p> このコラムは、4つのスパン... </p>! ! ! ! </div>! ! ! ! <div class="span4">! ! ! ! ! <h2>Span 4</h2>! ! ! ! ! <p> このコラムは、4つのスパン... </p>! ! ! ! </div>! ! ! ! <div class="span4">! ! ! ! ! <h2>Span 4</h2>! ! ! ! ! <p> このコラムは、4つのスパン... </p>! ! ! ! </div>! ! ! </div>
...
Twitter Bootstrapを使ってみる‣ それぞれの<div class="span4">の中に、内容を記述
Twitter Bootstrapを使ってみる‣ 3段組のレイアウトが簡単に実現!!
Twitter Bootstrapを使ってみる‣ いろいろなパターンの段組に挑戦してみる!
<!DOCTYPE HTML><html>! <head>! ! <link rel="stylesheet" href="css/bootstrap.css" />! ! <meta charset="utf-8" />! ! <title>Bootstrapのテスト</title>! </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>...
Twitter Bootstrapを使ってみる‣ 冒頭のH1をよりヘッダーらしく
Twitter Bootstrapを使ってみる‣ サンプルページの完成!!
Twitter Bootstrapを使ってみる‣ 今日はここまで‣ 次回はデザインをカスタマイズして、より洗練されたデザインにしていきます
