なぜ僕がCSSを勉強したかというと、研修の時にサイトを自分たちで作った時になんか地味でかっこ悪いなと思い、なにかもっと派手に出来ないかなぁと考えたのがきっかけです。

1. Rootage.inc
CSSについて
スライド製作課題

2. Rootage.incCSSについて
自己紹介
2

3. Rootage.incCSSについて
自己紹介
名前： 坂本章
入社歴： ４ヶ月
趣味： 車いじり、音
楽
3

4. Rootage.incCSSについて
初めに
4

5. Rootage.incCSSについて
初めに
なぜ僕がCSSを勉強したかというと、研修の時に
サイトを自分たちで作った時に
なんか地味でかっこ悪いなと思い、なにかもっ
と派手に出来ないかなぁと考えたのがきっかけ
です。
引用元：http://eternalwave.jugem.jp/?eid=430 5

6. Rootage.incCSSについて
agenda
6

7. Rootage.incCSSについて
agenda
1：CSSとは
2：画面の比較
3： 文字の大きさを変える
4：フォントを変える
5： 配置を変える
6： 文字の色を変える
7： デモ
引用元：http://dime.jp/genre/124343/4/
7

8. Rootage.incCSSについて
1：CSSとは
8

9. Rootage.incCSSについて
1：CSSとは
皆さんはCSSとはなにか知っ
ていますか？
9

10. Rootage.incCSSについて
1：CSSとは
スタイルシートっていうや
つ・・・
デザインで使うやつ・・・
引用元：http://nlab.itmedia.co.jp/nl/articles/1410/17/news126.html
10

11. Rootage.incCSSについて
正解です！
もっと詳しく言う
と・・・
引用元：
http://www.goodsmile.info/ja/product/5080/figma+%E8%80%83%E
3%81%88%E3%82%8B%E4%BA%BA+%E7%9F%B3%E8%86%
8Fver.html 11

12. Rootage.incCSSについて
1：CSSとは
Webページのレイアウトを定義する規格。
CSSを使うと、フォントや文字の大きさ、文字飾り、行間な
どの見栄えに関する情報を複数のレイアウトから選択するこ
とができるようになる。
引用元：
http://www.goodsmile.info/ja/product/4685/figma+%E8%80%83
%E3%81%88%E3%82%8B%E4%BA%BA.html
12

13. Rootage.incCSSについて
2：画面の比較
13

14. Rootage.incCSSについて
2：画面の比較
それでは、CSSを使った画面と
使わなかった画面を比較してみてみましょう。
14

15. CSSについて Rootage.inc
15
http://free-
illustrations.gatag.net/2013/09/19/180000.html

16. Rootage.incCSSについて
これが・・・
16

17. CSSについて Rootage.inc
17
http://free-
illustrations.gatag.net/2013/09/19/180000.html

18. Rootage.incCSSについて
こうなります！ 引用元：
http://www.goodsm
ile.info/ja/product/5
080/figma+%E8%
80%83%E3%81%
88%E3%82%8B%
E4%BA%BA+%E7
%9F%B3%E8%86
%8Fver.html
18

19. Rootage.incCSSについて
3： 文字の大きさを変える
19

20. Rootage.incCSSについて
文字の大きさを変える
構文
font-size: 値;
値
長さpx ・ small ・ large 等
20

21. CSSについて Rootage.inc
21
http://free-
illustrations.gatag.net/2013/09/19/180000.html
small

22. CSSについて Rootage.inc
22
http://free-
illustrations.gatag.net/2013/09/19/180000.html
large

23. CSSについて Rootage.inc
23
http://free-
illustrations.gatag.net/2013/09/19/180000.html
70ｐｘ

24. Rootage.incCSSについて
4： フォントを変える
24

25. Rootage.incCSSについて
フォントを変える
構文
font-family: 値;
値
sans-serif ・ fantasy ・ cursive 等
25

26. Rootage.incCSSについて
フォントを変える
構文
font-family: sans-serif;
26

27. Rootage.incCSSについて
フォントを変える
構文
font-family: fantasy;
27

28. Rootage.incCSSについて
フォントを変える
構文
font-family: cursive;
28

29. Rootage.incCSSについて
5：配置を変える
29

30. Rootage.incCSSについて
配置を変える
構文
text-align: 値;
値
left ・ center ・ right 等
30

31. CSSについて Rootage.inc
31
http://free-
illustrations.gatag.net/2013/09/19/180000.html
left

32. CSSについて Rootage.inc
32
http://free-
illustrations.gatag.net/2013/09/19/180000.html
center

33. CSSについて Rootage.inc
33
http://free-
illustrations.gatag.net/2013/09/19/180000.html
right

34. Rootage.incCSSについて
6： 文字の色を変える
34

35. Rootage.incCSSについて
文字の色を変える
構文
color: 値;
値
色名 ・ カラーコード
35

36. Rootage.incCSSについて
文字の色を変える
構文
color: red;
赤になります
36

37. Rootage.incCSSについて
文字の色を変える
構文
color: 0000FF;
青になります
37

38. Rootage.incCSSについて
6： デモ
38

39. Rootage.incCSSについて
僕が作った画面をお見せします
39

40. Rootage.incCSSについて
まとめ
40

41. Rootage.incCSSについて
まとめ
CSSは奥がとても深くここで書ききれない量があり、 組み合
わせ次第で自分らしさを表現できます 。
ここで紹介したものは基本のほんの一部です。もし興味があ
ったらいろいろ調べてみてください。
引用元：
http://dime.jp/genre/124343/4/
41

42. Rootage.incCSSについて
参考サイト
・http://www.tagindex.com/stylesheet/properties/
・http://unitopi.com/font-family-css/
・http://www.netyasun.com/home/color.html
42

43. Rootage.incCSSについて
END
43
ご清聴ありがとうございま
した