芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
•
3 recomendaciones•1,340 vistas
Recomendados
Más contenido relacionado
Destacado
Destacado (12)
Similar a 芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
Similar a 芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ (20)
Más de Atsushi Tadokoro
Más de Atsushi Tadokoro (20)
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
- 1. 芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ 2013年6月6日 東京藝術大学 芸術情報センター(AMC) 担当：田所淳
- 2. 前回の復習
- 4. Twitter Bootstrapのダウンロード ‣ まずは、Bootstrapをダウンロード ‣ http://twitter.github.com/bootstrap/index.html ‣ Download Bootstrap ボタンから
- 5. 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
- 6. Twitter Bootstrapを使ってみる ‣ Twitter Bootstrapにおけるグリッドは、12コラムが基本 ‣ 12の分割から、様々な組合せが生まれる ‣ このシステムを利用してレイアウトしていく
- 7. <!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> Twitter Bootstrapを使ってみる ‣ たとえば、4 + 4 + 4の3コラムを組んでみる ‣ まずコラムの先頭を<div class="row-fluid">で囲む
- 8. ... ! ! ! <div class="row-fluid"> ! ! ! ! <div class="span4"> ! ! ! ! </div> ! ! ! ! <div class="span4"> ! ! ! ! </div> ! ! ! ! <div class="span4"> ! ! ! ! </div> ! ! ! </div> ... Twitter Bootstrapを使ってみる ‣ <div class="row-fluid">の中に ‣ 3つの<div class="span4">を入れる
- 9. ... ! ! ! <div class="row-fluid"> ! ! ! ! <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">の中に、内容を記述
- 12. Twitter Bootstrapを使ってみる ‣ 段組の完成したサンプルを以下からダウンロード ‣ 実際にコードをみながら復習します http://goo.gl/iFj4f
- 15. レスポンシブなページに ‣ レスポンシブWebデザイン（Responsive Web Design） ‣ 現在、WebサイトはPCで見るものとは限らない ‣ スマートフォン ‣ タブレット ‣ サイネージ ..etc. ‣ あらゆるデバイスに最適化したWebサイトを、単一のHTML で実現する制作手法を「レスポンシブ」なWebデザインとい う
- 16. <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="css/bootstrap-responsive.css" rel="stylesheet" /> レスポンシブなページに ‣ BootstrapでレスポンシブWebデザイン ‣ あらかじめ、レスポンシブなサイト制作を想定しているので、 とても簡単 ‣ <head>...</head>内に下記のコードを入れるだけ ‣ 先程の段組サンプルに入れてみる
- 21. ページサンプルを解析する ‣ Basic marketing site ‣
- 34. 中間課題発表!! ‣ Twitter BootstrapでWebページをデザイン ‣ テーマ: 展覧会の告知ページを作る ‣ 架空の展覧会もしくは、もうすぐ開催予定の「マテリアライジ ング展」の展覧会の告知ページの表紙ページ(1ページ)を Twitter Bootstrapを使用してデザインする ‣ 締切: 再来週のこの授業(6/20)まで! Text