Embed Size (px)
Citation preview
Bootstrap によるデザイン
AWS上で構築するRESTfulアプリ勉強会 ～Web開発ワークショップ～【第8回】
概要
概要
1. Bootstrap? 2. 結果、どうなる？
概要
1. Bootstrap? 2.結果、どうなる？
Bootstrap
＝CSSフレームワーク
CSSフレームワーク
•統一されたデザインを設定済み •基本、Htmlエレメントにclassを指定するだけ •レスポンシブデザイン
レスポンシブデザイン
画面を •container = グリッドの土台 •row = 行 •col = 列
で構成する
「グリッドシステム」 で実現
画面の横幅 class指定文字 ざっくり分類
～ 767px xs (xtra small) スマホ
768px ～ 991px sm (small) タブレット
992px ～ 1199px md (medium) ノートパソコン
1200px ～ lg (large) デスクトップパソコン
グリッドシステムにおける 画面の横幅の分類
<div class="container"> <div class="row"> <div class="col-sm-4 bg-info">success</div> <div class="col-sm-4 bg-danger">danger</div> <div class="col-sm-4 bg-info">success</div> <div class="col-sm-4 bg-danger">danger</div> <div class="col-sm-4 bg-info">success</div> <div class="col-sm-4 bg-danger">danger</div> </div> </div>
グリッドシステムのサンプル
タブレット：横幅768px以上(808px)
スマホ： 横幅768px未満(765px)
概要
1. Bootstrap? 2. 結果、どうなる？
これが
こんな感じセンスがないと感じたなら、Bootstrapではなく私の責任です…
ワークショップ
本日のメニュー
1. 事前準備 2. Lesson1 実験 3. Lesson2 実装
事前準備• gitのブランチを整える • 前回、前々回不参加の方はテーブル追加、列追加する
gitのブランチを整える
■masterブランチを前回の内容を終えた状態にする
■masterブランチを元に、今回の作業用である、 「vol/08」ブランチを作成する
人によって手順が違います！（重要）■前回の内容を途中までやった方 ■前回の内容を完了した方 ■今回から参加の方
gitのブランチを整える
http://
goo.gl/WEHXqXジーオーオー.ジーエル/ ダブリューイーエイチエックスキューエックス
ここに詳しく 書いております！
今回のマニュアルにリンクがあります。 ※後ほど説明
第5回と第6回に不参加の方は テーブル追加、列追加をする
実演http://www.bootply.com/
<div class="container"> <div class="row"> <div class="col-sm-4 bg-info">success</div> <div class="col-sm-4 bg-danger">danger</div> <div class="col-sm-4 bg-info">success</div> <div class="col-sm-4 bg-danger">danger</div> <div class="col-sm-4 bg-info">success</div> <div class="col-sm-4 bg-danger">danger</div> </div> </div>
実演：さっきのサンプル
Lesson2 試しながらやってみましょう。
こんなのボタンなどがすぐ出来ます。
マニュアル(Qiita)
http:// goo.gl/CD5cjoジーオーオー.ジーエル/ シーディー５シージェイオー
はじめましょう！
いい感じにデザインしてください！
🍻飲みDev🍕 テーマ
TODOを完了すると何かボワンとなるとか…
