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

4. 1.基礎のき
3.カスタマイズ
必要なもの
基礎知識
LESSを書こう
LESSとは？
bootstrapって？
CSS frameworkって?
色を変える
コンパイルしよう
2.作ってみよう
ファイルのダウンロード
index.htmlの作成
CSSの読み込み
コンポーネントを使う
グリッドを理解する
4.さいごに
未来のはなし
質疑応答

5. 必要なもの
1.パソコン
2.ブラウザ
必要知識
1.HTML
2.CSS
3.テキストエディタ
音声を聞きながら一緒に操作してみましょう
デュアルディスプレイやタブレットで
この授業を見ながら作業をすると
理解しやすいです

6. bootstrapって？

7. bootstrapって？
cssを読み込んでおくと
htmlを書くだけで
カッコいいサイトが作れるもの

8. CSS framework?

11. 作ってみよう

13. 1.HTMLを作成
2.CSSを読み込む
3.どんどんコピペ

14. ポイント
真ん中にしたいときは
class=“container”

15. 最初の壁

16. 最初の壁

17. 最初の壁

18. 最初の壁
グリッドシステム

19. class= row
class= col-xx-4
class= col-xx-8

20. class= row
class= col-xx-4
class= col-xx-8

21. class= row
class= col-xx-4
class= col-xx-8
複数カラムを作るときは
.rowと.col

22. 12個の四角が入っている
幅を狭めると下に流れる

23. 合計12になるように作る
サイドバー
メインコンテンツ
入れ子にするときも同様

24. 12個並べたいとき

25. 3つを同じ幅で並べたいとき

26. 2つを同じ幅で並べたいとき

27. スマフォ,PCで変えたいとき
<div class="col-xs-12 col-sm-6 col-md-8">
スマフォ
タブレット
PC

28. カスタマイズ

29. こっちを
LESSとは？
ダウンロード

31. LESSとは？

32. http:// lesscss.org/

34. 全部書き変える
のは大変。
ミスの原因!

36. ここだけ変えれば
全部が変わる!

37. セレクタが長い…

38. 入れ子ができます!

39. 色を変えてみよう!

41. LESS編集の流れ
codekitへ登録
出力先を設定
lessファイルを編集
保存

43. さいごに

44. 良かったら買ってね