Successfully reported this slideshow.
Your SlideShare is downloading. ×

デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
10回目nodejs
10回目nodejs
Loading in …3
×

Check these out next

1 of 44 Ad

デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/313/room
ーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/313/room
ーーーーーーーーーーーーーーーーーーーーーーー

Advertisement
Advertisement

More Related Content

Viewers also liked (20)

Advertisement

Similar to デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ (20)

More from schoowebcampus (20)

Advertisement

Recently uploaded (20)

デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ

  1. 1. 1.基礎のき 3.カスタマイズ 必要なもの 基礎知識 LESSを書こう LESSとは? bootstrapって? CSS frameworkって? 色を変える コンパイルしよう 2.作ってみよう ファイルのダウンロード index.htmlの作成 CSSの読み込み コンポーネントを使う グリッドを理解する 4.さいごに 未来のはなし 質疑応答
  2. 2. 必要なもの 1.パソコン 2.ブラウザ 必要知識 1.HTML 2.CSS 3.テキストエディタ 音声を聞きながら一緒に操作してみましょう デュアルディスプレイやタブレットで この授業を見ながら作業をすると 理解しやすいです
  3. 3. bootstrapって?
  4. 4. bootstrapって? cssを読み込んでおくと htmlを書くだけで カッコいいサイトが作れるもの
  5. 5. CSS framework?
  6. 6. 作ってみよう
  7. 7. 1.HTMLを作成 2.CSSを読み込む 3.どんどんコピペ
  8. 8. ポイント 真ん中にしたいときは class=“container”
  9. 9. 最初の壁
  10. 10. 最初の壁
  11. 11. 最初の壁
  12. 12. 最初の壁 グリッドシステム
  13. 13. class= row class= col-xx-4 class= col-xx-8
  14. 14. class= row class= col-xx-4 class= col-xx-8
  15. 15. class= row class= col-xx-4 class= col-xx-8 複数カラムを作るときは .rowと.col
  16. 16. 12個の四角が入っている 幅を狭めると下に流れる
  17. 17. 合計12になるように作る サイドバー メインコンテンツ 入れ子にするときも同様
  18. 18. 12個並べたいとき
  19. 19. 3つを同じ幅で並べたいとき
  20. 20. 2つを同じ幅で並べたいとき
  21. 21. スマフォ,PCで変えたいとき <div class="col-xs-12 col-sm-6 col-md-8"> スマフォ タブレット PC
  22. 22. カスタマイズ
  23. 23. こっちを LESSとは? ダウンロード
  24. 24. LESSとは?
  25. 25. http:// lesscss.org/
  26. 26. 全部書き変える のは大変。 ミスの原因!
  27. 27. ここだけ変えれば 全部が変わる!
  28. 28. セレクタが長い…
  29. 29. 入れ子ができます!
  30. 30. 色を変えてみよう!
  31. 31. LESS編集の流れ codekitへ登録 出力先を設定 lessファイルを編集 保存
  32. 32. さいごに
  33. 33. 良かったら買ってね

×